重学ASP.NET Core 中的标记帮助程序

标记帮助程序是什么

标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。 例如，内置的 ImageTagHelper 可以将版本号追加到图片名称。  每当图片发生变化时，服务器都会为图像生成一个新的唯一版本号，因此客户端总能获得当前图像（而不是过时的缓存图像）。

作者：依乐祝
原文链接：https://www.cnblogs.com/yilezhu/p/13197922.html

标记帮助程序的作用域是如何控制的

标记帮助程序作用域由 @addTagHelper、@removeTagHelper 和“!”选择退出字符等联合控制。下面就一一的进行相关的介绍吧。

使用 @addTagHelper 添加标记帮助程序

@addTagHelper 指令让视图可以使用标记帮助程序。 在这种情况下，视图文件是_pages/ViewImports，默认情况下，它由_pages_文件夹和子文件夹中的所有文件继承，这使得标记帮助程序可用。 
这里公开标记帮助程序有两种方式，如下所示：
第一种：使用通配符语法（" * "）指定指定程序集（AspNetCore）中的所有标记帮助程序都可用于_Views_目录及其子目录中的每个视图文件。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

第二种：使用标记帮助程序的完全限定名，添加某个特定的标记帮助程序。

@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

说明：@addTagHelper 后第一个参数指定要加载的标记帮助程序（我们使用“*”指定加载所有标记帮助程序），第二个参数“Microsoft.AspNetCore.Mvc.TagHelpers”指定包含标记帮助程序的程序集。 
注：Microsoft.AspNetCore.Mvc.TagHelpers 是内置 ASP.NET Core 标记帮助程序的程序集。

@removeTagHelper 删除标记帮助程序

@removeTagHelper 与 @addTagHelper 具有相同的两个参数，它会删除之前添加的标记帮助程序。 例如，应用于特定视图的 @removeTagHelper 会删除该视图中的指定标记帮助程序。 在 Views/Folder/_ViewImports.cshtml 文件中使用 @removeTagHelper，将从 Folder 中的所有视图删除指定的标记帮助程序。

使用 _ViewImports.cshtml  文件控制标记帮助程序作用域

可将 _ViewImports.cshtml 添加到任何视图文件夹，视图引擎将同时应用该文件和 Views/_ViewImports.cshtml 文件中的指令。

说明：

  1. 如果为 Home 视图添加空的 Views/Home/_ViewImports.cshtml 文件，则不会发生任何更改，因为 _ViewImports.cshtml 文件是附加的。

  2. 添加到 Views/Home/_ViewImports.cshtml 文件（不在默认 Views/_ViewImports.cshtml 文件中）的任何 @addTagHelper 指令，都只会将这些标记帮助程序公开给 Home 文件夹中的视图。

选择退出字符（“!”）元素级别退出标记帮助程序

使用标记帮助程序选择退出字符（“!”），可在元素级别禁用标记帮助程序。 例如，使用标记帮助程序选择退出字符在 <span> 中禁用 Email 验证：

<!span asp-validation-for="Email" class="text-danger"></!span>

说明：
须将标记帮助程序选择退出字符应用于开始和结束标记。 （将选择退出字符添加到开始标记时，Visual Studio 编辑器会自动为结束标记添加相应字符）。 
添加选择退出字符后，元素和标记帮助程序属性不再以独特字体显示。

使用 @tagHelperPrefix 阐明标记帮助程序用途

@tagHelperPrefix 指令可指定一个标记前缀字符串，以启用标记帮助程序支持并阐明标记帮助程序用途。 例如，可以将以下标记添加到 Views/_ViewImports.cshtml 文件：

@tagHelperPrefix th:

在以下代码图像中，标记帮助程序前缀设置为 th:，所以只有使用前缀 th: 的元素才支持标记帮助程序（可使用标记帮助程序的元素以独特字体显示）。 <label> 和 <input> 元素具有标记帮助程序前缀，可使用标记帮助程序，而 <span> 元素则相反。

适用于 @addTagHelper 的层次结构规则也适用于 @tagHelperPrefix。

标记帮助程序的 Intellisense 支持

在 Visual Studio 中创建新的 ASP.NET Core web 应用时，它将添加AspNetCore Razor的NuGet 包 。它 是添加标记帮助程序的工具包。
假设编写 HTML <label> 元素。只要在 Visual Studio 编辑器中输入 <l，IntelliSense 就会显示匹配的元素：

