Tag Helpers
- Tag Helpers 是服务器端的 C# 代码，它在 Razor 文件里，它会参与到创建和渲染 HTML 元素过程中
- 和 HTML Helpers 类似
- 跟 HTML 的命名规范一致
- 内置了很多 Tag Helpers，也可以自定义
JavaScript Tag Helpers
- asp-src-include
- asp-src-exclude
- asp-fallback-src：指定回落文件
- asp-fallback-test：回落测试
<script asp-src-include="~/app/**/*.js" asp-src-exclude="~/app/services/**/*.js"> </script>
测试默认 js 里面有没有 window.jQuery 对象，如果没有就使用回落源。
<script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js" asp-fallback-src="-/lib/bootstrap/js/bootstrap.min.js" asp-fallback-test="window.jQuery"> </script>
CSS Tag Helpers
回落测试：CDN 的 CSS 中是否有 hidden class，hidden class 中是否有 visibility property，且其值为 hidden。
<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"/>
其它 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 生成了图片文件的 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>
自定义 Tag Helpers
- 继承 TagHelper 父类
- 实现（override）Process 方法
- 或实现异步的 ProcessAsync 方法
记得需在 _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); } }
使用和效果：
<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>
BoldTagHelper：
[HtmlTargetElement("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 属性
Model 类 MyStyle ：
namespace Heavy.Web.TagHelpers.Models { public class MyStyle { public string Color { get; set; } public int FontSize { get; set; } public string FontFamily { get; set; } } }
使用了 MyStyle 属性的 BlodTagHelper：
[HtmlTargetElement("bold")] [HtmlTargetElement(Attributes = "bold")] public class BoldTagHelper : TagHelper { [HtmlAttributeName("my-style")] public MyStyle MyStyle { 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: {MyStyle.Color}; font-size: {MyStyle.FontSize}; font-family: {MyStyle.FontFamily};"); } }
使用：
<p bold my-style="@(new MyStyle { Color = "red", FontSize = 30, FontFamily = "SimHei" })">应该是粗体字。</p>
<p style="color: red; font-size: 30; font-family: SimHei;"><strong>应该是粗体字。</strong></p>
注：更多关于自定义 Tag Helpers 的知识请参考 Docs。