Visual

22 再讲 Tag Helpers.mp4 (66.54MB)

一句话的事儿

  • 让C#代码中灵活使用HTML语言
  • 自定义TagHelper

Tag Helpers

image.png

  • 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:回落测试

  • ~/app/*/.js包含这个文件下所有文件

  • ~/app/services/*/.js除了这个文件不包含
    1. <script asp-src-include="~/app/**/*.js"
    2. asp-src-exclude="~/app/services/**/*.js">
    3. </script>

测试默认 js 里面有没有 window.jQuery 对象,如果没有就使用回落源。

  1. <script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"
  2. asp-fallback-src="-/lib/bootstrap/js/bootstrap.min.js"
  3. asp-fallback-test="window.jQuery">
  4. </script>

CSS Tag Helpers

回落测试:CDN 的 CSS 中是否有 hidden class,hidden class 中是否有 visibility property,且其值为 hidden。

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

image.png

其它 Tag Helpers

  • asp-append-version
  • 22 再讲 Tag Helpers - 图4
  • 22 再讲 Tag Helpers - 图5

asp-append-version 生成了图片文件的 Hash 值,并附到图片链接后面。

环境的 Tag Helpers

  1. <environment names="Staging,Production">
  2. <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
  3. </environment>
  4. <environment include="Staging,Production">
  5. <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
  6. </environment>
  7. <environment exclude="Development">
  8. <strong>HostingEnvironment.EnvironmentName is not Development</strong>
  9. </environment>

自定义 Tag Helpers

  1. 继承 TagHelper 父类
  2. 实现(override)Process 方法
    1. 或实现异步的 ProcessAsync 方法

记得需在 _ViewImport 中注入 @addTagHelper *, Heavy.Web(自己的项目名) 。 —>注册,使其奏效

同步实现

  1. public class EmailTagHelper : TagHelper
  2. {
  3. public string MailTo { get; set; }
  4. public override void Process(
  5. TagHelperContext context,
  6. TagHelperOutput output) //output即将生成HTML代码
  7. {
  8. // Replaces <email> with <a> tag
  9. output.TagName = "a";
  10. output.Attributes.SetAttribute("href", $"mailto:{MailTo}");
  11. output.Content.SetContent(MailTo);
  12. }
  13. }

使用和效果:

  1. <email mail-to="Support@contoso.com"></email>
  2. <a href="mailto:Support@contoso.com">Support@contoso.com</a>

异步实现

  1. public override async Task ProcessAsync(
  2. TagHelperContext context,
  3. TagHelperOutput output)
  4. {
  5. output.TagName = "a";
  6. var content = await output.GetChildContentAsync();
  7. var target = content.GetContent();
  8. output.Attributes.SetAttribute("href", $"mailto:{target}");
  9. output.Content.SetContent(target);
  10. }

使用和效果:

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

作为元素级 & 作为属性

两种用法:

  1. <bold color="green">这个是粗体字吗?</bold>
  2. <p bold color="red">应该是粗体字。</p>

BoldTagHelper:

  1. [HtmlTargetElement("bold")] //说白了就是就是让Bold作为元素起作用
  2. [HtmlTargetElement(Attributes = "bold")] //说白了就是Bold作为属性的时候起作用<p bold color="red">应该是粗体字。</p>
  3. public class BoldTagHelper : TagHelper
  4. {
  5. [HtmlAttributeName("color")]
  6. public string MyColor { get; set; }
  7. public override void Process(TagHelperContext context, TagHelperOutput output)
  8. {
  9. output.Attributes.RemoveAll("bold");
  10. output.PreContent.SetHtmlContent("<strong>");
  11. output.PostContent.SetHtmlContent("</strong>");
  12. output.Attributes.SetAttribute("style", $"color:{MyColor};");
  13. }
  14. }

复杂的 Tag Helper 属性

Model 类 MyStyle :

  1. namespace Heavy.Web.TagHelpers.Models
  2. {
  3. public class MyStyle
  4. {
  5. public string Color { get; set; }
  6. public int FontSize { get; set; }
  7. public string FontFamily { get; set; }
  8. }
  9. }

使用了 MyStyle 属性的 BlodTagHelper:

  1. [HtmlTargetElement("bold")]
  2. [HtmlTargetElement(Attributes = "bold")]
  3. public class BoldTagHelper : TagHelper
  4. {
  5. [HtmlAttributeName("my-style")]
  6. public MyStyle MyStyle { get; set; }
  7. public override void Process(TagHelperContext context, TagHelperOutput output)
  8. {
  9. output.Attributes.RemoveAll("bold");
  10. output.PreContent.SetHtmlContent("<strong>");
  11. output.PostContent.SetHtmlContent("</strong>");
  12. output.Attributes
  13. .SetAttribute("style", $"color: {MyStyle.Color}; font-size: {MyStyle.FontSize}; font-family: {MyStyle.FontFamily};");
  14. }
  15. }

使用:

  1. <p bold my-style="@(new MyStyle
  2. {
  3. Color = "red",
  4. FontSize = 30,
  5. FontFamily = "SimHei"
  6. })">应该是粗体字。</p>

image.png
效果:

  1. <p style="color: red; font-size: 30; font-family: SimHei;"><strong>应该是粗体字。</strong></p>

注:更多关于自定义 Tag Helpers 的知识请参考 Docs