1.什么是標(biāo)簽助手 Tag Helper

標(biāo)簽助手是服務(wù)端代碼能夠參與在 Razor 文件中創(chuàng)建和呈現(xiàn)HTML元素。例如，內(nèi)置的 ImageTagHelper 可以將版本號(hào)追加到圖像名稱。無論何時(shí)更改圖像，服務(wù)器都會(huì)為圖像生成新的唯一版本，因此可以保證客戶端獲取當(dāng)前圖像（而不是過時(shí)的緩存圖像）。內(nèi)置的標(biāo)簽助手多用于常見任務(wù)，例如創(chuàng)建表單，鏈接和加載資源等。標(biāo)簽助手是在 C# 中定義的，它們基于元素名稱，屬性名稱或父標(biāo)簽來定位HTML元素。例如，當(dāng)應(yīng)用 LabelTagHelper 特性時(shí)，內(nèi)置的 LabelTagHelper  可以減少 Razor 視圖中 HTML和 C# 之間的顯示轉(zhuǎn)換。

標(biāo)簽助手與HTML助手的差異：

* 標(biāo)簽助手提供了一HTML友好的開發(fā)體驗(yàn)

在大多數(shù)情況下，使用標(biāo)簽助手的 Razor 標(biāo)記看起來像標(biāo)準(zhǔn)的 HTML。如果熟悉 HTML/CSS/Javascript的話，可以直接編輯 Razor，不需要學(xué)習(xí)C#語法。

* 豐富的IntelliSence 環(huán)境，用于創(chuàng)建 HTML 和 Razor 標(biāo)記

HTML Helper 是此前在 Razor 視圖中服務(wù)器端創(chuàng)建標(biāo)記的方法。IntelliSense 支持 Tag HelpersIntelliSense 解釋環(huán)境。即使有 Razor C# 語法經(jīng)驗(yàn)的開發(fā)人員使用 Tag Helpers ，也比使用 C# Razor 標(biāo)記更有效率。

還有一種更有效率的方法，并且能夠使用盡在服務(wù)器上提供的信息生成更強(qiáng)大，可靠和可維護(hù)的代碼。例如，以前更新圖像的時(shí)候?qū)嵲诟膱D象時(shí)更改圖像名稱。出于性能原因，應(yīng)該清除緩存，除非更改圖像名。內(nèi)置的 ImageTagHelper 可以自動(dòng)更改圖像名稱， ImageTagHelper 可將版本號(hào)追加到圖像名稱，因此每當(dāng)更改圖像時(shí)，服務(wù)器會(huì)自動(dòng)為圖像生成一個(gè)新的唯一的版本。保證客戶端可以獲取到當(dāng)前圖像。

大多數(shù)內(nèi)置的標(biāo)簽助手均指向現(xiàn)有的 HTML 元素，并為元素提供服務(wù)端屬性。例如，Views/Account 文件夾中許多使用的<input>元素包含 asp-for 屬性，它將指定的模型屬性的名稱提取到呈現(xiàn)的 HTML 中。asp-for 屬性有2 LabelTagHelper 中的 For 屬性提供。

*管理標(biāo)簽助手范圍

 標(biāo)簽助手范圍由 @addTagHelper, @removeTagHelper 和 “！” 為推出字符串的組合控制。

@addTagHelper 使標(biāo)簽助手可用。默認(rèn) _ViewImports.cshtml 文件：

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"

上面的代碼使用通配符語法（“ * ”）來指定程序集中的所有標(biāo)簽助手將可用于Views目錄或子目錄中的每個(gè)視圖文件。@addTagHelper 之后的第一個(gè)參數(shù)指定要裝載的標(biāo)簽助手，第二個(gè)參數(shù) “Microsoft.AspNetCore.Mvc.TagHelpers” 指定包含標(biāo)簽助手的程序集。 Microsoft.AspNetCore.Mvc.TagHelpers 是內(nèi)置的 ASP.NET Core 標(biāo)簽助手的程序集。

