将 HTML 传递给自定义标签助手

Question

我有一个 MVC 标签助手，它呈现 link 和一些 HTML。例如，HTML 可以是一个图标，或者 HTML 的另一个块。我在将其转换为 Core 时遇到问题。在 MVC 中我使用了（简化）：

    @RenderTile(Url.Action("SomeAction", "Account"), @<span><i class="fa fa-user"></i> Users</span>)

然后助手渲染作为参数传递的 HTML。 Core 中似乎缺少 HelperResult class。有替代方案吗？

@helper RenderTile(string url, Func<dynamic, HelperResult> text)
{
    <div class="col-xs-6 col-md-3">
        <a class="tile-link" href="@url" @(newWindow?"target=blank":string.Empty)>
            <div class="text-info tile" style="background: @backgroundColor">

                <div class="row margin-top-20">
                    <div class="col-xs-12 text-center">
                        <div class="tile-text">
                            @text(null)
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
}

Answer 1

为了达到您的要求，您可以参考以下代码片段编写标签助手。

public class RenderTile: TagHelper
{
    public string Url { get; set; }
    public bool NewWindow { get; set; }
    public string BackgroundColor { get; set; }
    public string text { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";    

        output.Attributes.SetAttribute("class", "tile-link");

        if (NewWindow)
        {
            output.Attributes.SetAttribute("target", "_blank");
        }

        output.Attributes.SetAttribute("href", Url);

        output.Content.AppendHtml($@"<div class=""text-info tile"" style=""background: {BackgroundColor}""><div class=""row margin-top-20""><div class=""col-xs-12 text-center""> <div class=""tile-text"">{text}</div></div></div></div>");           
    }
}

在查看页面

<div class="col-xs-6 col-md-3">
    <render-tile Url="@Url.Action("Privacy", "Home")" new-window="true" background-color="red" 
                 text="<span><i class='fa fa-user'></i>Users</span>">
    </render-tile>
</div>

测试结果

将 HTML 传递给自定义标签助手

Passing HTML to Custom Tag Helper

asp.net

asp.net-core

asp.net-core-3.1