ASP.NET Core MVC中如何使用Tag Helper组件

2024-10-26 技术教程

这篇文章主要介绍ASP.NETCoreMVC中如何使用TagHelper组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

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 模板开始：

dotnetnewrazor

我们按如下步骤让一个 Tag Helper 组件正常工作：

创建一个新的 Tag Helper 组件

将组件注入到DI

创建一个继承自TagHelperComponentTagHelper的 Tag Helper 类

将 Tag Helper 包含在_ViewImports.cshtml文件中

创建一个新的 Tag Helper 组件：

publicclassArticleTagHelperComponent:TagHelperComponent{publicoverrideTaskProcessAsync(TagHelperContextcontext,TagHelperOutputoutput){if(string.Equals(context.TagName,"article",StringComparison.OrdinalIgnoreCase)){output.PostContent.AppendHtml("<script>console.log('ASP.NETCore-LoveFromConsole');</script>");}returnTask.CompletedTask;}}

如果您使用过 Tag Helper，那么您应该很熟悉。在示例中，继承自内置的TagHelperComponent抽象类，然后重写ProcessAsync方法。

我们需要将 Tag Helper 组件成为我们应用程序的一部分，将其注入到服务容器中：

publicvoidConfigureServices(IServiceCollectionservices){services.AddTransient<ITagHelperComponent,ArticleTagHelperComponent>();services.AddMvc();}

现在我们可以使用创建的 Tag Helper 组件！

创建Tag Helper：

[HtmlTargetElement("article")][EditorBrowsable(EditorBrowsableState.Never)]publicclassArticleTagHelperComponentTagHelper:TagHelperComponentTagHelper{publicCodingBlastTagHelper(ITagHelperComponentManagercomponentManager,ILoggerFactoryloggerFactory):base(componentManager,loggerFactory){}}

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

为了让我们的应用程序知道这个Tag Helper，我们必须将其添加到_ViewImports.cshtml文件中：

@usingIntroTagHelperComponent@namespaceIntroTagHelperComponent.Pages@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers@addTagHelperSampleTagHelperComponent.ArticleTagHelperComponentTagHelper,SampleTagHelperComponent

要看到实际的效果，我们需要在代码中至少有一个article标签，所以，我们修改Index.cshtml页面：

@modelIndexModel@{ViewData["Title"]="Homepage";}<div></div><article>TagHelperComponentwilladdstuffhere.</article>针对内置 Tag Helper 的 Tag Helper 组件

目前有两个内置的 Tag Helper 继承自TagHelperComponentTagHelper类，它们位于Microsoft.AspNetCore.Mvc.TagHelpers程序集中。

这两个标签助手是HeadTagHelper和BodyTagHelper。它们使我们很容易将内容注入head和body中。我们所要做的是创建 Tag Helper 组件并将其注入我们的应用程序中。

//Copyright(c).NETFoundation.Allrightsreserved.//LicensedundertheApacheLicense,Version2.0.SeeLicense.txtintheprojectrootforlicenseinformation.usingSystem.ComponentModel;usingMicrosoft.AspNetCore.Razor.TagHelpers;usingMicrosoft.Extensions.Logging;namespaceMicrosoft.AspNetCore.Mvc.Razor.TagHelpers{///<summary>///A<seecref="TagHelperComponentTagHelper"/>targetingthe<head>HTMLelement.///</summary>[HtmlTargetElement("head")][EditorBrowsable(EditorBrowsableState.Never)]publicclassHeadTagHelper:TagHelperComponentTagHelper{///<summary>///Createsanew<seecref="HeadTagHelper"/>.///</summary>///<paramname="manager">The<seecref="ITagHelperComponentManager"/>whichcontainsthecollection///of<seecref="ITagHelperComponent"/>s.</param>///<paramname="loggerFactory">The<seecref="ILoggerFactory"/>.</param>publicHeadTagHelper(ITagHelperComponentManagermanager,ILoggerFactoryloggerFactory):base(manager,loggerFactory){}}}

代码非常简单，它从TagHelperComponentTagHelper类继承，目标是headHTML元素。

如果您查看默认的_ViewImports.cshtml文件内容，您将看到在默认情况下将包含这些内容：

@usingIntroTagHelperComponent@namespaceIntroTagHelperComponent.Pages@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers

我们可以将内置的HeadTagHelper使用我们的自定义 Tag Helper 组件来修改head标签：

我们添加一个 Tag Helper 组件，它将检查所有head标签：

publicclassHeadTagHelperComponent:TagHelperComponent{publicoverrideTaskProcessAsync(TagHelperContextcontext,TagHelperOutputoutput){if(string.Equals(context.TagName,"head",StringComparison.OrdinalIgnoreCase)){output.PostContent.AppendHtml("<script>console.log('headtag');</script>");}returnTask.CompletedTask;}}

当然，我们需要将添加的HeadTagHelperComponent注入到我们的应用程序：

publicvoidConfigureServices(IServiceCollectionservices){services.AddTransient<ITagHelperComponent,HeadTagHelperComponent>();services.AddMvc();}总结

Tag Helper 组件可用于动态地向HTML中添加内容

特殊 Tag Helper（从TagHelperComponentTagHelper类继承）将执行所有匹配的 Tag Helper 组件

以上是“ASP.NETCoreMVC中如何使用TagHelper组件”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！