ASP.NET Core MVC中如何使用Tag Helper组件
这篇文章主要介绍ASP.NET Core MVC中如何使用Tag Helper组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
Tag Helper 组件 - 简介
在 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(""); } return Task.CompletedTask; } }如果您使用过 Tag Helper，那么您应该很熟悉。在示例中，继承自内置的TagHelperComponent抽象类，然后重写ProcessAsync方法。
我们需要将 Tag Helper 组件成为我们应用程序的一部分，将其注入到服务容器中：
public void ConfigureServices(IServiceCollection services) { services.AddTransient(); 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";} TagHelperComponent will add stuff here. 针对内置 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{ /// /// A [HtmlTargetElement("head")] [EditorBrowsable(EditorBrowsableState.Never)] public class HeadTagHelper : TagHelperComponentTagHelper { /// /// Creates a new /// The 代码非常简单，它从 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(""); } return Task.CompletedTask; }}当然，我们需要将添加的HeadTagHelperComponent注入到我们的应用程序：
public void ConfigureServices(IServiceCollection services) { services.AddTransient(); services.AddMvc(); } 总结
Tag Helper 组件可用于动态地向HTML中添加内容
特殊 Tag Helper（从 TagHelperComponentTagHelper 类继承）将执行所有匹配的 Tag Helper 组件
以上是"ASP.NET Core MVC中如何使用Tag Helper组件"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
