ASP.NET Core MVC – Tag Helper 组件
ASP.NET Core Tag Helpers系列目录,这是第五篇,共五篇:
- ASP.NET Core MVC – Tag Helpers 介绍
- ASP.NET Core MVC – Caching Tag Helpers
- ASP.NET Core MVC – Form Tag Helpers
- ASP.NET Core MVC – 自定义 Tag Helpers
- 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 组件并将其注入我们的应用程序中。
这是 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 标签:
我们添加一个 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 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 组件的更多相关文章
- ASP.NET Core MVC – Tag Helpers 介绍
ASP.NET Core Tag Helpers系列目录,这是第一篇,共五篇: ASP.NET Core MVC – Tag Helpers 介绍 ASP.NET Core MVC – Caching ...
- ASP.NET Core MVC Tag Helpers 介绍
简介 Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能.将它们添加到视图中,会经过Razor模板引擎处理并创建一个HTML,之后再返回给浏览器.有一些Tag Helpers,其实 ...
- ASP.NET Core MVC 之视图组件(View Component)
1.视图组件介绍 视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大.视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据. 视图组件特点: 呈块状,而不是整个响应 ...
- ASP.NET Core - 关于Tag Helper值得了解的五点
如果您开发过ASP.NET Core Web应用程序,您应该已经熟悉了Tag Helper.ASP.NET Core应用程序依赖Tag Helper来呈现表单和表单字段是很常见的.所以,一个视图通常包 ...
- ASP.NET Core MVC – Caching Tag Helpers
简介 缓存可以大大提高应用程序加载时间和响应速度.我们可以使用缓存Tag Helpers缓存不会频繁更改的HTML内容. 在上一篇文章中,我们谈到了Tag Helpers,演示Tag Helpers能 ...
- 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 ...
- ASP.NET Core MVC – 自定义 Tag Helpers
ASP.NET Core Tag Helpers系列目录,共四篇: ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Hel ...
- asp.net core mvc View Component 应用
ViewComponent 1.View 组件介绍 在ASP.NET CORE MVC中,View组件有点类似于partial views,但是他们更强大,View组件不能使用model bindin ...
- [asp.net core]定义Tag Helpers
原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring Getting started wi ...
随机推荐
- java数组排序(冒泡、直排)反转
package lianxi; public class maopao { public static void main(String[] args){ int[] i=new int[]{45,6 ...
- java webservice简单的例子
开发环境:eclipse .jdk 创建服务端 demo-webservice 创建类 HelloService.java package com.hundsun.ws.service; import ...
- MySQL慢查询日志分析
一:查询slow log的状态,如示例代码所示,则slow log已经开启. mysql> show variables like '%slow%'; +-------------------- ...
- 【网络】dns_probe_finished_nxdomain 错误
解决方案: 谷歌浏览器地址栏输入 chrome://net-internals/#dns 清除 dns 缓存即可
- 点击<tr>表格行元素进行跳转
意外发现table中利用<a>标签控制tr的行为无效. 尝试<a>标签在table中的使用,只有在<td><a href="">&l ...
- 微信小程序-滚动消息通知
写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...
- EF 中 Code First 的数据迁移以及创建视图
写在前面: EF 中 Code First 的数据迁移网上有很多资料,我这份并没什么特别.Code First 创建视图网上也有很多资料,但好像很麻烦,而且亲测好像是无效的方法(可能是我太笨,没搞成功 ...
- linux下删除文件及文件夹命令
一.删除空文件与文件夹 rm或rmdir 文件/文件夹 二.删除非空文件与文件夹 rm -rf 文件/文件夹
- Android service 服务的应用之电话监听器以及短信监听器
首先建立一个项目工程文件,如下图所示:
- [vijos NOIP模拟题]天神下凡 贪心+搜索
样例: 考试的时候没时间打了,随便敲了敲就交上去了,没想到竟然编译错误,忘定义n了23333 自己测了测能骗20分hhhh 考虑每个圆对答案的贡献,当一个圆被小圆内切的时候,分成了两半,对答案的贡献就 ...