Question

我想创建一个Card Widget UI，当前使用的是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");

其他资源： https://getbootstrap.com/docs/4.0/components/card/

Answer 1

这应该有效，

查看：

@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;
    }
}

Net Core：为Bootstrap创建HTML TagHelper / Extension方法

1 个答案: