谈谈ASP.NET CORE 中Razor Page 的TagHelper【标签助手】常见类型及其详细使用
David Hongyu 2020-03-15 15:42:39 748 收藏 4 原力计划
分类专栏： ASP.NET CORE MVC 文章标签： asp.net
版权
ASP.NET CORE MVC
专栏收录该内容
56 篇文章1 订阅
订阅专栏
一，TagHelper简介
1．概念
TagHelper（标签助手）是asp.net core mvc的新特性，把HTML和服务器内容混合在一起，准确说标签助手使服务器端代码能够参与在Razor文件中创建和呈现HTML元素。
2．究竟什么是TagHelper
在MVC项目中使用过HtmlHelper。比如当需要在View上添加一个导航栏的时候，我们就会添加下面代码到页面上去：
<ol>
…
<li>@Html.ActionLink("HomeText", "Index", "Home")</li>
…
</ol>
这里有一些HTML元素li。还有以@开头的一些C#代码，当View解析的时候，这些C#代码会被解析成HTML元素。
<li><a href="https://www.cnblogs.com/">HomeText</a></li>
当我们用TagHelper，我们同样可以用下面的代码来获得上面同样的效果：
<ol>
…
<li><a asp-controller="Home" asp-action="Index">HomeText2</a></li>
…
</ol>
在这里，a元素的属性asp-controller和asp-action并不是HTML5的属性，而是这个TagHelper的属性。
这个其实就是内置的AnchorTagHelper。当然.Net Core内置了很多其他TagHelper。
注意，虽然TagHelper看起来有点像我们之前服务器控件的写法，但是它不是服务器控件（这也是为什么ASP.NET CORE性能优异的原因）。它提供了一个HTML友好的开发体验。使用TagHelper的Razor标记看起来更像标准的HTML。熟悉HTML/CSS/JavaScript的前端设计师可以直接编辑Razor，而不需要学习C#的Razor语法。
3．如何开启TagHelper的使用
在需要使用的View上注册TagHelper。
@addTagHelper [the full type name of taghelper,] the assembly name
第一参数是TagHelper类的全名，当你只需要使用某一个TagHelper时候，你可以在此指定你所用的TagHelper类全名，包括它的NameSpace。
第二个参数是程序集名。
如果你要使用程序集中所有的TagHelpers，可以使用“*”或者省略这一个参数。
@addTagHelper *, Microsoft.AspNet.Mvc.TagHelpers
如果你只希望使用某个TagHelper，如：AnchorTagHelper，那么只需要一下代码：
@addTagHelper Microsoft.AspNet.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNet.Mvc.TagHelpers
然后就可以用了，如：
<a asp-controller="Home" asp-action="About">About</a>
当然，如果你想取消某个TagHelper的注册，可以使用removeTagHelper，比如
@removeTagHelper Microsoft.AspNet.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNet.Mvc.TagHelpers
一旦TagHelper被取消注册了，其对应的Tag就不能被解析成这种TagHelper了。
说明：如果想在所有的视图文件中都使用TagHelper，那么可以在Shared文件夹下_ViewImports.cshtml文件中引入TagHelper。
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
不过默认是引用好了的哦——【无需自己引用可以直接使用】。
二.常见TagHelper的Tag属性与应用
1．AnchorTagHelper 锚连接
这个TagHelper被应用在所有锚元素<a>上，它拥有以下属性：
asp-action——指定action方法名。
asp-controller——指定controller名。
asp-fragment——指定URL片段名。
asp-host——指定访问的主机(host)名。
asp-protocol——指定访问协议，比如http或者https。
asp-route——指定路由名。
最终这个TagHelper会被解析成具有href属性的锚元素，这个href的内容就是基于以上这些属性的值生成的。
<a asp-action="Create">Create New</a>
2．LabelTagHelper
与HtmlExtension.LabelFor功能一样，它只有一个属性asp-for，用来指定绑定Model里某个字段，很多其他的TagHelpers也具有这个属性。。它作用在label元素上。
<label asp-for="StuName"/>
实际上就会显示绑定的model字段中Display中设置的Name值
3．InputTagHelper
这个TagHelper被应用在input元素上，与HtmlHelper中的TextBoxForHTML一样，这个TagHelper会生成一个绑定到model中某个字段的Input元素。它支持一下属性：
asp-for——用来指定绑定model某个字段
asp-format——用来设置显示的Format，通常被用来给货币、日期和时间类型的值设置Format
比如，Birthday是model里的一个日期类型的字段。
<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/>
<input asp-for="StuName" class="form-control" />
注意:我们也可以把一个内嵌对象赋给asp-for，比如:
<input asp-for="Address.Street" type="text" />
4．ValidationMessageTagHelper
与HtmlHelper中的ValidationMessageFor一样，这个TagHelper是用来显示验证失败信息。它应用在span元素上，而且只有唯一的一个属性asp-validation-for，被用来指定所验证的对象----Model中某个字段。
<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/>
<span asp-validation-for="Birthday"/>
5．ValidationSummaryTagHelper
像HTMLHelper扩展的ValidationSummary一样，它是用来验证错误的汇总信息。它只支持一个属性asp-validation-summary，具有以下几种值：
None——不显示任何验证信息
ModelOnly——只显示Model错误信息，不包括属性错误信息
All——显示所有信息
它应用在div元素上
6．FormTagHelper
与HtmlHelper中的BeginForm一样，它用来生成一个form元素，它应用在form元素上，支持以下属性：
asp-action——
asp-controller——
<form asp-action="Add" method="post">
7．SelectTagHelper
SelectTagHelper作用在Select元素上，支持asp-for和asp-items属性。
asp-for——与我们上面介绍的一样，用来绑定model中某个字段。
asp-items——被用来指定Select元素的Option集合，它的值类型是IEnumerable<SelectListItem>。
<select asp-for="Country" asp-items="ViewBag.Countries"></select>
如果要在Select中添加一个默认选择的项，我们可以这样做：
<select asp-for="Country" asp-items="ViewBag.Countries">
<option selected="selected" value="">Choose Country</option>
</select>
我们可以赋任何类型的IEnumerable<SelectListItem>实例给asp-items，可能是某个变量或者某个实例的一个属性等。
比如：
@{
SelectListItem[] items =
{
new SelectListItem() { Text = "item 1" },
new SelectListItem() { Text = "item 2" }
};
}
<select asp-for="Country" asp-items="items"></select>
8．OptionTagHelper
应用在option元素上，和select元素一起使用，通常被用来读取option元素信息，而不改变元素内容。唯一可能修改的是在有的情况下，会根据父亲select元素将option的selected状态设成"selected"。
<select asp-for="Country" asp-items="ViewBag.Countries">
<option selected="selected" value="">Choose Country</option>
</select>
9．TextAreaTagHelper
应用在textarea元素上，目前只支持唯一一个属性asp-for
<textarea asp-for="Discription"></textarea>
10．LinkTagHelper
应用在link元素上，支持备用的样式文件。它具有以下属性：
href——指定样式资源的链接地址。
asp-href-include——指定所有需要被加载的样式文件路径，当有多个时，以逗号来分隔每一个；这里的路径是相对于应用程序中wwwroot的相对路径。
asp-href-exclude——指定那些不需要被加载的样式文件路径，当有多个时，以逗号来分隔每一个；这里的路径是相对于应用程序中wwwroot的相对路径。
asp-fallback-href——指定备用资源链接地址。
asp-fallback-href-include——指定所有需要被加载的备用样式文件路径，当有多个时，以逗号来分隔每一个；这里的路径是相对于应用程序中wwwroot的相对路径。
asp-fallback-href-exclude——指定那些不需要被加载的备用样式文件路径，当有多个时，以逗号来分隔每一个；这里的路径是相对于应用程序中wwwroot的相对路径。
asp-fallback-test-class——用来检测加载失败的样式名。
asp-fallback-test-property——用来检测资源加载失败所用的测试属性。
asp-fallback-test-value——用来检测资源加载失败所用的测试值。
asp-file-version——bool值，用来指定是否需要将文件版本信息加入到url地址中。
例如，在下面例子中，当从网络上（http://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css）加载样式文件失败时，加载本地相应的样式文件（~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css）。通过检测样式类carousel-caption中display属性是否是none来判断网络上样式文件是否加载成功。
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
asp-fallback-test-class="carousel-caption"
asp-fallback-test-property="display"
asp-fallback-test-value="none" />
11．EnvironmentTagHelper
应用在environment元素上，根据不同names的设置呈现不同的内容。它支持以下属性：
names——指定环境名，当有多个时候以逗号分隔。这里判断的依据是，读取IHostingEnvironment的EnvironmentName的值，与environment元素中的names匹配，当匹配上的时候就呈现出里面的内容，否则移除该environment元素。
在很多情况下，我们想在开发环境使用一套配置信息，在生产环境又是另外一套，这时候就需要使用条件判断语句了，不过在新版的MVC中，使用EnvironmentTagHelper提供的Environment元素标签就可以了，示例如下：
<environment names="Development">
<link rel="stylesheet" href="https://www.cnblogs.com/wugh8726254/p/~/lib2/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://www.cnblogs.com/wugh8726254/p/~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="~/lib2/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="https://www.cnblogs.com/wugh8726254/p/~/css/site.min.css" asp-append-version="true" />
</environment>
在上述代码中，我们定于，如果是Development环境就使用本地的js文件，否则（Staging或Production环境）就使用网络上的css文件。asp-append-version="true"为静态文件提供唯一版本号。
12．ScriptTagHelper
应用在script元素上，和LinkTagHelper一样，它也具有fallback功能， 只不过这里判断的不是class样式，而是用来判断默认的js文件是否加载成功。
它支持以下属性：
src指定要加载的js源地址。
asp-src-include指定要加载的js文件，当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。
asp-src-exclude指定不需要加载的js文件，当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。
asp-fallback-src指定备用的js源地址。
asp-fallback-src-include指定需要加载的备用js文件，当有多个文件格式时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。
asp-fallback-src-exclude指定不需要加载的备用js文件，当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。
asp-file-version——bool值，用来指定是否需要将文件版本信息加入到url地址中。
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"
asp-fallback-src="~/lib/jquery/jquery.min.js">
</script>