谈谈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> tagoutput.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效果，但是有点弄巧成拙的感觉，就不介绍了。