ASP.NET Core Tag Helpers系列目錄，這是第五篇，共五篇：

• ASP.NET Core MVC – Tag Helpers 介紹

• ASP.NET Core MVC – Caching Tag Helpers

• ASP.NET Core MVC – Form Tag Helpers

• ASP.NET Core MVC – 自定義 Tag Helpers

• ASP.NET Core MVC – Tag Helper 組件

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 組件并將其注入我們的應用程序中。

這是?HeadTagHelper?的代碼(aspnet/Mvc GitHub 倉庫)：

// 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("&lt;script&gt;console.log('head tag');&lt;/script&gt;");} ? ? ?
? ? ? ?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 Components》https://codingblast.com/tag-helper-components/
翻譯：Sweet Tang
本文地址：http://www.cnblogs.com/tdfblog/p/tag-helper-components-in-asp-net-core-mvc.html

相關文章：?

• .NET Core 2.0 正式發布信息匯總

• .NET Standard 2.0 特性介紹和使用指南

• .NET Core 2.0 的dll實時更新、https、依賴包變更問題及解決

• .NET Core 2.0 特性介紹和使用指南

• Entity Framework Core 2.0 新特性

• 體驗 PHP under .NET Core

• .NET Core 2.0使用NLog

• 升級項目到.NET Core 2.0，在Linux上安裝Docker，并成功部署

• 解決Visual Studio For Mac Restore失敗的問題

• ASP.NET Core 2.0 特性介紹和使用指南

• .Net Core下通過Proxy 模式 使用 WCF

• .NET Core 2.0 開源Office組件 NPOI

• ASP.NET Core Razor頁面 vs MVC

• Razor Page–Asp.Net Core 2.0新功能 ?Razor Page介紹

• MySql 使用 EF Core 2.0 CodeFirst、DbFirst、數據庫遷移（Migration）介紹及示例

• .NET Core 2.0遷移技巧之web.config配置文件

• asp.net core MVC 過濾器之ExceptionFilter過濾器(一)

• ASP.NET Core 使用Cookie驗證身份

• ASP.NET Core MVC – Tag Helpers 介紹

• ASP.NET Core MVC – Caching Tag Helpers

• ASP.NET Core MVC – Form Tag Helpers

• ASP.NET Core MVC – 自定義 Tag Helpers

原文地址：http://www.cnblogs.com/tdfblog/p/tag-helper-components-in-asp-net-core-mvc.html

---

.NET社區新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注

總結

以上是生活随笔為你收集整理的ASP.NET Core MVC – Tag Helper 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。