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

写在开始

在上一篇文章中,简单介绍了什么是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的内容就是基于以上这些属性的值生成的。

<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
    指定环境名,当有多个时候以逗号分隔。这里判断的依据是,读取IHostingEnvironmentEnvironmentName的值,与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 奋起直追 阅读(...) 评论(...) 编辑 收藏