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. java数组排序(冒泡、直排)反转

    package lianxi; public class maopao { public static void main(String[] args){ int[] i=new int[]{45,6 ...

  2. java webservice简单的例子

    开发环境:eclipse .jdk 创建服务端 demo-webservice 创建类 HelloService.java package com.hundsun.ws.service; import ...

  3. MySQL慢查询日志分析

    一:查询slow log的状态,如示例代码所示,则slow log已经开启. mysql> show variables like '%slow%'; +-------------------- ...

  4. 【网络】dns_probe_finished_nxdomain 错误

    解决方案: 谷歌浏览器地址栏输入 chrome://net-internals/#dns 清除 dns 缓存即可

  5. 点击<tr>表格行元素进行跳转

    意外发现table中利用<a>标签控制tr的行为无效. 尝试<a>标签在table中的使用,只有在<td><a href="">&l ...

  6. 微信小程序-滚动消息通知

    写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...

  7. EF 中 Code First 的数据迁移以及创建视图

    写在前面: EF 中 Code First 的数据迁移网上有很多资料,我这份并没什么特别.Code First 创建视图网上也有很多资料,但好像很麻烦,而且亲测好像是无效的方法(可能是我太笨,没搞成功 ...

  8. linux下删除文件及文件夹命令

    一.删除空文件与文件夹 rm或rmdir 文件/文件夹 二.删除非空文件与文件夹 rm -rf 文件/文件夹

  9. Android service 服务的应用之电话监听器以及短信监听器

    首先建立一个项目工程文件,如下图所示:

  10. [vijos NOIP模拟题]天神下凡 贪心+搜索

    样例: 考试的时候没时间打了,随便敲了敲就交上去了,没想到竟然编译错误,忘定义n了23333 自己测了测能骗20分hhhh 考虑每个圆对答案的贡献,当一个圆被小圆内切的时候,分成了两半,对答案的贡献就 ...