自关闭 TagHelper 合并兄弟元素的 html 标记答案

【问题标题】：Self-closing TagHelper merges html markup of sibling element自关闭 TagHelper 合并兄弟元素的 html 标记
【发布时间】：2016-07-11 10:51:36
【问题描述】：

我对在 ASP.NET Core MVC 中引入的 TagHelper 的行为有点困惑。按照本教程A working email Tag Helper，我们有机会编写自闭合标签。根据这篇文章，我们应该使用 attbute HtmlTargetElement。下面以类为例进行演示：

 [HtmlTargetElement("email", TagStructure = TagStructure.WithoutEndTag)]
public class EmailTagHelper : TagHelper
{
    private const string EmailDomain = "contoso.com";
    public string MailTo { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";
        var address = MailTo + "@" + EmailDomain;
        output.Attributes.SetAttribute("href", "mailto:" + address);
        output.Content.SetContent(address);
    }
}

razor 视图中的标记如下：

<strong>Support:</strong>
    <email mail-to="Support"/><br />
<strong>Marketing:</strong>
    <email mail-to="Marketing"/>

但我有意外的输出：

<strong>Support:</strong>
<a href="mailto:Support@contoso.com">
    <span>Another content</span>
    <strong>Marketing:</strong>
</a>
<a href="mailto:Marketing@contoso.com"></a>

为什么第一个锚标签包含<span>和<strong>标签内容？
在剃刀视图中没有HtmlTargetElement 属性和结束标签</email> 我有正确的行为。

【问题讨论】：

标签： html razor asp.net-core-mvc tag-helpers

【解决方案1】：

我运行了同样的例子并且能够产生同样的问题。调试时，我注意到输出的 TagMode 默认设置为 SelfClosing。这对锚标记无效。然后我将锚点的标记模式设置为 StartTagAndEndTag，并按预期生成了输出。

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

    // ADD THIS LINE TO YOUR CODE
    output.TagMode = TagMode.StartTagAndEndTag;

    var address = MailTo + "@" + EmailDomain;
    output.Attributes.SetAttribute("href", "mailto:" + address);
    output.Content.SetContent(address);
}

这把剃须刀：

<strong>Support:</strong><email mail-to="Support" /><br />
<strong>Marketing:</strong><email mail-to="Marketing" />

产生了这个输出：

<strong>Support:</strong><a href="mailto:Support@contoso.com">Support@contoso.com</a><br />
<strong>Marketing:</strong><a href="mailto:Marketing@contoso.com">Marketing@contoso.com</a>

【讨论】：