自定义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输出  

关于TagHelper的那些事情——自定义TagHelper(格式化输出、依赖注入使用)的更多相关文章

  1. 关于TagHelper的那些事情——自定义TagHelper(内嵌TagHelper)

    内嵌TagHelper 上一篇文章中提到有时候需要设计一种内嵌的TagHelper,如下: <my name="yy" age="35"> < ...

  2. 关于TagHelper的那些事情——自定义TagHelper(TagHelper的Attributes)

    接上 Attributes 在最新的VS2015RC版,开始支持了TagHelper的智能提示,主要体现在在写TagHelper有Attributes的提示,正确的Tag和Attribute会变成粗体 ...

  3. [JS] 如何自定义字符串格式化输出

    在其他语言中十分常见的字符串格式化输出,居然在 Javascript 中不见踪影,于是决定自己实现该方法,以下就是个人编写的最简洁实现: String.prototype.format = funct ...

  4. 关于TagHelper的那些事情——如何自定义TagHelper(TagHelper基类)

    写在开头 前面介绍了TagHelper的基本概念和内嵌的TagHelpers,想必大家对TagHelper都有一定的了解.TagHelper看上去有点像WebControl,但它不同于WebContr ...

  5. asp.net core razor自定义taghelper

    又一个新的名词(taghelper),这个名词在netcore razor中也替代了(Htmlhelper),通过taghelper是可以操作html标签.条件输出.更是自由添加内外元素.当然也内置了 ...

  6. 使用js在HTML中自定义字符串格式化方法

    Python中支持字符串格式化,其基本形式如下: str = "I'm {name},{age} years old" print(str.format(name="te ...

  7. javaScript prototype实例(正则) 自定义日期格式化方法

    一个JS自定义日期格式化方法,包括了不少知识点,以下方法来自jQuery DataTable中文的官方参考 //return (new Date(data)).Format("yyyy-MM ...

  8. php自定义的格式化时间示例代码

    时间刚好是5分钟前,则对应的时间戳就会被格式化为5分钟前,自定义的格式化时间方法如下,感兴趣的朋友可以参考下 如:时间刚好是5分钟前,则对应的时间戳就会被格式化为5分钟前,不多说了,直接贴上代码: 复 ...

  9. 访问API的方式为:localhost/api/customers, 创建自定义JSON格式化器

    注意的是,访问API的方式为:localhost/api/customers,在实际中将要根据情况替换合适的端口,默认所有的WEB API都是通过/api根目录的方式访问的 创建自定义JSON格式化器 ...

随机推荐

  1. 使用Unity解耦你的系统—PART4——Unity&PIAB

    在前面几篇有关Unity学习的文章中,我对Unity的一些常用功能进行介绍,包括:Unity的基本知识.管理对象之间的关系.生命周期.依赖注入等,今天则是要介绍Unity的另外一个重要功能——拦截(I ...

  2. .NET基本权限系统框架源代码

    DEMO下载地址: 百度网盘:http://pan.baidu.com/s/147ilj http://download.csdn.net/detail/shecixiong/5372895 一.开发 ...

  3. 2017 计蒜之道 初赛 第五场 C. UCloud 的安全秘钥(中等)

    暴力. $O(m*n)$的算法可以通过此题,每次询问$O(m)$扫$S$数组,统计不同数字的个数,每次移动最多只会变化两个数字,如果不同数字个数为$0$,那么答案加$1$. #include < ...

  4. Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机

    Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜 本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现的 ...

  5. 2017/11/5 Leetcode 日记

    2017/11/5 Leetcode 日记 476. Number Complement Given a positive integer, output its complement number. ...

  6. Python基础篇:从0开始学python

    目录 数据类型 基本数据类型 整形Int的内置方法 字符串Str的内置方法 列表(待补充) 流程控制 分支结构if...else... for循环 循环控制 while循环 函数 函数的名称与格式 参 ...

  7. cocos2d-android 使用 cocos2d 绘图

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha cocos2d-android-1 https://github.com/ZhouWei ...

  8. [BZOJ2594][WC2006]水管局长加强版(LCT+Kruskal)

    2594: [Wc2006]水管局长数据加强版 Time Limit: 25 Sec  Memory Limit: 128 MBSubmit: 4452  Solved: 1385[Submit][S ...

  9. HOJ 2645 WNim sg函数 博弈论

    http://blog.csdn.net/y1196645376/article/details/52165245 这道题我没有写,因为我就算翻译了我也找不到数据范围,也分不清数据变量的命名,而且ho ...

  10. poj 1988 并查集(终于看懂一个了/(ㄒoㄒ)/~~)

    题意:有几个stack,初始里面有一个cube.支持两种操作:1.move x y: 将x所在的stack移动到y所在stack的顶部.2.count x:数在x所在stack中,在x之下的cube的 ...