這啥？

Tag Helpers 可以讓後端程式碼介入 Razor 產生 HTML 的過程中。例如 ImageTagHelper 可以幫圖片路徑加上版本編號，圖片修改後就會產生一個新的版本，以保證客戶端不會用到瀏覽器快取的圖片。使用 Tag Helpers 時，大部分都看起來像是 HTML。熟悉前端相關技術的開發人員不用再額外學太多 Razor 語法。大部分原生的 HTML 標籤都有提供框架內建的 Tag Helpers

管理 Tag Helpers 範圍

可以透過 @addTagHelper、@removeTagHelper 和 ! 來管理 Razor View 中所使用的 Tag Helpers。

在 ~/Views/_ViewImports.cshtml 中加入下列程式碼，可以讓 Tag Helpers 在所有的 View 中都可以被使用。@addTagHelper 需要兩個參數，, 後為 Tag Helpers 的來源組件 (assembly)名稱，, 前則為此組件下要被加入的標籤名稱，* 代表加入全部。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

下列程式碼則是可以刪除 Tag Helpers，跟 @addTagHelper 一樣有兩個參數，意思也一樣：

@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.ImageTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

! 則是可以跳脫單一標籤，使其不使用 Tag Helpers。標籤開頭跟結尾都要記得要有 !。

<!span asp-validation-for="Email" class="text-danger"></!span>

或者也可以使用 @tagHelperPrefix 來限制只有特定前置詞的標籤才會使用 Tag Helpers，例如將下列程式碼新增到 ~/Views/_ViewImports.cshtml 之後：

@tagHelperPrefix ironman:

Razor 中就只有以 ironman: 開頭的標籤才會使用 TagHelpers。

<ironman:partial name="_ItemPartial" model="item"/>
<img src="~/images/banner1.svg" /> <!-- 這個就是單純的 HTML -->

自己建立 Tag Helpers

實作 ITagHelper 的類別都可以是 Tag Helper，但一般會繼承 TagHelper 類別，以便使用 Process 方法。

這邊舉個例子，用 Tag Helper 來輸出範本的 footer 中的版權宣告。原本 HTML 是這樣：

<footer>
    <p>&copy; 2018 - ironman2018</p>
</footer>

預計可以改成這樣：

<footer>
    <copyright project-name="ironman2018"></copyright>
</footer>

首先建立一個 CopyrightTagHelper 類別，TagHelper 前即為標籤名稱，在 Razor 中使用時會轉換成 kebab case。

public class CopyrightTagHelper : TagHelper
{
    public string ProjectName { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "p";

        output.Attributes.Add("style", "color: red");
        output.Content.SetHtmlContent($"© {DateTime.Now.Year} - {ProjectName}");
    }
}

output.TagName = "p"; 是設定輸出的標籤名稱。

output.Attributes.Add(key, value) 是為輸出的標籤設定屬性。

output.Content.SetContent(content) 則是設定輸出標籤的文字內容，會轉換 HTML entities，所以範例中使用 SetHtmlContent 來正確輸出 ©。

建立類別後要將組件中的 Tag Helper 加進 Razor 中使用，需要在 ~/Views/_ViewImports.cshtml 中加入這行，意思是加入 ironman2018 組件中所有的 Tag Helper：

@addTagHelper *, ironman2018

參考資料

• Tag Helpers in ASP.NET Core
• Author Tag Helpers in ASP.NET Core

其實這功能滿好玩的XD 要寫客製化標籤輸出的方式比以前 HtmlHelpers 方便不少，今天就先介紹到這啦~