谈谈ASP.NET CORE 中TagHelpers及其自定义TagHelpers

Tag Helpers
Tag Helpers 是服务器端的 C# 代码，它在 Razor 文件里，它会参与到创建和渲染 HTML 元素过程中
和 HTML Helpers 类似
跟 HTML 的命名规范一致
内置了很多 Tag Helpers，也可以自定义

大致有以下几类

JavaScript Tag Helpers
• asp-src-include 包含所有的js文件
• asp-src-exclude 去除某些js文件
• asp-fallback-src：指定回落文件
• asp-fallback-test：回落测试

具体使用看这个例子

<script asp-src-include="~/app/**/*.js"
        asp-src-exclude="~/app/services/**/*.js">
</script>

代码的功能就是引入除了app/services/下所有js文档

CSS Tag Helpers
看如下例子

<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.8.e/css/bootstrap.min.css"
      asp-fallback-href="/lib/bootstrap/css/bootstrap.min.css"
      asp-fallback-test-class="hidden"
      asp-fallback-test-property="visibility"
      asp-fallback-test-value="hidden"/>

回落测试：CDN（引入CDN有利于提高效率） 的 CSS 中是否有 hidden class，hidden class 中是否有 visibility property，且其值为 hidden

其它 Tag Helpers

 asp-append-version
<img src="~/images/asplogo.png" asp-append-version="true" />
<img src="/images/asplogo.png?v=KI_dqr9NVtnMdsM2MUg4qthUnWzm5T1fCEimBPWDNgM" />

asp-append-version=True时 生成了图片文件的 Hash 值，并附到图片链接后面

环境的 Tag Helpers

<environment names="Staging,Production">
  <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
</environment>
<environment include="Staging,Production">
    <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
</environment>
<environment exclude="Development">
    <strong>HostingEnvironment.EnvironmentName is not Development</strong>
</environment>

这里面include于name在功能上是一致的，当环境是Staging或者Production是就执行部分功能

自定义 Tag Helpers
三个注意事项：
（1）：要遵循HTMLHelper的命名规范
（2）：继承 TagHelper 父类
（3）：实现（override）Process 方法，或实现异步的 ProcessAsync 方法
（4）：要引入_ViewImport 中注入 形如@addTagHelper *, Heavy.Web 的项目，而不是他的命名空间

先来看具体例子：
同步实现

public class EmailTagHelper : TagHelper
{
    public string MailTo { get; set; }

    public override void Process(
        TagHelperContext context,
        TagHelperOutput output)
    {
        // Replaces <email> with <a> tag
        output.TagName = "a";
        output.Attributes.SetAttribute("href", $"mailto:{MailTo}");
        output.Content.SetContent(MailTo);
    }
}

实现的HTML功能就是

<email mail-to="Support@contoso.com"></email>

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

异步实现

public override async Task ProcessAsync(
    TagHelperContext context,
    TagHelperOutput output)
{
    output.TagName = "a";
    var content = await output.GetChildContentAsync();
    var target = content.GetContent();
    output.Attributes.SetAttribute("href", $"mailto:{target}");
    output.Content.SetContent(target);
}

实现的效果

<email>Support@contoso.com</email>

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

作为元素级 & 作为属性使用

<bold color="green">这个是粗体字吗？</bold>

<p bold color="red">应该是粗体字。</p>

实现的代码如下

//指定了名称为bold
[HtmlTargetElement("bold")]
//指定其作为属性名：bold
[HtmlTargetElement(Attributes = "bold")]
public class BoldTagHelper : TagHelper
{
    [HtmlAttributeName("color")]
    public string MyColor { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.RemoveAll("bold");
        output.PreContent.SetHtmlContent("<strong>");
        output.PostContent.SetHtmlContent("</strong>");
        output.Attributes.SetAttribute("style", $"color:{MyColor};");
    }
}

也可以用Tag Helper自定义CSS效果，但是有点弄巧成拙的感觉，就不介绍了。