不仅会获得 HTML 帮助，还会有图标（下方带有“<>”的“@" symbol with "）


将该元素标识为标记帮助程序的目标。纯 HTML 元素（如 `fieldset`）显示“<>”图标。
纯 HTML `` 标记以棕色字体显示 HTML 标记（使用默认 Visual Studio 颜色主题时），以红色字体显示属性，并以蓝色字体显示属性值。

输入 <label 后，IntelliSense 会列出可用的 HTML/CSS 属性和以标记帮助程序为目标的属性：

通过 IntelliSense 语句完成功能，按 Tab 键即可用选择的值完成语句：

只要输入标记帮助程序属性，标记和属性字体就会更改。如果使用默认的 Visual Studio“蓝色”或“浅色”颜色主题，则字体是粗体紫色。如果使用“深色”主题，则字体为粗体青色。本文档中的图像在使用默认主题时截取的。

可在双引号 ("") 内输入 Visual Studio CompleteWord 快捷方式（默认值为 Ctrl+空格键），即可使用 C#，就像在 C# 类中一样。IntelliSense 会显示页面模型上的所有方法和属性。由于属性类型是 ModelExpression，所以这些方法和属性可用。在下图中，我正在编辑 Register 视图，所以 RegisterViewModel 是可用的。


IntelliSense 会列出页面上模型可用的属性和方法。丰富 IntelliSense 环境可帮助选择 CSS 类：

自定义标记帮助程序元素字体

可以从 "工具" "选项" "环境" " > Options > Environment > 字体和颜色" 中自定义字体和着色：

实例演示如何在ASP.NET Core中创建标记帮助程序

标记帮助程序是实现 ITagHelper 接口的任何类。但是，在创作标记帮助程序时，通常从 TagHelper 派生，这样可以访问 Process 方法。

  1. 创建一个名为 AuthoringTagHelpers 的新 ASP.NET Core 项目。注：此项目不需要身份验证。

  2. 创建一个名为“TagHelpers”的文件夹来保存标记帮助程序。注： TagHelpers 文件夹不是必需的，但它是合理的约定。

现在让我们开始编写一些简单的标记帮助程序。

EmailTagHelper 标记帮助程序

如果你正在编写博客引擎，并且需要它将营销、支持和其他联系人的电子邮件全部发送到同一个域，则可能需要这样的一个标记帮助程序。
如下所示，先上代码：

