Question

我有一个像我这样制作的标签助手：

public class GooglePlusOneTagHelper : TagHelper {
   [ViewContext]
    public ViewContext ViewContext { get; set; }
    public string Size { get; set; }
    public string Annotation { get; set; }

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

        var request = ViewContext.HttpContext.Request;
        var absoluteUri = string.Concat(
            request.Scheme,
            "://",
            request.Host.ToUriComponent(),
            request.PathBase.ToUriComponent(),
            request.Path.ToUriComponent(),
            request.QueryString.ToUriComponent());

        output.Attributes.SetAttribute("class", "g-plusone");

        string size = Size.ToLower().Trim() ?? "";
        if (size == "small" || size == "medium" || size == "tall")
            output.Attributes.SetAttribute("data-size", size);

        string annotation = Annotation.ToLower().Trim() ?? "";
        if (annotation == "none" || annotation == "inline")
            output.Attributes.SetAttribute("data-annotation", annotation);

        output.Attributes.SetAttribute("data-href", absoluteUri);
    }
}

当我把这段代码放在视图中时：

<google-plusone size="medium" annotation="bubble"  />

它在视图中呈现如下：

<google-plusone size="medium" annotation="bubble"  >

因此，标记帮助程序以某种方式不处理它，因为它必须真正输出DIV。此外，它将我的原始标签从自动关闭转换为打开并永不关闭的标签！

Answer 1

看起来Tag Helper无法正确呈现。以下是您可以验证的内容。

希望您在_ViewImports.cshtml文件中添加@addTagHelper *, <Your Assembly Name>。如果没有，你需要添加它。
在项目文件中包含Microsoft.AspNetCore.Mvc.TagHelpers的引用。
将[HtmlTargetElement("google-plusone")]属性添加到Tag Helper。

以下是我的HTML输出

<div class="g-plus" data-action="share" data-href="http://localhost:5000/"></div>

这是屏幕截图。

Answer 2

标记帮助器将标记助手的Pascal-cased C＃类名称和属性转换为较低的kebab案例。

因此，对于Razor中的GooglePlusOneTagHelper，您需要撰写<google-plus-one />，而不是<google-plusone />。

如果您想使用<google-plusone />，请按照@Anuraj的建议将[HtmlTargetElement("google-plusone")]属性添加到您的Tag Helper。

TagHelper在ASP.NET Core 1.1

2 个答案: