ASP.NET Core MVC中如何使用Tag Helper组件
这篇文章主要介绍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组件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。