ASP.NET Core MVC中使用Tag Helper元件

2022-02-21 19:00:49

Tag Helper 元件 - 簡介

之前我們已經在幾個文章中談到了Tag Helpers，這一次我們會討論其它有關的事情。

在 ASP.NET Core 2 還為我們帶來了一個新功能 - Tag Helper 元件。

Tag Helper 元件負責生成或修改特定的HTML，它們與 Tag Helper 一起工作。

Tag Helper 將會執行您的 Tag Helper 元件。

Tag Helper 元件是動態地向HTML中新增內容最完美的選擇。

要使您的Tag Helper元件執行，您需要設定一個特定的Tag Helper。這個Tag Helper需要從內建的抽象類繼承 TagHelperComponentTagHelper。

我知道，我知道這個命名非常令人困惑。

繼承自 TagHelperComponentTagHelper 的型別將是一個 Tag Helper，它將執行與之匹配的 Tag Helper 元件。

步驟

我們首先建立一個新的 Tag Helper 元件。我們可以建立針對內建 head 和 body 標籤的 Tag Helper 元件；從特殊類 TagHelperComponentTagHelper 繼承的
Tag Helper，都可以建立 Tag Helper 元件。

我們來看一個例子。

我將從建立新的 Razor Pages 模板開始：

    dotnet new razor

我們按如下步驟讓一個 Tag Helper 元件正常工作：

建立一個新的 Tag Helper 元件
將元件注入到DI
建立一個繼承自TagHelperComponentTagHelper的 Tag Helper 類
將 Tag Helper 包含在_ViewImports.cshtml檔案中

建立一個新的 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;
        }
    }

如果您使用過 Tag Helper，那麼您應該很熟悉。在範例中，繼承自內建的TagHelperComponent抽象類，然後重寫ProcessAsync方法。

我們需要將 Tag Helper 元件成為我們應用程式的一部分，將其注入到服務容器中：

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

現在我們可以使用建立的 Tag Helper 元件！

建立Tag Helper：

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

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

為了讓我們的應用程式知道這個Tag Helper，我們必須將其新增到_ViewImports.cshtml檔案中：

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

要看到實際的效果，我們需要在程式碼中至少有一個 article 標籤，所以，我們修改Index.cshtml頁面：

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

針對內建 Tag Helper 的 Tag Helper 元件

目前有兩個內建的 Tag Helper 繼承自TagHelperComponentTagHelper類，它們位於 Microsoft.AspNetCore.Mvc.TagHelpers 程式集中。

這兩個標籤助手是 HeadTagHelper 和 BodyTagHelper。它們使我們很容易將內容注入 head 和 body 中。我們所要做的是建立 Tag Helper 元件並將其注入我們的應用程式中。

// 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)
        {
        }
    }
}

程式碼非常簡單，它從 TagHelperComponentTagHelper 類繼承，目標是 head HTML元素。

如果您檢視預設的 _ViewImports.cshtml 檔案內容，您將看到在預設情況下將包含這些內容：

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

我們可以將內建的 HeadTagHelper 使用我們的自定義 Tag Helper 元件來修改 head 標籤：

我們新增一個 Tag Helper 元件，它將檢查所有 head 標籤：

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;
    }
}

當然，我們需要將新增的HeadTagHelperComponent注入到我們的應用程式：

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

程式碼

範例程式碼在GitHub - SampleTagHelperComponent。

總結

Tag Helper 元件可用於動態地向HTML中新增內容
特殊 Tag Helper（從 TagHelperComponentTagHelper 類繼承）將執行所有匹配的 Tag Helper 元件

到此這篇關於ASP.NET Core MVC中使用Tag Helper元件的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。

ASP.NET Core MVC中使用Tag Helper元件

Tag Helper 元件 - 簡介

步驟

針對內建 Tag Helper 的 Tag Helper 元件

程式碼

總結

熱門文章