Taghepler
写在开始
在上一篇文章中,简单介绍了什么是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的内容就是基于以上这些属性的值生成的。
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
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 > |
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
显示所有信息
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地址中。
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,实现自己需要的功能,敬请期待!