MVC6 TagHelpers一次性使用

Question

在较旧的MVC HTML Helpers中,可以使用IDisposable包装内容 - 例如,BeginForm帮助程序将*stuff*使用结束form标记自动换行

<% using (Html.BeginForm()) {%>
   *stuff*
<% } %> 

MVC6 TagHelpers是否支持这种内容包装？例如,我想这样

<widget-box title="My Title">Yay for content!</widget-box>

要扩展为包装div的bootstrap小部件框:

<div class="widget-box">
    <div class="widget-header">
        <h4 class="widget-title">My Title</h4>
    </div>
    <div class="widget-body">
        <div class="widget-main">
            Yay for content!
        </div>
    </div>
</div>

TagHelpers可以实现吗？

解决方案:我已经将@DanielJG的答案添加到github上的一个工作演示中,该演示使用了WidgetBoxTagHelper.cs(在我的生产应用程序中使用lib时将与Beta/RC/RTM保持同步)

Answer 1

标签佣工实现接口ITagHelper(通过如指出@NTaylorMullen,该TagHelper班是实现它的时候,你可以只使用一个方便的类),它迫使你使用的方法Process和ProcessAsync,所以你不能依靠在添加内容Dispose的方法.

但是,您可以完全控制输出内容,以便根据需要替换/修改它.例如,快速逼近窗口小部件标记帮助程序(使用框架的1.0版本):

[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml.Append(this.Title);
        output.PreContent.SetHtmlContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await output.GetChildContentAsync();
        body.InnerHtml.Append(originalContents.GetContent());
        output.Content.SetHtmlContent(body);
    }
}

在你的剃刀你将有:

<widget-box title="My Title">Yay for content!</widget-box>

哪个将呈现为:

<div class="widget-box">
    <div class="widget-header">My Title</div>
    <div class="widget-body">Yay for content!</div>
</div>

不要忘记通过向_ViewImports.cshtml文件添加@addTagHelper指令来在程序集中注册标记帮助程序.例如,这将在我的应用程序中注册所有帮助程序:

@addTagHelper *, WebApplication2

旧的beta7代码

• 在beta7中你必须使用该[TargetElement]属性.
• TagBuilder类有一个SetInnerText方法可用于将其上下文设置为文本.

代码看起来像:

[TargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
    private IHtmlEncoder encoder;
    public WidgetTagHelper(IHtmlEncoder encoder)
    {
        this.encoder = encoder;
    }

    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.SetInnerText(this.Title);
        output.PreContent.SetContent(header);

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await context.GetChildContentAsync();           
        using (var writer = new StringWriter())
        {
            body.TagRenderMode = TagRenderMode.StartTag;
            body.WriteTo(writer, encoder);
            originalContents.WriteTo(writer, encoder);
            body.TagRenderMode = TagRenderMode.EndTag;
            body.WriteTo(writer, encoder);
            output.Content.SetContent(writer.ToString());
        }                            
    }
}

旧的beta5代码

• InnerHtml标签助手中有一个属性.
• ToHtmlString标记助手中有一个方法用于将它们呈现为html.

代码看起来像:

[TargetElement("widget-box")]
public class WidgetTagHelper: TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var outerTag = new TagBuilder("div");
        outerTag.Attributes.Add("class", output.TagName);
        output.MergeAttributes(outerTag);
        output.TagName = outerTag.TagName;

        //Create the header
        var header = new TagBuilder("div");
        header.Attributes.Add("class", "widget-header");
        header.InnerHtml = this.Title;
        output.PreContent.SetContent(header.ToHtmlString(TagRenderMode.Normal).ToString());

        //Create the body and replace original tag helper content
        var body = new TagBuilder("div");
        body.Attributes.Add("class", "widget-body");
        var originalContents = await context.GetChildContentAsync();
        body.InnerHtml = originalContents.GetContent();
        output.Content.SetContent(body.ToHtmlString(TagRenderMode.Normal).ToString());
    }
}