ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇:
之前我们已经在几个文章中谈到了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
我知道,我知道这个命名非常令人困惑。
继承自
的类型将是一个 Tag Helper,它将执行与之匹配的 Tag Helper 组件。
- TagHelperComponentTagHelper
我们首先创建一个新的 Tag Helper 组件。我们可以创建针对内置 head 和 body 标签的 Tag Helper 组件;从特殊类
继承的
Tag Helper,都可以创建 Tag Helper 组件。
我们来看一个例子。
我将从创建新的 Razor Pages 模板开始:
- dotnet new razor
我们按如下步骤让一个 Tag Helper 组件正常工作:
的 Tag Helper 类
- TagHelperComponentTagHelper
文件中
- _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 继承自
类,它们位于 Microsoft.AspNetCore.Mvc.TagHelpers 程序集中 。
- TagHelperComponentTagHelper
这两个标签助手是 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 <head> 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
- 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;
- }
- }
- public void ConfigureServices(IServiceCollection services) {
- services.AddTransient < ITagHelperComponent,
- HeadTagHelperComponent > ();
- services.AddMvc();
- }
来源: http://www.cnblogs.com/tdfblog/p/tag-helper-components-in-asp-net-core-mvc.html