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

Tag Helper 组件 - 简介

之前我们已经在几个文章中谈到了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。

我知道，我知道这个命名非常令人困惑。

继承自 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("<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 的 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组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。