ASP.NET Core Html Helper 使用 TagBuilder 呈现原始文本而不是格式化的 HTML答案

【问题标题】：ASP.NET Core Html Helper rendering raw text instead of formatted HTML using TagBuilderASP.NET Core Html Helper 使用 TagBuilder 呈现原始文本而不是格式化的 HTML
【发布时间】：2018-10-03 21:01:59
【问题描述】：

我正在开发一个 Html Helper 来创建一个包含多个元素的控件，使用 TagBuilders 构建。控件本身将使用包含所有子元素的div 的TagBuilder 呈现。

据此：https://developercommunity.visualstudio.com/content/problem/17287/tagbuilder-tostring-returns-the-type-of-tagbuilder.html

我实现了一个Render() 方法来创建控件并将其作为string 返回：

public class MyCustomControl
{
    public override string ToString()
    {
        return Render();
    }

    private string Render()
    {
        TagBuilder mainContainer = new TagBuilder("div");

        // Generate child elements and append to mainContainer...

        using (StringWriter writer = new StringWriter())
        {
            mainContainer.WriteTo(writer, HtmlEncoder.Default);

            return writer.ToString();
        }
    }
}

并制作了一个扩展方法来在 Razor 视图中调用它：

public static MyCustomControl(this IHtmlHelper html)
{
    return new MyCustomControl();
}

并将其包含在这样的视图中：

@(Html.MyCustomControl()
)

问题不是被渲染为 html，而是将原始 html 文本输出到视图，所以我实际上看到了：

<div><!-- all child controls html here --></div>

而不是那里有一个元素。

【问题讨论】：

你的描述正好相反；您正在输出 HTML 编码的文本，以便您在页面上看到看起来像 HTML 的内容。在这种情况下，您想要输出原始 HTML，因此请删除编码。
TagBuilder.WriteTo 需要 HtmlEncoder 和 Default 是唯一可用的实现。

标签： c# razor asp.net-core

【解决方案1】：

您需要返回IHtmlContent 的实例而不是string：

public static class HtmlHelperExtension {
    public static IHtmlContent MyCustomControl(this IHtmlHelper html)
    {
        var result = new MyCustomControl();
        return html.Raw(result.Render());
    }
}

测试用例：

public class MyCustomControl
{
    public override string ToString()
    {
        return Render();
    }

    public string Render()
    {
        TagBuilder mainContainer = new TagBuilder("div");
        mainContainer.Attributes.Add(new KeyValuePair<string, string>("data-id","123") );

        // Generate child elements and append to mainContainer...

        using (StringWriter writer = new StringWriter())
        {
            mainContainer.WriteTo(writer, HtmlEncoder.Default);

            var result=writer.ToString();
            return result;
        }
    }

结果将是：

<div data-id="123"></div>

【讨论】：

【解决方案2】：

我认为更好的方法是在您的自定义控件中实现 IHtmlContent，如下所示：

public class MyCustomControl : IHtmlContent
{
    public void WriteTo(TextWriter writer, HtmlEncoder encoder)
    {
        TagBuilder mainContainer = new TagBuilder("div");

        // Generate child elements and append to mainContainer...

        mainContainer.WriteTo(writer, encoder);
    }
}

那么您的 HtmlHelper 扩展并不会发生太大变化：

public static IHtmlContent MyCustomControl(this IHtmlHelper html)
{
    return new MyCustomControl();
}

这应该消除在接受的答案中创建的临时字符串。

【讨论】：