关于TagHelper的那些事情——Microsoft.AspNet.Mvc.TagHelpers介绍

写在开始

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

AnchorTagHelper
CacheTagHelper
EnvironmentTagHelper
InputTagHelper
LabelTagHelper
SelectTagHelper
OptionTagHelper
TextAreaTagHelper
ValidationMessageTagHelper
ValidationSummaryTagHelper
FormTagHelper
LinkTagHelper
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的内容就是基于以上这些属性的值生成的。

<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元素标签就可以了，示例如下：

<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里的一个日期类型的字段。

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

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

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

LabelTagHelper

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

<label asp-for="Birthday"/>

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 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>

OptionTagHelper

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

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

TextAreaTagHelper

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

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

ValidationMessageTagHelper

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

<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元素上，

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

FormTagHelper

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

asp-action
asp-controller
asp-anti-forgery

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

<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地址中。

<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，实现自己需要的功能，敬请期待！

posted @ 2015-07-12 20:02 奋起直追阅读(3240) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

上善若水

专心做好一件事