ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇:

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 组件。我们可以创建针对内置 headbody 标签的 Tag Helper 组件;从特殊类 TagHelperComponentTagHelper 继承的

Tag Helper,都可以创建 Tag Helper 组件。

我们来看一个例子。

我将从创建新的 Razor Pages 模板开始:

    dotnet new razor

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

  1. 创建一个新的 Tag Helper 组件
  2. 将组件注入到DI
  3. 创建一个继承自TagHelperComponentTagHelper的 Tag Helper 类
  4. 将 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 程序集中 。

这两个标签助手是 HeadTagHelperBodyTagHelper。它们使我们很容易将内容注入 headbody 中。我们所要做的是创建 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 &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("&lt;script&gt;console.log('head tag');&lt;/script&gt;");
}
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 Components》https://codingblast.com/tag-helper-components/

翻译:Sweet Tang

本文地址:http://www.cnblogs.com/tdfblog/p/tag-helper-components-in-asp-net-core-mvc.html

欢迎转载,请在明显位置给出出处及链接。

ASP.NET Core MVC – Tag Helper 组件的更多相关文章

  1. ASP.NET Core MVC – Tag Helpers 介绍

    ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...

  2. ASP.NET Core MVC Tag Helpers 介绍

    简介 Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能.将它们添加到视图中,会经过Razor模板引擎处理并创建一个HTML,之后再返回给浏览器.有一些Tag Helpers,其实 ...

  3. ASP.NET Core MVC 之视图组件(View Component)

    1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...

  4. ASP.NET Core - 关于Tag Helper值得了解的五点

    如果您开发过ASP.NET Core Web应用程序,您应该已经熟悉了Tag Helper.ASP.NET Core应用程序依赖Tag Helper来呈现表单和表单字段是很常见的.所以,一个视图通常包 ...

  5. ASP.NET Core MVC – Caching Tag Helpers

    简介 缓存可以大大提高应用程序加载时间和响应速度.我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容. 在上一篇文章中,我们谈到了Tag Helpers,演示Tag Helpers能 ...

  6. ASP.NET Core MVC – Form Tag Helpers

    ASP.NET Core Tag Helpers系列目录 ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Helpers ...

  7. ASP.NET Core MVC – 自定义 Tag Helpers

    ASP.NET Core Tag Helpers系列目录,共四篇: ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Hel ...

  8. asp.net core mvc View Component 应用

    ViewComponent 1.View 组件介绍 在ASP.NET CORE MVC中,View组件有点类似于partial views,但是他们更强大,View组件不能使用model bindin ...

  9. [asp.net core]定义Tag Helpers

    原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring Getting started wi ...

随机推荐

  1. HTML5 开发APP(MUI的一些特性)

    先附mui文档地址:http://dev.dcloud.net.cn/mui/ui/  .mui的UI组件比较简单而且在文档中很好找就不过多说了. 1 在app开发中,使用HTML5+的api,必须m ...

  2. PHP通过phpmailer批量发送邮件功能

    前端页面代码: 注意:目前发送人使用的qq邮箱支持的不是特别友好.建议使用网易 新浪 163等其他邮箱. 需要用到phpmailer包 下载地址:https://sourceforge.net/pro ...

  3. Pandas: 如何将一列中的文本拆分为多行? | Python

    Pandas: 如何将一列中的文本拆分为多行? 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别填入多行中的数据,被填在一行里了,然而在分析的时候,需要拆分成为多行. 在上图中,列名 ...

  4. iOS字典转模型MJExtension使用

    如果项目是纯OC的建议使用,MJExtension是一套字典和模型之间互相转换的超轻量级框架,可以轻松完成: 字典(JSON) --> 模型(Model) 模型(Model) --> 字典 ...

  5. 3.commonjs模块

    1.首先建一个math.js exports.add = function(a, b){ return a + b; } exports.sub = function(a, b){ return a ...

  6. JavaScript 开发总结(一)

    数据类型:JavaScript定义的数据类型有字符串.数字.布尔.数组.对象.Null.Undefined,但typeof有区分可判别的数据分类是number.string.boolean.objec ...

  7. 【python密码学编程】6.凯撒加密法

    凯撒加密法的迷药是0~25的整数 # _*_ coding:utf-8 _*_ #Caeser Ciper import pyperclip messgae = 'this is my secret ...

  8. [bzoj 1409] Password 矩阵快速幂+欧拉函数

    考试的时候想到了矩阵快速幂+快速幂,但是忘(bu)了(hui)欧拉定理. 然后gg了35分. 题目显而易见,让求一个数的幂,幂是斐波那契数列里的一项,考虑到斐波那契也很大,所以我们就需要欧拉定理了 p ...

  9. Presto0.157版本单节点部署教程

    因为Presto版本的更新速度较快,所以最好按照对应版本的教程进行部署,博主之前看错了版本号,拿0.100版本的教程来部署0.157版本,结果导致部署失败. 官网:https://prestodb.i ...

  10. 浅谈Python在信息学竞赛中的运用及Python的基本用法

    浅谈Python在信息学竞赛中的运用及Python的基本用法 前言 众所周知,Python是一种非常实用的语言.但是由于其运算时的低效和解释型编译,在信息学竞赛中并不用于完成算法程序.但正如LRJ在& ...