重学ASP.NET Core 中的标记帮助程序

通过 IntelliSense 语句完成功能，按 Tab 键即可用选择的值完成语句：

只要输入标记帮助程序属性，标记和属性字体就会更改。 如果使用默认的 Visual Studio“蓝色”或“浅色”颜色主题，则字体是粗体紫色。 如果使用“深色”主题，则字体为粗体青色。 本文档中的图像在使用默认主题时截取的。

可在双引号 ("") 内输入 Visual Studio CompleteWord 快捷方式（默认值为 Ctrl+空格键），即可使用 C#，就像在 C# 类中一样。IntelliSense 会显示页面模型上的所有方法和属性。 由于属性类型是 ModelExpression，所以这些方法和属性可用。 在下图中，我正在编辑 Register 视图，所以 RegisterViewModel 是可用的。

IntelliSense 会列出页面上模型可用的属性和方法。 丰富 IntelliSense 环境可帮助选择 CSS 类：

自定义标记帮助程序元素字体

可以从 "工具" "选项" "环境" " > Options > Environment > 字体和颜色" 中自定义字体和着色：

实例演示如何在ASP.NET Core中创建标记帮助程序

标记帮助程序是实现 ITagHelper 接口的任何类。 但是，在创作标记帮助程序时，通常从 TagHelper 派生，这样可以访问 Process 方法。

1. 创建一个名为 AuthoringTagHelpers 的新 ASP.NET Core 项目。注： 此项目不需要身份验证。
   
2. 创建一个名为“TagHelpers”的文件夹来保存标记帮助程序。注： TagHelpers 文件夹不是必需的，但它是合理的约定。

现在让我们开始编写一些简单的标记帮助程序。

EmailTagHelper 标记帮助程序

如果你正在编写博客引擎，并且需要它将营销、支持和其他联系人的电子邮件全部发送到同一个域，则可能需要这样的一个标记帮助程序。
如下所示，先上代码：

using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Threading.Tasks;

namespace AuthoringTagHelpers.TagHelpers
{
    public class EmailTagHelper : TagHelper
    {
        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";    // Replaces  with  tag
            var address = MailTo + "@" + EmailDomain;
        	output.Attributes.SetAttribute("href", "mailto:" + address);
        	output.Content.SetContent(address);
            return Task.CompletedTask;
        }
    }
}

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers
@{
    ViewData["Title"] = "Contact Copy";
}
@ViewData["Title"].
@ViewData["Message"]


    One Microsoft Way Copy Version 

    Redmond, WA 98052-6399

    P:
    425.555.0100



    Support:

    Marketing:

Support@contoso.com
Marketing@contoso.com

在标记帮助程序中使用实体模型

1. 添加“Models”文件夹**。
   
2. 将以下 WebsiteContext 类添加到“模型”文件夹：

using System;

namespace AuthoringTagHelpers.Models
{
    public class WebsiteContext
    {
        public Version Version { get; set; }
        public int CopyrightYear { get; set; }
        public bool Approved { get; set; }
        public int TagsToShow { get; set; }
    }
}

3. 将以下 WebsiteInformationTagHelper 类添加到“TagHelpers”文件夹。

using System;
using AuthoringTagHelpers.Models;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace AuthoringTagHelpers.TagHelpers
{
    public class WebsiteInformationTagHelper : TagHelper
    {
        public WebsiteContext Info { get; set; }

      public override void Process(TagHelperContext context, TagHelperOutput output)
      {
         output.TagName = "section";
         output.Content.SetHtmlContent(
$@"
Version: {Info.Version}
Copyright Year: {Info.CopyrightYear}
Approved: {Info.Approved}
Number of tags to show: {Info.TagsToShow}
");
         output.TagMode = TagMode.StartTagAndEndTag;
      }
   }
}

4. 将以下标记添加到 About.cshtml 视图**。 突出显示的标记显示 Web 站点信息。

@using AuthoringTagHelpers.Models
@{
    ViewData["Title"] = "About";
    WebsiteContext webContext = new WebsiteContext {
                                    Version = new Version(1, 3),
                                    CopyrightYear = 1638,
                                    Approved = true,
                                    TagsToShow = 131 };
}
@ViewData["Title"].
@ViewData["Message"]

Use this area to provide additional information.

 Is this bold?

 web site info 

说明：
在下面的Razor显示的标记中：
 
Razor知道 info 属性是一个类，而不是字符串，并且您想要编写 c # 代码。 编写任何非字符串标记帮助程序属性时，都不应使用 @ 字符。

5. 运行应用，并导航到“关于”视图即可查看 Web 站点信息。

总结

本文首先带着大家回顾了一下标记帮助程序的一些概念，接着给大家介绍了标记帮助程序作用域的注意事项来为接下来的实例演练做准备。然后给大家介绍了标记帮助程序强大的 Intellisense 支持，让我们在开发中事半功倍，如虎添翼！最后就是通过实例代码来做两个标记帮助程序的小例子加深我们的理解。希望对大家有所帮助！
接下来我会介绍下微软官方提供的一些常用标记帮助程序，有兴趣的朋友可以关注下。


参考文档：

1. https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-3.1
2. https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore-3.1