Taghepler

写在开始

在上一篇文章中，简单介绍了什么是TagHelper，怎么使用它。接下来我会简单介绍一下微软随着ASP.NET5一起发布的TagHelpers。它们分别是：

1. AnchorTagHelper
2. CacheTagHelper
3. EnvironmentTagHelper
4. InputTagHelper
5. LabelTagHelper
6. SelectTagHelper
7. OptionTagHelper
8. TextAreaTagHelper
9. ValidationMessageTagHelper
10. ValidationSummaryTagHelper
11. FormTagHelper
12. LinkTagHelper
13. ScriptTagHelper

 AnchorTagHelper

这个TagHelper被应用在所有锚元素<a>上，它拥有一下属性：

• asp-action
  指定action方法名。
• asp-controller
  指定controller名。
• asp-fragment
  指定URL片段名。
• asp-host
  指定访问的主机(host)名。
• asp-protocol
  指定访问协议，比如http或者https。
• asp-route
  指定路由名。

最终这个TagHelper会被解析成具有href属性的锚元素，这个href的内容就是基于以上这些属性的值生成的。

1	<a asp-action="Create">Create New</a>

CacheTagHelper

应用在cache元素上，使用IMemoryCache实例来缓存cache元素内容在当前进程的内存中。它支持下面的属性：

• vary-by
  string类型，TagHelper将基于该值来缓存内容，该值会被用来生成cache key。
• vary-by-header
  string类型，指定请求头(request header)，只能指定单个头名(header name)，TagHelper将基于该值来缓存内容，该值会被用来生成cache key。
• vary-by-query
  string类型，指定请求参数，当有多个请求参数时，以逗号分隔。TagHelper将基于它来缓存内容，该值会被用来生成cache key。
• vary-by-route
  string类型，指定路由数据参数，当有多个路由数据参数时，以逗号分隔。TagHelper将基于它来缓存内容，该值会被用来生成cache key。
• vary-by-cookie
  string类型，指定cookies名，当有多个cookies时，以逗号分隔。TagHelper将基于这些cookies名来缓存内容，该值会被用来生成cache key。
• vary-by-user
  bool类型，指定是否为每个登陆的用户使用缓存，用户信息被用来生成cache key。
• expires-on
  DateTime类型，指定缓存失效的时间。
• expires-after
  TimeSpan类型，指定经过多少时间，缓存失效，这个时间是从加入缓存开始计时。
• expires-sliding
  TimeSpan类型，指定缓存没被使用后经过多少时间失效。
• priority
  enum类型，具有以下可能的值：
  • CachePreservationPriority.Low
  • CachePreservationPriority.Normal
  • CachePreservationPriority.High
  • CachePreservationPriority.NeverRemove　
  存储在IMemoryCache实例中的缓存受限于当前可用内存。如果当服务器将要内存溢出时，内存cache就会清除缓存来释放内容。此时，我们可以用这个属性来指定当前缓存的优先级，这样内存在释放时就会考虑释放优先级低的缓存。

EnvironmentTagHelper

应用在environment元素上，根据不同的names的设置有条件的render不同的内容。它支持以下属性：

• names
  指定环境名，当有多个时候以逗号分隔。这里判断的依据是，读取IHostingEnvironment的EnvironmentName的值，与environment元素中的names匹配，当匹配上的时候就render出里面的内容，否则移除该environment元素。

在很多情况下，我们想再开发环境使用一套配置信息，在生产环境又是另外一套，这时候就需要使用条件判断语句了，不过在新版的MVC中，使用EnvironmentTagHelper提供的Environment元素标签就可以了，示例如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<environment names="Development">     <script src="~/lib/jquery/jquery.js"></script>     <script src="~/lib/bootstrap/js/bootstrap.js"></script>     <script src="~/lib/hammer.js/hammer.js"></script>     <script src="~/lib/bootstrap-touch-carousel/js/bootstrap-touch-carousel.js"></script> </environment> <environment names="Staging,Production">     <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"             asp-fallback-src="~/lib/jquery/jquery.min.js"             asp-fallback-test="window.jQuery">     </script>     <script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"             asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"             asp-fallback-test="window.jQuery">     </script>     <script src="//ajax.aspnetcdn.com/ajax/hammer.js/2.0.4/hammer.min.js"             asp-fallback-src="~/lib/hammer.js/hammer.js"             asp-fallback-test="window.Hammer">     </script>     <script src="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/js/bootstrap-touch-carousel.js"             asp-fallback-src="~/lib/bootstrap-touch-carousel/js/bootstrap-touch-carousel.js"             asp-fallback-test="window.Zepto">     </script> </environment>

在上述代码中，我们定于，如果是Development环境就使用本地的js文件，否则（Staging或Production环境）就先加载cdn的文件。

InputTagHelper

这个TagHelper被应用在input元素上，与HtmlHelpers中的TextBoxForHTML一样，这个TagHelper会生成一个绑定到model中某个字段的Input元素。它支持一下属性：

• asp-for
• asp-format

asp-for用来指定绑定model哪个字段到TagHelper上，很多其他的TagHelpers也具有这个属性。

asp-format用来设置显示的Format，通常被用来给货币、日期和时间类型的值设置Format，比如，Birthday是model里的一个日期类型的字段。

1	<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/>

注意: asp-for的类型ModelExpression是ASP.NET MVC 6里面新定义的一个类，其构造函数带有一个字符类型的参数，用来指定Model中字段的名字。我们也可以把一个内嵌对象赋给asp-for，比如:

1	<input asp-for="Address.Street" type="text" />

LabelTagHelper

与HtmlExtension.LabelFor功能一样，它只有一个属性asp-for，用来指定绑定Model里某个字段。它作用在label元素上。

1	<label asp-for="Birthday"/>

SelectTagHelper

SelectTagHelper作用在Select元素上，支持asp-for和asp-items属性。

asp-for与我们上面介绍的一样，用来绑定model中某个字段。

asp-items，被用来指定Select元素的Option集合，它的值类型是IEnumerable<SelectListItem>。

1	<select asp-for="Country" asp-items="ViewBag.Countries">

如果要在Select中添加一个默认选择的项，我们可以这样做：

1 2 3

<select asp-for="Country" asp-items="ViewBag.Countries">     <option selected="selected"value="">Choose Country</option> </select>

我们可以赋任何类型是IEnumerable<SelectListItem>的实例给asp-items，可能是某个变量或者某个实例的一个属性等。

比如：

1 2 3 4 5 6 7 8

@{     SelectListItem[] items =     {         new SelectListItem() { Text = "item 1" },         new SelectListItem() { Text = "item 2" }     }; } <select asp-for="Country" asp-items="items"></select>

OptionTagHelper

应用在option元素上，和select元素一起使用，通常被用来读取option元素信息，而不改变元素内容。唯一可能修改的是在有的情况下，会根据父亲select元素将option的selected状态设成"selected"。

1 2 3

<select asp-for="Country"asp-items="ViewBag.Countries">     <option selected="selected" value="">Choose Country</option> </select>

TextAreaTagHelper

应用在textarea元素上，目前只支持唯一一个属性asp-for,

1	<textarea asp-for="Information"></textarea>

ValidationMessageTagHelper

与HtmlHelper中的ValidationMessageFor一样，这个TagHelper是用来显示验证失败信息。它应用在span元素上，而且只有唯一的一个属性asp-validation-for，被用来指定所验证的对象----Model中某个字段。

1 2	<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/> <span asp-validation-for="Birthday"/>

ValidationSummaryTagHelper

像HTMLHelper扩展的ValidationSummary一样，它是用来验证错误的汇总信息。它只支持一个属性asp-validation-summary，具有以下几种值：

• None
  不显示任何验证信息
• ModelOnly
  只显示Model错误信息，不包括属性错误信息
• All
  显示所有信息

它应用在div元素上，

1	<div class="validation" asp-validation-summary="ModelOnly"/>

FormTagHelper

与HtmlHelper中的BeginForm一样，它用来生成一个form元素，它应用在form元素上，支持以下属性：

• asp-action
• asp-controller
• asp-anti-forgery

1	<form asp-action="FormSave" asp-controller="Home" asp-anti-forgery="true">

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来判断网络上样式文件是否加载成功。

1 2 3 4 5 6

<link rel="stylesheet" href="//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" />

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-fallback-test
  指定用来检测js加载成功与否的对象
• asp-file-version
  bool值，用来指定是否需要将文件版本信息加入到url地址中。

1 2 3 4

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"     asp-fallback-src="~/lib/jquery/jquery.min.js"     asp-fallback-test="window.jQuery"> </script>

 写在结尾

上面简单介绍了内嵌TagHelpers的属性，有些内容我是从网上找来的，大家在使用具体的某个TagHelper时候可以多试试里面的属性，这样更利于对其理解和正确使用。

说了这么多内嵌的TagHelper，在接下来的我会介绍怎么编写自定义的TagHelper，实现自己需要的功能，敬请期待！