如果你的項(xiàng)目包含具有默認(rèn)命名空間（AuthoringTagHelpers.TagHelpers.EmailTagHelper）的 EmailTagHelper，則可以提供標(biāo)簽助手的完全限定名（FQN）：

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper  “AuthoringTagHelpers.TagHelpers.EmailTagHelper，AuthoringTagHelpers”

 要想使用 FQN 向視圖添加標(biāo)簽助手，請(qǐng)先添加 FQN （AuthoringTagHelpers.TagHelpers.EmailTagHelper），然后再添加程序集名稱（AuthoringTagHelpers）。大多數(shù)開發(fā)人員喜歡使用 “*” 通配符語法。通配符語法允許在 FQN 中插入通配符 “*” 作為后綴。例如：

@addTagHelper  “AuthoringTagHelpers.TagHelpers.E *，AuthoringTagHelpers”
@addTagHelper  “AuthoringTagHelpers.TagHelpers.Email *，AuthoringTagHelpers”

如果希望選擇啟用將標(biāo)簽助手僅顯示給那些視圖，則可以再特定視圖中使用 @addTagHelper 指令。

* @removeTagHelper 刪除標(biāo)簽助手

@removeTagHelper 具有與 @addTagHelper 相同的兩個(gè)參數(shù)，它會(huì)刪除之前添加的標(biāo)簽助手。例如，應(yīng)用于特定視圖的 @removeTagHelper 從視圖中刪除指定的標(biāo)簽助手。在Views/Floder/_ViewImports.cshtml 文件中使用  @removeTagHelper 從Floder 的所有視圖中刪除指定的標(biāo)簽助手。

*使用 _ViewImports.cshtml  文件控制標(biāo)簽助手范圍

你可以將 ViewImports.cshtml  添加到任何視圖文件夾，并且駛?cè)胍鎸碜?nbsp;ViewImports.cshtml  文件的指令添加到 Views/ViewImports.cshtml 文件包含的指令中。如果為 Home 視圖添加一個(gè)空的 ViewImports.cshtml  文件，則不會(huì)有任何改變，因?yàn)?nbsp;ViewImports.cshtml  文件是疊加的。任何添加到 Views/Home/ViewImports.cshtml 文件的 @addTagHelper 指令都會(huì)使用這些標(biāo)簽助手僅顯示在Home 文件夾中。

*選擇退出個(gè)別元素

你可以使用標(biāo)簽助手退出符（“ ！ ”）在元素級(jí)別停用標(biāo)簽助手。例如，使用標(biāo)簽助手退出符在<span>中禁用郵件驗(yàn)證：

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

必須將標(biāo)簽助手退出符應(yīng)用于開始和結(jié)束標(biāo)記。添加標(biāo)簽助手退出符后，元素和標(biāo)簽助手屬性不再以特殊字體顯示。

2.使用 @tagHelperPrefix 使標(biāo)簽助手顯示使用

@tagHelperPrefix 指令允許你指定標(biāo)簽前綴字符串以啟用標(biāo)簽助手支持，并使標(biāo)簽助手顯示使用。例如下面代碼，標(biāo)簽助手前綴設(shè)置為 th: ，因此只使用前綴為 th: support Tag Helper （啟用標(biāo)簽助手的元素特殊字體）的元素。<label>和<input> 元素有標(biāo)簽助手前綴，并且啟用了標(biāo)簽助手，而<sapn> 元素不啟用：

<div class="form-group">
                <th:label asp-for="Id" class="control-label"></th:label>
                <th:input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>

適用于 @addTagHelper 的相同層次結(jié)構(gòu)規(guī)則也是用于 @tagHelperPrefix。

當(dāng)在 VS 中創(chuàng)建一個(gè) web 應(yīng)用時(shí)，在 project.json 文件中添加 “Microsoft.AspNetCore.Razor.Tool”，這就是添加 Tag Helper 工具的包。

