介紹

在之前的內(nèi)容中，我們談到了Tag Helpers，我們還談到了 caching Tag Helpers和form Tag Helpers。

通過(guò)創(chuàng)建自定義Tag Helpers，我們可以擴(kuò)展現(xiàn)有元素或創(chuàng)建我們自己的元素。

Tag Helper是實(shí)現(xiàn)ITagHelper接口類的統(tǒng)稱。MVC為我們提供了該接口的抽象類TagHelper，它位于 Microsoft.AspNetCore.Razor.Runtime 程序集中。因此，我們可以直接從TagHelper類繼承，我們主要需要實(shí)現(xiàn)以下方法：

    public virtual void Process(TagHelperContext context, TagHelperOutput output);

    public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output);

Process方法是具體的邏輯實(shí)現(xiàn)。它需要傳遞 Tag Helper上下文的實(shí)例和Tag Helper輸出（我們可以用它來(lái)讀取和更改Tag Helper范圍內(nèi)的實(shí)際內(nèi)容）。

簡(jiǎn)單示例

我們創(chuàng)建自己的Tag Helper。假設(shè)我們將使用<simple> </simple>Tag Helper，其中的內(nèi)容將是粗體。

我們將要?jiǎng)?chuàng)建一個(gè)名為CustomTagHelpers的新項(xiàng)目。因此，程序集名稱也將是 CustomTagHelpers。

首先，我們創(chuàng)建一個(gè)新的Tag Helper。使用Visual Studio，我們可以這樣操作添加 - > 新建項(xiàng) - > Web - > Razor 標(biāo)記幫助器。

這是默認(rèn)生成的代碼：

    public class SimpleTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
        }
    }

我們需要做的是將輸出標(biāo)簽名稱設(shè)置為 strong：

    public class SimpleTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "strong";          
        }
    }

為了能夠在我們的視圖中使用新創(chuàng)建的Tag Helper，我們必須在 ViewImports.cshtml 文件中添加下面這一行：

    @addTagHelper *, CustomTagHelpers

在_  @addTagHelper _ 指令后可以注意到兩個(gè)字符串：

• 它的第二部分 - CustomTagHelpers 表示從哪個(gè)程序集名稱里加載Tag Helper；
• 第一個(gè)字符串在_  @addTagHelper _指令之后表示要加載的TagHelper的名稱，通配符（*）表示我們將使用給定程序集中所有Tag Helper。

如果我們現(xiàn)在轉(zhuǎn)到其中一個(gè)頁(yè)面并寫(xiě)入如下代碼：

    <simple>CodingBlast</simple>

我們將在Visual Studio中看到這個(gè)**simple **的標(biāo)簽已經(jīng)變成紫色，并且被識(shí)別為T(mén)ag Helper。如果我們運(yùn)行應(yīng)用程序，我們將以粗體顯示此文本。

如果我們查看HTML輸出，我們可以看到simple 標(biāo)簽被strong所替代：

    <strong>CodingBlast</strong>

改變屬性

我們來(lái)構(gòu)建另外一個(gè)Tag Helper，作為img標(biāo)簽的另一種方式。我們將添加一個(gè)名稱是CuteTagHelper的新的Tag Helper。

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace CustomTagHelpers.TagHelpers
{
    [HtmlTargetElement("cute")]
    public class CuteTagHelper : TagHelper
    {
        public string ImageLink { get; set; }
        public string AlternativeText { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "img";
            output.TagMode = TagMode.StartTagOnly;
            output.Attributes.SetAttribute("src", ImageLink);
            output.Attributes.SetAttribute("alt", AlternativeText);
        }
    }

如果我現(xiàn)在轉(zhuǎn)到_.cshtml_文件并開(kāi)始輸入：

你可以看到 **cute ** 的是紫色的，說(shuō)明Visual Studio認(rèn)為它是一個(gè)Tag Helper。此外，它為我們?cè)?code>CuteTagHelper類中指定的兩個(gè)屬性提供了智能提示。

我們?cè)赥agHelper類中指定的任何公共屬性將在 .cshtml 文件中顯示為一個(gè)屬性。

總結(jié)

• 使用Tag Helper，我們可以使用屬性擴(kuò)展現(xiàn)有元素或創(chuàng)建新元素
• 一旦我們創(chuàng)建了一個(gè)Tag Helper，我們通常會(huì)有一個(gè)可重用的屬性或元素
• MVC附帶的TagHelper類提供了編寫(xiě)Tag Helpers的方法和屬性
• Tag Helpers使用命名約定（就像MVC中的控制器一樣），所以如果使用類名稱CoolTagHelper，您將能夠在代碼中使用<cool>標(biāo)簽

到此這篇關(guān)于ASP.NET Core MVC自定義Tag Helpers的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論