關於TagHelper的那些事情——自定義TagHelper(格式化輸出、依賴注入使用)

  自定義TagHelper的最後一步就是在Process方法或ProcessAsync方法中添加展示代碼。熟悉WebControl開發的朋友都知道Render方法,在這個方法中會添加展示的Html元素和啓動腳本,TagHelper的這一步咱們要作的也就是和Render方法同樣。html

  這裏咱們主要利用上面方法中的第二個參數output來往View上輸出展示部分。app

  首先讓咱們看以output類型TagHelperOutput的定義:post

    /// <summary>
    /// Class used to represent the output of an <see cref="ITagHelper"/>.
    /// </summary>
    public class TagHelperOutput
    {
        /// <summary>
        /// Instantiates a new instance of <see cref="TagHelperOutput"/>.
        /// </summary>
        /// <param name="tagName">The HTML element's tag name.</param>
        /// <param name="attributes">The HTML attributes.</param>
        public TagHelperOutput(string tagName, IDictionary<string, object> attributes)
        {
            ...
        }

        /// <summary>
        /// The HTML element's tag name.
        /// </summary>
        /// <remarks>
        /// A whitespace or <c>null</c> value results in no start or end tag being rendered.
        /// </remarks>
        public string TagName { get; set; }

        /// <summary>
        /// The HTML element's pre content.
        /// </summary>
        /// <remarks>Value is prepended to the <see cref="ITagHelper"/>'s final output.</remarks>
        public TagHelperContent PreContent{ get; }

        /// <summary>
        /// The HTML element's main content.
        /// </summary>
        /// <remarks>Value occurs in the <see cref="ITagHelper"/>'s final output after <see cref="PreContent"/> and
        /// before <see cref="PostContent"/></remarks>
        public TagHelperContent Content { get; }

        /// <summary>
        /// The HTML element's post content.
        /// </summary>
        /// <remarks>Value is appended to the <see cref="ITagHelper"/>'s final output.</remarks>
        public TagHelperContent PostContent { get; }

        /// <summary>
        /// <c>true</c> if <see cref="Content"/> has been set, <c>false</c> otherwise.
        /// </summary>
        public bool IsContentModified { get; }

        /// <summary>
        /// Indicates whether or not the tag is self-closing.
        /// </summary>
        public bool SelfClosing { get; set; }

        /// <summary>
        /// The HTML element's attributes.
        /// </summary>
        /// <remarks>
        /// MVC will HTML encode <see cref="string"/> values when generating the start tag. It will not HTML encode
        /// a <c>Microsoft.AspNet.Mvc.Rendering.HtmlString</c> instance. MVC converts most other types to a
        /// <see cref="string"/>, then HTML encodes the result.
        /// </remarks>
        public IDictionary<string, object> Attributes { get; }

        /// <summary>
        /// Changes <see cref="TagHelperOutput"/> to generate nothing.
        /// </summary>
        /// <remarks>
        /// Sets <see cref="TagName"/> to <c>null</c>, and clears <see cref="PreContent"/>, <see cref="Content"/>,
        /// and <see cref="PostContent"/> to suppress output.
        /// </remarks>
        public void SuppressOutput()
        {
           ...
        }
    }

  TagName:spa

  指定輸出到View上最外層Html元素的Tag。設計

  PreContentcode

  指定添加到Html元素主內容(Content)前面的。orm

  Contenthtm

  指定Html元素的主內容,在PreContent後面,PostContent前面。對象

  PostContentblog

  指定Html元素主內容後面的。

  SupressOutput

  不生成任何展現內容。

一般咱們會根據實際須要設置output中這些屬性,其中用的比較多的就是TagName和Content,在TagName指定生成HTML元素的最外層Tag,在Content添加其內部的Html元素和啓動腳本。

咱們知道ASP.NET 5實現了依賴注入,在TagHelper類中咱們也能夠經過依賴注入獲取更多的系統實例對象,爲具體需求全部。咱們只須要在TagHelper類中,添加一個相關類型的屬性,而後在屬性頭上添加Activate屬性便可自動獲取對應實例。好比,獲取ViewContext信息,能夠在類中添加以下代碼:

[Activate]
public ViewContext ViewContext { get; set; }

這樣咱們就能夠在其餘地方,經過屬性ViewContext獲取當前View的上下文信息。

經過這種方式,你能夠獲取到更多的系統實例對象,如ActionContextHttpContextHttpRequestHttpResponse、 ViewDataDictionary以及ActionBindingContext等。具體關於依賴注入的介紹見這裏

寫在結尾

到此爲止,關於如何自定義TagHelper的知識點已經所有介紹完畢,咱們來回憶一下:

1. 定義一個TagHelper類

2. 設計Attributes: Properties are Attributes.

3. 如何設計內嵌的TagHelper

4. Format輸出  

相關文章
相關標籤/搜索