關於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,實現自己需要的功能,敬請期待!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM