zoukankan      html  css  js  c++  java
  • 关于TagHelper的那些事情——自定义TagHelper(格式化输出、依赖注入使用)

      自定义TagHelper的最后一步就是在Process方法或ProcessAsync方法中添加展现代码。熟悉WebControl开发的朋友都知道Render方法,在这个方法中会添加展现的Html元素和启动脚本,TagHelper的这一步我们要做的也就是和Render方法一样。

      这里我们主要利用上面方法中的第二个参数output来往View上输出展现部分。

      首先让我们看以output类型TagHelperOutput的定义:

        /// <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:

      指定输出到View上最外层Html元素的Tag。

      PreContent

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

      Content

      指定Html元素的主内容,在PreContent后面,PostContent前面。

      PostContent

      指定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输出  

  • 相关阅读:
    ES6走一波 Generator异步应用
    扁平数据结构化
    Django笔记&教程 6-2 表单(Form)基础操作
    Django笔记&教程 6-3 使用模型(models)创建表单(form)
    Django笔记&教程 6-4 forms进阶操作,重写forms方法
    Django笔记&教程 7-1 基于类的视图(Class-based views)介绍
    Django笔记&教程 7-3 拓展CBVs(Class-based views)
    Django笔记&教程 5-1 基础增删查改
    Django笔记&教程 1-1 一 新建项目
    Django笔记&教程 0-2 框架版本与相关工具
  • 原文地址:https://www.cnblogs.com/liontone/p/4657927.html
Copyright © 2011-2022 走看看