using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Threading.Tasks;namespace AuthoringTagHelpers.TagHelpers
{public class EmailTagHelper : TagHelper{public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output){output.TagName = "a";    // Replaces <email> with <a> tagvar address = MailTo + "@" + EmailDomain;output.Attributes.SetAttribute("href", "mailto:" + address);output.Content.SetContent(address);return Task.CompletedTask;}}
}

说明：

  1. 标记帮助程序使用面向根类名称的元素的命名约定（减去类名称的 TagHelper 部分）。 在此示例中， EmailTagHelper的根名称为_email_，因此 <email> 标记将针对。

  2. EmailTagHelper 类从 TagHelper 派生。 TagHelper 类提供编写标记帮助程序的方法和属性。

  3. 重写的 ProcessAsync 方法控制标记帮助程序在执行时的操作。 TagHelper 类还提供具有相同参数的同步版本 (Process)。

  4. 类名称的后缀是 TagHelper，这不是必需的，但被认为是约定的最佳做法。 可将类声明为：public class Email : TagHelper

  5. 标记帮助程序采用 Pascal 大小写格式的类和属性名将转换为各自相应的短横线格式。 因此，要使用 MailTo 属性，请使用 <email mail-to="value"/> 等效项。

  6. 最后一行为EmailTagHelper标记帮助程序设置已完成的内容。

  7. SetAttribute 是添加属性的语法，只要属性集合中当前不存在 href 属性，该方法就适用于此属性。

接下来然我们在Razor页面上应用此标记帮助程序吧。
使用以下更改更新 Views/Home/Contact.cshtml 文件中的标记:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers
@{ViewData["Title"] = "Contact Copy";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3><address>One Microsoft Way Copy Version <br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100
</address><address><strong>Support:</strong><email mail-to="Support"></email><br /><strong>Marketing:</strong><email mail-to="Marketing"></email>
</address>

说明：

  1. 开头的 @addTagHelper 是添加对应的标记帮助程序引用，文章开头已经进行了相关阐述

  2. 第18，19行代码

    标记引用了我们上面编写的   EmailTagHelper 标记帮助程序。

  3. mail-to 属性是标记帮助程序采用 Pascal 大小写格式的类和属性名将转换为各自相应的短横线格式。因此，要使用 MailTo 属性，必须使用  的等效项。

这时候运行下程序，可以看到生成对应的html标签了：

<a href="mailto:Support@contoso.com">Support@contoso.com</a>
<a href="mailto:Marketing@contoso.com">Marketing@contoso.com</a>
在标记帮助程序中使用实体模型

  1. 添加“Models”文件夹**。

  2. 将以下 WebsiteContext 类添加到“模型”文件夹：

using System;namespace AuthoringTagHelpers.Models
{public class WebsiteContext{public Version Version { get; set; }public int CopyrightYear { get; set; }public bool Approved { get; set; }public int TagsToShow { get; set; }}
}

  1. 将以下 WebsiteInformationTagHelper 类添加到“TagHelpers”文件夹。

using System;
using AuthoringTagHelpers.Models;
using Microsoft.AspNetCore.Razor.TagHelpers;namespace AuthoringTagHelpers.TagHelpers
{public class WebsiteInformationTagHelper : TagHelper{public WebsiteContext Info { get; set; }public override void Process(TagHelperContext context, TagHelperOutput output){output.TagName = "p";output.Content.SetHtmlContent(
$@"<ul><li><strong>Version:</strong> {Info.Version}</li>
<li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
<li><strong>Approved:</strong> {Info.Approved}</li>
<li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");output.TagMode = TagMode.StartTagAndEndTag;}}
}

  1. 将以下标记添加到 About.cshtml 视图**。 突出显示的标记显示 Web 站点信息。

@using AuthoringTagHelpers.Models
@{ViewData["Title"] = "About";WebsiteContext webContext = new WebsiteContext {Version = new Version(1, 3),CopyrightYear = 1638,Approved = true,TagsToShow = 131 };
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3><p bold>Use this area to provide additional information.</p><bold> Is this bold?</bold><h3> web site info </h3>
<website-information info="webContext" />

说明：
在下面的Razor显示的标记中：
<website-information info="webContext" /> 
Razor知道 info 属性是一个类，而不是字符串，并且您想要编写 c # 代码。 编写任何非字符串标记帮助程序属性时，都不应使用 @ 字符。

  1. 运行应用，并导航到“关于”视图即可查看 Web 站点信息。

总结

本文首先带着大家回顾了一下标记帮助程序的一些概念，接着给大家介绍了标记帮助程序作用域的注意事项来为接下来的实例演练做准备。然后给大家介绍了标记帮助程序强大的 Intellisense 支持，让我们在开发中事半功倍，如虎添翼！最后就是通过实例代码来做两个标记帮助程序的小例子加深我们的理解。希望对大家有所帮助！
接下来我会介绍下微软官方提供的一些常用标记帮助程序，有兴趣的朋友可以关注下。


参考文档：

  1. https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-3.1

  2. https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/authoring?view=aspnetcore-3.1

往期精彩回顾

【推荐】.NET Core开发实战视频课程 ★★★

.NET Core实战项目之CMS 第一章 入门篇-开篇及总体规划

【.NET Core微服务实战-统一身份认证】开篇及目录索引

Redis基本使用及百亿数据量中的使用技巧分享（附视频地址及观看指南）

.NET Core中的一个接口多种实现的依赖注入与动态选择看这篇就够了

10个小技巧助您写出高性能的ASP.NET Core代码

用abp vNext快速开发Quartz.NET定时任务管理界面

在ASP.NET Core中创建基于Quartz.NET托管服务轻松实现作业调度

现身说法：实际业务出发分析百亿数据量下的多表查询优化

关于C#异步编程你应该了解的几点建议

C#异步编程看这篇就够了

给我好看 
您看此文用  · 秒，转发只需1秒呦~
好看你就点点我

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/309070.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小型数字系统---运动码表设计

小型数字系统---运动码表设计

运动码表设计中码表控制器是最难的&#xff0c;所以主要介绍如何设计码表控制器。 我们先给这个时序电路设计状态以及编码 先设计状态转换函数 首先画出状态图: (其中我们让其一到000状态就立马变为001状态&#xff0c;110状态存储完数据立马变成100状态) 根据状态图&#…
阅读更多...
用 aforge.net 小试一下验证码识别

用 aforge.net 小试一下验证码识别

今天来小玩一下 aforge.net 套用官方的话就是一个专门为开发者和研究者基于C#框架设计的&#xff0c;这个框架提供了不同的类库和关于类库的资源&#xff0c;还有很多应用程序例子&#xff0c;包括计算机视觉与人工智能&#xff0c;图像处理&#xff0c;神经网络&#xff0c;遗…
阅读更多...
国标转区位码电路设计及汉字显示

国标转区位码电路设计及汉字显示

区位码国际码-2020H&#xff0c;由于采用加法器实现&#xff0c;因此用补码形式进行表示&#xff0c;区位码 国际码FFFF-2020H0001H国际码dfe0。 从网上找下机内码转化的软件&#xff0c;将一段自选文字输入该软件&#xff0c;进行十六进制的机内码转化。由于一个汉字是由四个十…
阅读更多...
【WPF】DataGrid多表头的样式设计

【WPF】DataGrid多表头的样式设计

需求在使用WPF开发时&#xff0c;使用DataGrid列表显示数据时&#xff0c;有些字段可以进行分组显示&#xff0c;用于更好的表达它们之间存在的某种关系&#xff0c;因此就考虑到要对DataGrid的表头进行扩展&#xff0c;可以显示多行表头&#xff0c;让这些有关联的字段内容显示…
阅读更多...
如何使用ABP进行软件开发之基础概览

如何使用ABP进行软件开发之基础概览

ABP框架简述1&#xff09;简介在.NET众多的技术框架中&#xff0c;ABP框架&#xff08;本系列中指aspnetboilerplate项目&#xff09;以其独特的魅力吸引了一群优秀开发者广泛的使用。在该框架的赋能之下&#xff0c;开发者可根据需求通过官方网站【https://aspnetboilerplate.…
阅读更多...
模2加法，模2减法，模2除法

模2加法，模2减法，模2除法

十进制的除法&#xff0c;大家都会做&#xff1a;列个竖式&#xff0c;商&#xff0c;写在上面&#xff0c;上个几&#xff0c;再用被除数减去积&#xff0c;求得余数…。 二进制的除法&#xff0c;和十进制的计算方法相同&#xff0c;也要列出个竖式计算。 二进制的除法&…
阅读更多...
《Unit Testing》2.1 伦敦学派如何做隔离

《Unit Testing》2.1 伦敦学派如何做隔离

针对单元测试的定义&#xff0c;主要有两种看法&#xff1a;经典学派。经典学派之所以经典&#xff0c;是因为这原本就是人们做单元测试和测试驱动开发的方式伦敦学派。伦敦学派扎根于伦敦的编程社区。单元测试的定义单元测试有很多定义&#xff0c;但是所有的定义都有三个重要…
阅读更多...
C++实现数组模拟链表(实现链表的增删功能)

C++实现数组模拟链表(实现链表的增删功能)

代码如下: #include <iostream> using namespace std; const int N 100;struct Node {int data;int next; };class ArrayList { private:Node node[N];int maxSize;//数组容量int idx;//接下来要插入的结点的下标int len;//链表长度public:void initList(){node[0].nex…
阅读更多...
Gartner：容器采用将迅速增长，但不会很快有利可图

Gartner：容器采用将迅速增长，但不会很快有利可图

导语容器的未来可期&#xff0c;到2024年&#xff0c;所有应用程序中的15&#xff05;将在容器中运行&#xff0c;而这一数据今天仅为5&#xff05;&#xff0c;但当前变现还比较难。正文近日&#xff0c;Gartner公司发表其首次为软件容器管理软件和服务市场做的预测。Gartner说…
阅读更多...
【Azure Show】|第三期 人工智能大咖与您分享！嘉宾陈海平胡浩陈堰平

【Azure Show】|第三期 人工智能大咖与您分享！嘉宾陈海平胡浩陈堰平

欢迎来到Azure Show!Azure ShowHello,大家好&#xff0c;又来到新的一期的Azure Show!本期是人工智能专场&#xff0c;我们邀请到微软Data&AI的解决方案架构师陈堰平&#xff0c;Tensorflow.NET 作者陈海平&#xff0c;还有微软人工智能方向最有价值专家胡浩和大家分享人工…
阅读更多...
深入探究ASP.NET Core异常处理中间件

深入探究ASP.NET Core异常处理中间件

前言全局异常处理是我们编程过程中不可或缺的重要环节。有了全局异常处理机制给我们带来了很多便捷&#xff0c;首先我们不用满屏幕处理程序可能出现的异常&#xff0c;其次我们可以对异常进行统一的处理&#xff0c;比如收集异常信息或者返回统一的格式等等。ASP.NET Core为我…
阅读更多...
.NET Core加解密实战系列之——消息摘要与数字签名算法

.NET Core加解密实战系列之——消息摘要与数字签名算法

简介加解密现状&#xff0c;编写此系列文章的背景&#xff1a;需要考虑系统环境兼容性问题&#xff08;Linux、Windows&#xff09;语言互通问题&#xff08;如C#、Java等&#xff09;&#xff08;加解密本质上没有语言之分&#xff0c;所以原则上不存在互通性问题&#xff09;…
阅读更多...
造轮子-AgileConfig一个基于.NetCore开发的轻量级配置中心

造轮子-AgileConfig一个基于.NetCore开发的轻量级配置中心

微服务确实是行业的一个趋势&#xff0c;我自己也在把一些项目往微服务架构迁移。玩微服务架构配置中心是一个绕不过去的东西&#xff0c;有很多大牌的组件可以选&#xff0c;比如spring-cloud-config&#xff0c;apoll&#xff0c;disconf等等。而我为什么还要造一个轮子呢&am…
阅读更多...
SQL Server 分页+json分享

SQL Server 分页+json分享

1。SQL Server 版本2012 新增SQL分页的写法最近封装一个轻量级的ORM用到了分页&#xff0c;以前只知道使用Row_Number函数&#xff0c;现在发现sqlserver 新增的 {orderBy} offset {start} rows fetch next {pageSize} rows only 也挺好用的。简单回顾下 sqlserver 各个版本支持…
阅读更多...
用十行代码快速创建权限管理系统

用十行代码快速创建权限管理系统

&#xff08;坚持做自己&#xff09;为了防止说是标题党&#xff0c;我先展示下真是就需要十行代码&#xff1a;当然还有appsettings.json配置文件&#xff0c;和种子数据文件&#xff0c;这个不算代码之内。1、项目背景介绍Blog.Core项目开源也两年了&#xff0c;经过了很多许…
阅读更多...
ERP的配置管理实践

ERP的配置管理实践

源宝导读&#xff1a;随着ERP系统的日益复杂&#xff0c;应用部署的方式越来越复杂&#xff0c;应用的配置也变得越来越庞杂&#xff0c;难以维护和管理。本文将介绍配置中心服务通过集中化、可离线的架构设计&#xff0c;解决ERP配置问题的实践经验。一、背景随着ERP业务的日益…
阅读更多...
《LIO-SAM阅读笔记》1.IMU预积分模块

《LIO-SAM阅读笔记》1.IMU预积分模块

前言&#xff1a; LIO-SAM是一个多传感器融合的紧耦合SLAM框架&#xff0c;融合的传感器类型有雷达、IMU和GPS&#xff0c;其中雷达和IMU在LIO-SAM框架中必须使用的。LIO-SAM的优化策略采用了GTSAM库&#xff0c;GTSAM库采用了因子图的优化方法&#xff0c;其提供了一些列C的外…
阅读更多...
EntityFramework Core 迁移忽略主外键关系

EntityFramework Core 迁移忽略主外键关系

【导读】本文来源于一位公众号童鞋私信我的问题&#xff0c;在我稍加思索后给出了如下一种方案&#xff0c;在此之前我也思考过这个问题&#xff0c;借此机会我稍微看了下&#xff0c;目前能够想到的也只是本文所述方案。为何要忽略主外键关系我们不仅疑惑为何要忽略主外键关系…
阅读更多...
你很可能需要知道这个调试小技巧

你很可能需要知道这个调试小技巧

缘起 最近在调试的时候&#xff0c;需要观察第三方容器中每一个元素的值。默认情况下&#xff0c;vs 并不知道如何显示第三方容器的内容&#xff0c;只能手动观察容器中的每一个值&#xff0c;超级不方便。我找到一个非常给力的好办法&#xff0c;你还知道其它好办法吗&#xf…
阅读更多...
全宇宙首本 VS Code 中文书，来了！

全宇宙首本 VS Code 中文书，来了！

大家好&#xff01;我是韩骏&#xff0c;VS Code 中文社区创始人&#xff0c;VS Code 的代码贡献者。2013 年&#xff0c;毕业于上海交通大学软件学院&#xff0c;现在是微软开发平台事业部的软件工程师。写过 20 多款 VS Code 插件&#xff0c;其中最热门的 Code Runner 插件有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023