在 VS 編輯器中一輸入 <l ，智能感知就會(huì)顯示匹配的元素。智能感知語句允許用 Tab 鍵來輸入所選值的語句。

你可以在屬性值里面（雙引號(hào)里）輸入VS的CompleteWord快捷鍵（默認(rèn)是Ctrl+空格），現(xiàn)在在C#中，就像一個(gè)C#類。智能感知顯示頁面模型的所有方法和屬性，也可以幫助選擇CSS類。

3.標(biāo)簽助手 Tag Helpers 和 HTML Helpers 比較

 標(biāo)簽助手是附加到 Razor 視圖中的 HTML 元素，而 HTML 助手則是在 Razor 視圖中穿插的 HTML 的方法調(diào)用。下面的 Razor 標(biāo)記會(huì)創(chuàng)建一個(gè)帶 CSS 類 “caption” 的HTML標(biāo)簽：

@Html.Label("FirstName", "First Name:", new {@class="caption"})

@符號(hào)告訴Razor這是代碼的開始。接下來的兩個(gè)參數(shù)（“FirstName” 和 “First Name：”）是字符串，因此IntelliSence 不能幫助。最后一個(gè)參數(shù) new {@class="caption"} 是用于表示屬性的匿名對(duì)象。因?yàn)?class 是C#中的關(guān)鍵字，所以使用@符號(hào)強(qiáng)制C#將@class=解釋為符號(hào)。

使用LabelTagHelper，相同的標(biāo)記可以寫為：

<label asp-for="FirstName" class="caption"></label>

使用LabelTagHelper，只要在 VS 中輸入 <l ，智能感知就會(huì)顯示匹配的元素。

下面代碼是 VS2015 中 ASP.NET 4.5.x MVC 模板生成的  Razor  視圖表單部分：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>修改資料</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.Account)

        <div class="form-group">
            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" style="padding-top:7px">
                @Html.DisplayFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Account, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" style="padding-top:7px">
                @Html.DisplayFor(model => model.Account, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="保存" class="btn btn-default" />
            </div>
        </div>
    </div>
}

下面是 ASP.NET Core MVC 模板的標(biāo)簽助手表單部分代碼：

<div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>

4.標(biāo)簽助手和 WEB 服務(wù)器控件比較

Web 服務(wù)器控件在頁面上聲明和調(diào)用。標(biāo)簽助手不擁有與其關(guān)聯(lián)的元素，它們只是簡(jiǎn)單地參與元素和內(nèi)容的呈現(xiàn)。

Web 服務(wù)器控件有一個(gè)不同的生命周期，使其開發(fā)和調(diào)試變得困難。

Web 服務(wù)器控件允許通過使用客戶機(jī)空間向客戶端文檔對(duì)象模型（DOM）添加功能。標(biāo)簽助手沒有DOM。

Web 服務(wù)器控件包括自動(dòng)瀏覽器檢測(cè)，標(biāo)簽助手不能識(shí)別瀏覽器。

多個(gè)標(biāo)簽助手可以對(duì)同一元素執(zhí)行操作，但通常無法編寫 Web 服務(wù)器控件。

標(biāo)簽助手可以修改其范圍限定的HTML元素的標(biāo)記和內(nèi)容，但不直接修改頁面上的任何其他內(nèi)容。

Web 服務(wù)器控件使用類型轉(zhuǎn)換器將字符串轉(zhuǎn)為對(duì)象，有了標(biāo)簽助手，可以在C#中工作，不需要做類型轉(zhuǎn)換。

