寫在開始
在上一篇文章中,簡單介紹了什么是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
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>
@{ 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 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地址中。
<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,實現自己需要的功能,敬請期待!