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

Tag Helper 组件 - 简介

之前我们已经在几个文章中谈到了Tag Helpers，这一次我们会讨论其它有关的事情。

在 ASP.NET Core 2 还为我们带来了一个新功能 - ices.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 组件并将其注入我们的应用程序中。

// 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("<script>console.log('head tag');</script>");        }        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组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。