Web 服務(wù)器控件使用 System.ComponentModel 來實(shí)現(xiàn)組件和控件的運(yùn)行時(shí)和設(shè)計(jì)時(shí)行為。System.ComponentModel 包括用于實(shí)現(xiàn)屬性和類轉(zhuǎn)換器，綁定到數(shù)據(jù)源和許可組件的基類和接口。與標(biāo)簽助手相比，通常派生自 TagHelper，TagHelper基類僅公開 Process  和 ProcessAsync 兩個(gè)方法。

5.自定義標(biāo)簽助手

 1.編寫一個(gè) email 標(biāo)簽助手

標(biāo)簽助手是任何實(shí)現(xiàn)ITagHelper 接口的類。然而，編寫一個(gè)標(biāo)簽助手時(shí)，通常是從 TagHelper 類開始，這樣可以訪問 Process 方法。

首先創(chuàng)建一個(gè) TagHelpers 文件夾，添加一個(gè) EmailTagHelper 類：

public class EmailTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于將 <email> 替換為 <a>
        }
    }

注意：

* 標(biāo)簽助手使用以目標(biāo)元素名作為根類名（出去類名中的TagHelper部分）的命名約定，EmailTagHelper最終對(duì)應(yīng)的標(biāo)簽是 email 

* EmailTagHelper 類需派生自 TagHelper，重寫 Process 方法

* Process 或 ProcessAsync 的上下文參數(shù)包含了與當(dāng)前 HTML 標(biāo)簽執(zhí)行的相關(guān)信息，輸出參數(shù)包含了用來生成HTML標(biāo)簽和內(nèi)容的源代碼的靜態(tài)HTML元素呈現(xiàn)。

類名后綴不是必須為TagHelper，但是建議加上。

下面在項(xiàng)目中使用 email 標(biāo)簽助手。在 _ViewImports.cshtml ，使用 addTagHelper 添加  EmailTagHelper類：

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"

@addTagHelper 之后的第一個(gè)字符串指明要加載的標(biāo)簽助手，第二個(gè)字符串指明此標(biāo)簽助手所在的程序集，在 Views/Home/Contact.cshtml 文件中加入標(biāo)簽：

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

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

<address>
    <strong>Support:</strong> <email>Support</email><br />
    <strong>Marketing:</strong> <email>Marketing</email>
</address>

運(yùn)行程序并使用瀏覽器查看HTML代碼，可以看到 email 標(biāo)簽都被替換成鏈接標(biāo)簽。但是沒有一個(gè) href 屬性。

2.完善 email 標(biāo)簽助手

更新EmailTagHelper類：

public class EmailTagHelper:TagHelper
    {
        private const string EmailDomain = "contoso.com";
        public string MailTo { get; set; } //增加 nail-to 屬性，如 <email mail-to="..." />
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于將 <email> 替換為 <a>
            var address = MailTo + "@" + EmailDomain;
            output.Attributes.SetAttribute("href","mailto:"+address);
            output.Content.SetContent(address); //設(shè)置標(biāo)簽助手的內(nèi)容
        }
    }

更新Views/Home/Contact.cshtml  ，加上 mail-to 屬性：

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

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

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

以 Pascal  形式命名標(biāo)簽助手的類名及屬性名會(huì)被翻譯成它們的小寫 kebab 形式。因此使用 MailTo 屬性，與使用 <eamil mail-to="value" />。

3.異步標(biāo)簽助手

更新EmailTagHelper：

public class EmailTagHelper:TagHelper
    {
        private const string EmailDomain = "contoso.com";

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于將 <email> 替換為 <a>
            var content = await output.GetChildContentAsync();
            var target  = content.GetContent() + "@" + EmailDomain;
            output.Attributes.SetAttribute("href", "mailto:" + target);
            output.Content.SetContent(target);
        }
    }

Views/Home/Contact.cshtml ：

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

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

<address>
    <strong>Support:</strong> <email>Support</email><br />
    <strong>Marketing:</strong> <email>Marketing</email>
</address>

到此這篇關(guān)于ASP.NET Core MVC標(biāo)簽助手(TagHelper)用法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論