Net Core: создание HTML TagHelper / методов расширения для начальной загрузки - PullRequest
Новая
       54

Net Core: создание HTML TagHelper / методов расширения для начальной загрузки

0 голосов
/ 24 июня 2019

Я хотел бы создать пользовательский интерфейс Card Widget, в настоящее время он в этом формате Controller / View.Разработчик передает переменные из контроллера.

Я хотел бы встроить в HTML-код в желаемом формате ниже (возможно, пометить хелперы / методы расширения).Как мне создать библиотечную функцию для этого?(должно быть похоже на форматы Kendo telerik).Не нужно быть помощниками или расширениями тегов, просто все, что мы можем кодировать в нужном формате ниже, просто предлагая идеи,

Текущий формат:

ТестКонтроллер: 

_cardtitle = "Green Tree Title";
_cardtext = "Oak tree with leaves";
_imageurl = "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"

public IActionResult Test(string _cardtitle, string _cardtext)
{

    ViewBag.CardTitle = _cardtitle;
    ViewBag.CardText = _cardtext;
    ViewBag.ImageURL= _imageurl;
    return View();
}

Test.cshtml 

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src=@ViewBag.ImageURL alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">@ViewBag.CardTitle</h5>
        <p class="card-text">@ViewBag.CardText</p>
    </div>
</div>

Желаемый формат: 

<div class="demo-section k-content wide">
    @(Html.SharedComponentTest().Card()
        .ImageURL("https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60)
        .Title("Green Tree Title")
        .Description("Oak tree with leaves");

enter image description here

Другие ресурсы: https://getbootstrap.com/docs/4.0/components/card/

1 Ответ

1 голос
/ 25 июня 2019

Это должно работать,

Просмотр: 

@Html.Raw(@SharedCustomComponents.CardComponent("Tree", "Oak Tree with leaves", "https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"))

Компонент: 

public static class SharedCustomComponents
{
    public static string CardComponent(string HeaderTitle, string TextDescription, string LocationURL)
    {
        string CardHtmlString = 
            @"<div class=""card"" style=""width: 18rem;"" >
                <img class=""card-img-top"" src =""" + LocationURL + @""" alt =""Card image cap"" >
                <div class=""card-body"">
                    <h5 class=""card-title"">" + HeaderTitle + @"</h5>
                    <p class=""card-text"">" + TextDescription + @"</p>
                </div>
             </div>";
        return CardHtmlString;
    }
}
...