快捷導(dǎo)航

ASP.NET?Core?MVC中使用Tag?Helper組件

更新時(shí)間：2022年02月21日 16:25:07 作者：Sweet-Tang

這篇文章介紹了ASP.NET?Core?MVC中使用Tag?Helper組件的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Tag Helper 組件 - 簡(jiǎn)介

之前我們已經(jīng)在幾個(gè)文章中談到了Tag Helpers，這一次我們會(huì)討論其它有關(guān)的事情。

在 ASP.NET Core 2 還為我們帶來(lái)了一個(gè)新功能 - Tag Helper 組件。

Tag Helper 組件負(fù)責(zé)生成或修改特定的HTML，它們與 Tag Helper 一起工作。

Tag Helper 將會(huì)運(yùn)行您的 Tag Helper 組件。

Tag Helper 組件是動(dòng)態(tài)地向HTML中添加內(nèi)容最完美的選擇。

要使您的Tag Helper組件運(yùn)行，您需要設(shè)置一個(gè)特定的Tag Helper。這個(gè)Tag Helper需要從內(nèi)置的抽象類繼承 TagHelperComponentTagHelper。

我知道，我知道這個(gè)命名非常令人困惑。

繼承自 TagHelperComponentTagHelper 的類型將是一個(gè) Tag Helper，它將執(zhí)行與之匹配的 Tag Helper 組件。

步驟

我們首先創(chuàng)建一個(gè)新的 Tag Helper 組件。我們可以創(chuàng)建針對(duì)內(nèi)置 head 和 body 標(biāo)簽的 Tag Helper 組件；從特殊類 TagHelperComponentTagHelper 繼承的
Tag Helper，都可以創(chuàng)建 Tag Helper 組件。

我們來(lái)看一個(gè)例子。

我將從創(chuàng)建新的 Razor Pages 模板開(kāi)始：

    dotnet new razor

我們按如下步驟讓一個(gè) Tag Helper 組件正常工作：

創(chuàng)建一個(gè)新的 Tag Helper 組件
將組件注入到DI
創(chuàng)建一個(gè)繼承自TagHelperComponentTagHelper的 Tag Helper 類
將 Tag Helper 包含在_ViewImports.cshtml文件中

創(chuàng)建一個(gè)新的 Tag Helper 組件：

    public class ArticleTagHelperComponent : TagHelperComponent
    {
        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase))
            {
                output.PostContent.AppendHtml("<script>console.log('ASP.NET Core - Love From Console');</script>");
            }
            return Task.CompletedTask;
        }
    }

如果您使用過(guò) Tag Helper，那么您應(yīng)該很熟悉。在示例中，繼承自內(nèi)置的TagHelperComponent抽象類，然后重寫(xiě)ProcessAsync方法。

我們需要將 Tag Helper 組件成為我們應(yīng)用程序的一部分，將其注入到服務(wù)容器中：

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>();
        services.AddMvc();
    }

現(xiàn)在我們可以使用創(chuàng)建的 Tag Helper 組件！

創(chuàng)建Tag Helper：

    [HtmlTargetElement("article")]
    [EditorBrowsable(EditorBrowsableState.Never)]
    public class ArticleTagHelperComponentTagHelper : TagHelperComponentTagHelper
    {
        public CodingBlastTagHelper(ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory)
            : base(componentManager, loggerFactory)
        {
        }
    }

注意第一行，此 Tag Helper 助手的目標(biāo)是HTML中的所有 article 元素/標(biāo)記。

為了讓我們的應(yīng)用程序知道這個(gè)Tag Helper，我們必須將其添加到_ViewImports.cshtml文件中：

    @using IntroTagHelperComponent
    @namespace IntroTagHelperComponent.Pages
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper SampleTagHelperComponent.ArticleTagHelperComponentTagHelper, SampleTagHelperComponent

要看到實(shí)際的效果，我們需要在代碼中至少有一個(gè) article 標(biāo)簽，所以，我們修改Index.cshtml頁(yè)面：

@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
 
<div></div>
 
<article>
    TagHelperComponent will add stuff here.
</article>

針對(duì)內(nèi)置 Tag Helper 的 Tag Helper 組件

目前有兩個(gè)內(nèi)置的 Tag Helper 繼承自TagHelperComponentTagHelper類，它們位于 Microsoft.AspNetCore.Mvc.TagHelpers 程序集中。

這兩個(gè)標(biāo)簽助手是 HeadTagHelper 和 BodyTagHelper。它們使我們很容易將內(nèi)容注入 head 和 body 中。我們所要做的是創(chuàng)建 Tag Helper 組件并將其注入我們的應(yīng)用程序中。

// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
using System.ComponentModel;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.Extensions.Logging;
namespace Microsoft.AspNetCore.Mvc.Razor.TagHelpers
{
    /// <summary>
    /// A <see cref="TagHelperComponentTagHelper"/> targeting the &lt;head&gt; HTML element.
    /// </summary>
    [HtmlTargetElement("head")]
    [EditorBrowsable(EditorBrowsableState.Never)]
    public class HeadTagHelper : TagHelperComponentTagHelper
    {
        /// <summary>
        /// Creates a new <see cref="HeadTagHelper"/>.
        /// </summary>
        /// <param name="manager">The <see cref="ITagHelperComponentManager"/> which contains the collection
        /// of <see cref="ITagHelperComponent"/>s.</param>
        /// <param name="loggerFactory">The <see cref="ILoggerFactory"/>.</param>
        public HeadTagHelper(ITagHelperComponentManager manager, ILoggerFactory loggerFactory)
            : base(manager, loggerFactory)
        {
        }
    }
}

代碼非常簡(jiǎn)單，它從 TagHelperComponentTagHelper 類繼承，目標(biāo)是 head HTML元素。

如果您查看默認(rèn)的 _ViewImports.cshtml 文件內(nèi)容，您將看到在默認(rèn)情況下將包含這些內(nèi)容：

@using IntroTagHelperComponent
@namespace IntroTagHelperComponent.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

我們可以將內(nèi)置的 HeadTagHelper 使用我們的自定義 Tag Helper 組件來(lái)修改 head 標(biāo)簽：

我們添加一個(gè) Tag Helper 組件，它將檢查所有 head 標(biāo)簽：

public class HeadTagHelperComponent : TagHelperComponent
{
    public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        if (string.Equals(context.TagName, "head", StringComparison.OrdinalIgnoreCase))
        {
            output.PostContent.AppendHtml("<script>console.log('head tag');</script>");
        }
        return Task.CompletedTask;
    }
}

當(dāng)然，我們需要將添加的HeadTagHelperComponent注入到我們的應(yīng)用程序：

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddTransient<ITagHelperComponent, HeadTagHelperComponent>();
        services.AddMvc();
    }