重學ASP.NET Core 中的標記幫助程式

輸入 <label 后，IntelliSense 會列出可用的 HTML/CSS 屬性和以標記幫助程式為目標的屬性：

通過 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 <email> with <a> tag
            var address = MailTo + "@" + EmailDomain;
        	output.Attributes.SetAttribute("href", "mailto:" + address);
        	output.Content.SetContent(address);
            return Task.CompletedTask;
        }
    }
}

說明：

1. 標記幫助程式使用面向根類名稱的元素的命名約定（減去類名稱的 TagHelper 部分）， 在此示例中， EmailTagHelper的根名稱為_email_，因此 <email> 標記將針對，
2. EmailTagHelper 類從 TagHelper 派生， TagHelper 類提供撰寫標記幫助程式的方法和屬性，
3. 重寫的 ProcessAsync 方法控制標記幫助程式在執行時的操作， TagHelper 類還提供具有相同引數的同步版本 (Process)，
4. 類名稱的后綴是 TagHelper，這不是必需的，但被認為是約定的最佳做法， 可將類宣告為：public class Email : TagHelper
5. 標記幫助程式采用 Pascal 大小寫格式的類和屬性名將轉換為各自相應的短橫線格式， 因此，要使用 MailTo 屬性，請使用 <email mail-to="value"/> 等效項，
6. 最后一行為EmailTagHelper標記幫助程式設定已完成的內容，
7. SetAttribute 是添加屬性的語法，只要屬性集合中當前不存在 href 屬性，該方法就適用于此屬性，

接下來然我們在Razor頁面上應用此標記幫助程式吧，
使用以下更改更新 Views/Home/Contact.cshtml 檔案中的標記:

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

<address>
    One Microsoft Way Copy Version <br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong><email mail-to="Support"></email><br />
    <strong>Marketing:</strong><email mail-to="Marketing"></email>
</address>

說明：

1. 開頭的 @addTagHelper 是添加對應的標記幫助程式參考，文章開頭已經進行了相關闡述
2. 第18，19行代碼標記參考了我們上面撰寫的 EmailTagHelper 標記幫助程式，
3. mail-to 屬性是標記幫助程式采用 Pascal 大小寫格式的類和屬性名將轉換為各自相應的短橫線格式， 因此，要使用 MailTo 屬性，必須使用 的等效項，

這時候運行下程式，可以看到生成對應的html標簽了：

<a href="mailto:[email protected]">[email protected]</a>
<a href="mailto:[email protected]">[email protected]</a>

在標記幫助程式中使用物體模型

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(
$@"<ul><li><strong>Version:</strong> {Info.Version}</li>
<li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
<li><strong>Approved:</strong> {Info.Approved}</li>
<li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");
         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 };
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p bold>Use this area to provide additional information.</p>

<bold> Is this bold?</bold>

<h3> web site info </h3>
<website-information info="webContext" />

說明：
在下面的Razor顯示的標記中：
<website-information info="webContext" />
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

標籤：.NET Core

上一篇：使用 nuget server 的 API 來實作搜索安裝 nuget 包

下一篇：ABP(ASP.NET Boilerplate Project)快速入門