ASP.NET Core 提供了一组内置标签帮助器，允许您应用最常用的元素转换。通过使用内置标签助手，您不需要像上一章那样编写自己的自定义标签助手。
本章介绍基本的内置标签帮助器，并解释如何使用它们来转换锚点、链接、脚本和图像元素。它还描述了如何缓存某些内容以及如何根据应用程序的环境呈现内容。
1 准备工作
本章继续使用上一章中的项目。
注释掉Startup.cs 中上一章中的标签组件帮助器语句。
//services.AddTransientITagHelperComponent, TimeTagHelperComponent();
//services.AddTransientITagHelperComponent, TableFooterTagHelperComponent();
更新了主文件夹中的_RowPartial.cshtml 部分视图。
@型号产品
t
td@型号名称/td
td@Model.Price.ToString(\’c\’)/td
td@模型.CategoryId/td
td@Model.SupplierId/td
/tr
定义主控制器列表视图中显示的表中的附加列。
@model IEnumerableProduct
@{
布局=\’_SimpleLayout\’;
}
h6 class=\’bg-Secondary text-white text-center m-2 p-2\’Products/h6
div 类=\’m-2\’
table class=\’table table-SM table stripe table border\’
广告
t
第名称/第
第个价格/个
第类别/第
第供应商/第
/tr
/广告
身体
@foreach（模型p 的乘积）
{
零件名称=\’_RowPartial\’ 型号=\’p\’/
}
/tbody
/桌子
/div
添加图像文件。我创建了一个wwwroot/images 文件夹并添加了一个名为city.png 的图像文件。本章中的几个示例演示了使用jQuery 包对使用JavaScript 文件的标记帮助程序的支持。 libman 安装jquery@3.4.1 -d wwwroot/lib/jquery.
使用浏览器请求http://localhost:5000/Home/list 以查看产品列表。
2 启用内置的标签助手
内置标记帮助程序在Microsoft.AspNetCore.Mvc.TagHelpers 命名空间中定义。要启用此功能，请将@addTagHelper 指令添加到单个视图或页面，或将该指令添加到视图导入文件中。
以下是Views 文件夹中_ViewImports.cshtml 文件中所需的指令。这将启用控制器视图的内置标签帮助器。
@addTagHelper *，Microsoft.AspNetCore.Mvc.TagHelpers
3 改变锚元素
^ 元素是用于导航应用程序并向应用程序发送GET 请求的基本工具。 AnchorTagHelper 类用于将元素的href 属性转换为指向使用路由系统生成的URL。这意味着URL 不必进行硬编码，并且对路由设置的更改会自动反映在应用程序的锚元素中。
下面描述了内置标签助手AnchorTagHelper 类支持的属性。
名称说明asp-action 该属性指定URL 指向的操作方法。 Asp-controller 该属性指定URL 指向的控制器。如果省略此属性，则URL 指向呈现当前视图的控制页面（出现在# 字符之后）。 asp-host 此属性指定URL 指向的主机的名称。 asp-route 此属性指定用于生成URL 的路由名称。以asp-route 开头的名称用于指定URL 的附加值。 asp-route-id 属性用于向路由系统提供ID 段的值。该属性用作路由的单个值，而不是使用单个属性提供值。
AnchorTagHelper 允许您在使用应用程序路由配置的元素内轻松生成URL。 Views/Home 文件夹中的以下_RowPartial.cshtml 文件添加了一个锚元素，该元素使用表的属性来创建一个针对主控制器定义的另一个操作的URL。
@型号产品
t
td@型号名称/td
td@Model.Price.ToString(\’c\’)/td
td@模型.CategoryId/td
td@Model.SupplierId/td
塔
asp-action=\’索引\’ asp-controller=\’home\’
asp-route-id=\’@Model.ProductId\’ class=\’btn btn-sm btn-info\’
选择
/A
/td
/tr
asp-action 和asp-controller 属性指定操作方法的名称以及定义该方法的控制器。段变量的值是使用asp-route-[name] 属性定义的，因此asp-route-id 属性提供id 段变量的值。该值用于为所选择的操作方法提供参数。 asp-action 属性。
要查看锚元素转换，请使用浏览器请求http:/localhost:5000/home/list。
检查Select 锚元素，每个href 属性都包含关联的Product 对象的ProductId 值，如下所示。
a class=\’btn btn-sm btn-info\’ href=\’/Home/index/3\’选择/a
在这种情况下，asp-route-id 属性提供的值意味着不能使用默认URL，因此路由系统包括控制器和操作名称部分，以及为操作方法提供参数的部分。生成一个网址。在这两种情况下，只指定了一种操作方法，因此标记助手创建的URL 指向显示视图的控制器。单击锚元素会向主控制器的Index 方法发送HTTP GET 请求。
使用Razor 页面锚元素
asp-page 属性用于指定Razor 页面作为锚元素的href 属性的目标。页面的路径以/字符为前缀，@page 指令中定义的路由段值是使用asp-route-[name] 属性定义的。以下代码添加一个锚元素，该元素指向Pages/Suppliers 文件夹中定义的列表页面以及Views/Home 文件夹中List.cshtml 文件中定义的Razor 页面。
a asp-page=\’/suppliers/list\’ class=\’btn btn-secondary\’Suppliers/a
如果您使用浏览器请求http://localhost:5000/home/list，您将看到一个样式为按钮的锚元素。如果检查发送到客户端的HTML，您将看到锚元素已发生如下所示的转换。
a class=\’btn btn-secondary\’ href=\’/lists/suppliers\’Suppliers/a
href 属性中使用的URL 反映了用于覆盖此页面的默认路由规则的@page 指令。这将在您的浏览器中显示Razor 页面。
4 使用 JavaScript 和 CSS 标签助手
ASP.NET Core 提供了强大而灵活的标签帮助器，用于通过脚本和链接元素管理JavaScript 文件和CSS 样式表。
4.1 管理 JavaScript 文件
ScriptTagHelper 类是脚本元素的内置标记帮助器，它使用下表中描述的属性来管理视图中包含的JavaScript 文件。
脚本元素的内置标签帮助器属性：
名称说明asp-src-include 使用此属性指定要包含在视图中的JavaScript 文件asp-src-exclude 使用此属性指定要从视图中排除的JavaScript 文件asp-append -version 使用此属性可以：缓存破解（如“关于缓存破解”侧栏中所述） asp-fallback-src 此属性用于指定在内容交付网络出现问题时要使用的后备JavaScript 文件。属性用于选择内容交付网络，以防出现问题。 问题中使用的JavaScript 文件asp-fallback-src-exclude 此属性用于排除JavaScript 文件，以便在发生内容交付网络问题时可以看到它们的用途。 Fallback-test 该属性用于指定JavaScript 代码片段，该代码片段用于确定JavaScript 代码是否已从内容交付网络成功加载。
(1) 选择JavaScript文件
asp-src-include 属性用于使用通配模式将JavaScript 文件包含在视图中。全局模式支持一组通配符来匹配文件。下表描述了最常见的通配模式。
示例模式描述？js/src?js 此模式匹配除/之外的任何单个字符。本示例匹配js 目录中名为src 后跟任意字符和.js 的文件，例如js/src1.js 或js/srcX.js，但不匹配js/src123.js 或js/mydir/src1.js match * js/*.js 此模式匹配除/之外的任意数量的字符。此示例匹配js 目录中任何带有js 扩展名的文件，例如js/src1.js 或js/src123.js，但js/mydir/src1.js**js/**/* 不匹配.js。匹配任意数量的字符，包括/。此示例匹配js 目录或子目录中任何具有.js 扩展名的文件，例如/js/src1.js 或/js/mydir/src1.js。
-Globing 是一种有用的方法，可以确保您的视图包含应用程序所需的JavaScript 文件，即使文件路径发生变化也是如此。
使用asp-src-include 属性包含wwwroot/lib/jquery 文件夹中的所有JavaScript 文件。该文件夹是使用Views/Shared 文件夹中的_SimpleLayout.cshtml 中的以下命令安装的jQuery 包的位置。
脚本asp-src-include=\’lib/jquery/**/*.js\’/script
在wwwroot 文件夹评估模式中，此处使用的模式容纳任何具有.js 扩展名的文件，无论其在wwwroot 文件夹中的位置如何。这意味着添加到项目中的任何JavaScript 包都将包含在发送给客户端的包中。客户端HTML。
使用浏览器请求http://localhost:5000/home/list 并检查发送到浏览器的HTML。布局中的一个脚本元素已转换为每个JavaScript 文件的脚本元素，如下所示：
脚本src=\’/lib/jquery/core.js\’/script
脚本src=\’/lib/jquery/jquery.js\’/script
脚本src=\’/lib/jquery/jquery.min.js\’/script
脚本sre=\’/lib/jquery/jquery.slim.js\’/script
脚本src=\’/1ib/jquery/jquery.slim.min.js\’/script
(2) 减少通配模式
没有应用程序需要上述模式选择的所有文件。许多包包含多个具有相似内容的JavaScript 文件，通常会删除不太受欢迎的功能以节省带宽。 jQuery 包包含jQuery.slim,js 文件。该文件包含与jQuery.js 文件相同的代码，但不包含处理异步HTTP 请求或动画效果的功能（尽管还有一个core.js 文件包含这些功能）。如果不小心进入包裹请忽略）。
这些文件中的每一个都对应一个min.js 文件扩展名，它代表一个缩小的文件。 Minify 通过删除所有空格并重命名函数和变量以使用较短的名称来减小JavaScript 文件的大小。
每个包只需要一个JavaScript 文件（大多数项目都是这种情况）。如果您只需要缩小版本，则可以限制与通配模式匹配的文件集，如下所示。
脚本asp-src-include=\’lib/jquery**/*slim.min.js\’/script
html 响应是：
脚本src=\’/lib/jquery/jquery.slim.min.js\’/script
(3) 未附送的文件
当您想要选择名称中包含特定术语（例如slim）的文件时，缩小JavaScript 文件模式非常有用。如果所需的文件不包含该术语，例如，如果您想要缩小文件的完整版本，则它没有用。幸运的是，您可以使用asp-src-exclude 属性从列表中删除与asp-src-include 属性匹配的文件，如下所示。
脚本asp-src-include=\’/lib/jquery/**/*.min.js\’
asp-src-exclude=\’**.slim.**\’
/剧本
HTML 响应如下所示：
脚本sre\’/lib/jquery/jquery.min.js\’/seript
(4)内容分发网络的利用
脚本src=\’https://cdnjs.cloudflare.com/ajax/libs/jguery/3.4.1/jquery.min.js
asp-fallback-src=\’/lib/jquery/jquery.min.js\’asp-fallback-test=\’window.jQuery\’
/剧本
src 属性用于指定CDN URL。 asp-fallback-src 属性用于指定当CDN 无法传送常规src 属性指定的文件时要使用的本地文件。要检查您的CDN 是否正常工作，请使用asp-fallback-test 属性定义在浏览器中评估的JavaScript 代码段。如果片段评估为false，则请求回滚文件。
4.2 管理 CSS 样式表
LinkTagHelper 类是链接元素的内置标记帮助器，用于管理视图中包含的CSS 样式表。此标签助手支持下表中描述的属性。
链接元素的内置标签帮助器属性：
名称说明asp-href-include 该属性用于为输出元素的href 属性选择文件asp-href-exclude 该属性用于从输出元素的href 属性中排除文件asp-append-version 该属性为用于启用缓存破解。 asp -fallback-href 该属性用于指定发生CDN 问题时的后备文件。 asp-fallback-href-include 此属性用于选择发生CDN 问题时要使用的文件。 -fallback-href-exclude 如果存在CDN 问题，此属性用于从使用的文件集中排除文件asp-fallback-href-test-class 此属性用于指定使用的CSS 类asp-fallback-href-test-propertyThis property 指定用于测试CDN 的CSS 属性。 asp-fallback-href-test-yalue 此属性指定用于测试CDN 的CSS 值。
(1)选择样式表
LinkTagHelper 与ScriptTagHelper 共享许多功能，包括支持通配模式来选择或排除CS 文件，以便您不必单独指定它们。样式表有常规版本和缩小版本，并支持源映射，因此能够准确选择CSS 文件与选择JavaScript 文件同样重要。流行的Bootstrap 包（我们在本书中使用它来设计HTMI 元素的样式）在wwwroot/lib/twiter-bootstrap/css 文件夹中包含CSS 样式表。
bootstrap.css 文件是常规样式表，bootstrap.min.css 文件是缩小版本，bootstrap.css.map 文件是源映射。其他文件包含CSS 功能的子集，以便为不使用这些功能的应用程序节省带宽。
Views/Shared 文件夹中_SimpleLayout.cshtml 中的以下代码将布局中的常规链接元素替换为使用asp-href-include 和asp-href-exclude 属性的元素（jQuery 脚本元素已删除）。需要更长的时间）。
链接asp-href-include=\’/lib/twitter-bootstrap/css/*.min.css\’
asp-href-exclude=\’**/*-reboot*,**/*-grid\’ rel=\’stylesheet\’ /
(2) 使用内容分发网络
链接href=\’https://ednjs.clouflare.com/ajax/1ibs/twitter-bootstrap/4.3.1css/bootstrap.min.css\’
asp-fallback-href=\’/lib/twitter-bootstrap/css/bootstrap.min.css\’ rel=\’stylesheet\’/
href 属性用于指定CDN URL，这里使用asp-fallback-href 属性来选择CDN 不可用时要使用的文件。
5 处理图像元素
ImageTagHelper 类通过img 元素的src 属性提供图像的缓存破解，使缓存可供应用程序使用，同时确保对图像的更改立即生效。 ImageTagHelper 类在img 元素中运行，该元素定义用于启用缓存破解的asp-append-version 属性。
在Views/Shared 文件夹中的_SimpleLayout.cshtml 中为城市天际线图像的共享布局添加了一个img 元素。
img src=\’/images/city.png\’ asp-append-version=\’true\’ class=\’m-2\’ /
如果您使用浏览器请求http://localhost:5000/home/list 并检查HTML 和响应，您将看到用于请求图像文件的URL，包括版本校验和。
img src=\’/images/city.png?v-KaMNDSZFAJufReRDpKhOK_IIPNc7E\’ 类=\’m-2\’
6 使用数据缓存
CacheTagHelper 类允许您缓存内容片段以加速视图或页面渲染。缓存内容由缓存元素表示，这些元素是使用下表中显示的属性进行配置的。
缓存元素的内置标签帮助器属性。
名称说明Enabled 该布尔属性用于控制是否缓存已缓存元素的内容。省略此属性将启用缓存。 Expires-on 该属性用于指定缓存内容过期的绝对时间，并表示为DateTime 值。 Expires-after 该属性用于指定缓存内容的相对过期时间。 TimeSpan 值expires-sliding 该属性指定缓存内容过期的时间段，即自上次使用以来的时间段。该属性表示为vly-by-header 值。指定用于管理缓存内容差异的请求标头的名称。 versionvarie-by-query 该属性用于指定用于管理不同版本的缓存内容的查询字符串键的名称。该属性用于指定用于管理缓存的路由变量的名称。 variation-by-cookie for different versions of content 此属性用于指定用于管理不同版本的缓存内容的cookie 的名称。 bool 属性用于指定是否使用经过身份验证的用户的用户名。 管理缓存内容的不同版本计算此属性是为了提供用于管理不同版本内容的密钥。当内存缓存空间不足并且未过期的缓存被清除时，在以下情况下会考虑相对优先级：
以下示例将上一节中的img 元素替换为包含时间戳的内容，并将该内容缓存在Views/Shared 文件夹中的_SimpleLayout.cshtml 文件中。
h6 class=\’bg-primary text-white m-2 p-2\’
未缓存的时间戳：@DateTime.Now.To
LongTimeString()
</h6>
<cache>
<h6 class=\”bg-primary text-white m-2 p-2\”>
Cached timestamp: @DateTime.Now.ToLongTimeString()
</h6>
</cache>
cache 元素用于表示应该缓存的内容区域，该内容区域已应用于包含时间戳的 h6 元素之一。使用浏览器请求 http://localhost:5000/home/list ，那么两个时间戳将是相同的。重新加载浏览器，会看到缓存的内容用于其中一个 h6 元素，时间戳没有变化。
6.1 设置缓存到期时间
expires-* 属性允许指定缓存内容何时过期，可以表示为绝对时间或相对于当前时间的时间也可以指定缓存内容不被请求的持续时间。在Views/Shared 文件夹的_SimpleLayout.cshtml 文件中设置缓存过期时间，使用了 expires-after 属性来指。应该将内容缓存 15 秒。
<cache expires-after=\”@TimeSpan.FromSeconds(15)\”>
<h6 class=\”bg-primary text-white m-2 p-2\”>
Cached timestamp: @DateTime.Now.ToLongTimeString()
</h6>
</cache>
使用浏览器请求 http://localhost:5000/home/list ，然后重新加载页面。15 秒后，缓存的内容过期，并创建一个新的内容部分。
6.2 设置固定的过期点
可以使用 expireson-on 属性指定缓存内容的固定过期时间，该属性接收一个 DateTime 值。
<cache expires-on=\”@DateTime.Parse(\”2030-01-01\”)\”>
6.3 设置最后使用的有效期
expires-sliding 属性用于指定一个期限，如果内容还没有从缓存中检索，则在该期限之后内容将过期。以下指定了滑动到期时间为10秒。
<cache expires-sliding=\”@TimeSpan.FromSeconds(10)\”>
6.4 使用缓存的变化
默认情况下，所有请求接收相同的缓存内容。CacheTagHelper 类可以维护缓存内容的不同版本，并使用它们来满足不同类型的 HTTP 请求，使用名称以 vary-by 开头的属性指定。如下显示了使用 vary-by-route 属性根据路由系统匹配的操作值来创建缓存变量。
<cache expires-sliding=\”@TimeSpan.FromSeconds(10)\” vary-by-route=\”action\”>
如果使用两个浏览器选项卡来请求 http:/localhost:5000/home/index 和 http://localhost:5000/home/list 会看到每个窗口接收自己的缓存内容和过期时间，因为每个请求生成不同的操作路由值。
7 使用宿主环境标签助手
EnvironmentTagHelper 类应用于自定义环境元素，并确定基于托管环境发送到浏览器的 HTML 中是否包含某个内容区域。environment 元素依赖于 names 属性，此属性用于指定以逗号分隔的主机环境名称列表，其中包含在 environment 元素中的内容将包含在发送给客户端的 HTML中。
以下在 Views/Shared 文件夹的 _SimpleLayout.cshtml 文件中使用环境元素，包括视图中用于开发和生产托管环境的不同内容。
<environment names=\”development\”>
<h2 class=\”bg-info text-white m-2 p-2\”>This is Development</h2>
</environment>
<environment names=\”production\”>
<h2 class=\”bg-danger text-white m-2 p-2\”>This is Production</h2>
</environment>
environment 元素检査当前宿主环境名，并包含它所包含的内容或省略。
#以上关于ASP.NET Core应用程序9：使用内置的标签助手的相关内容来源网络仅供参考，相关信息请以官方公告为准！
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92067.html
