什么是taghelper？这是asp.net core 中新出现的一个名词，它的作用是使服务器端代码可以在razor 文件中参与创建和呈现html 元素。(asp.net core 系列目录)
一、概述
上面的解释有点拗口？那么换一个名词，htmlhelper大家都知道吧，在asp.net core中，taghelper类似htmlhelper，但可以说是青出于蓝而胜于蓝。那么taghelper的作用也就大概明白了吧。
首先通过一个例子看一下taghelper是怎么使用的，看看它和htmlhelper有什么区别。新建一个book类：
public class book { [display(name = "编号")] public string code { get; set; } [display(name = "名称")] public string name { get; set; } }
新建对应的controller和action：
public class bookcontroller : controller { // get: /<controller>/ public iactionresult index() { return view(new book() { code = "001", name = "asp" }); } }
最后就是view了：
@model book @{ layout = null; } @html.labelfor(m => m.name) @html.editorfor(m => m.name) <br /> <label asp-for="name"></label> <input asp-for="name" />
这里分别通过htmlhelper和taghelper两种方式实现了一个文本和输入框的显示。查看网页源代码，可以看到二者生成的html如下:
<label for="name">name</label> <input class="text-box single-line" id="name" name="name" type="text" value="asp" /> <br/> <label for="name">name</label> <input type="text" id="name" name="name" value="asp" />
目前看起来二者差不多，从工作量上来看也是区别不大。现在功能实现了，需要做一些样式处理。简单举个例子，现在希望book的编号（code）对应的label的颜色设置为红色，定义了一个css如下：
<style type="text/css"> .codecolor { color:red; } </style>
然后准备把这个样式应用到label上，这时如果是htmlhelper就很有可能会被问：“class写在哪”，估计好多人都被问过。然后我们告诉他可以这样写：
@html.labelfor(m=>m.name,new {@class="codecolor"})
前端工程师添加后达到了想要的效果，但同时表示记不住这个写法，下次可能还会问。
如果是taghelper就方便了，告诉他可以像平时给html的标签添加class一样操作即可，也就是：
<label asp-for="name" class="codecolor"></label>
前端工程师表示这种写法“真是太友好了”。同样对于form及验证，比较一下两种写法的不同，htmlhelper版：
@using (html.beginform("index", "home", formmethod.post)){ @html.labelfor(m => m.code) @html.editorfor(m => m.code) @html.validationmessagefor(m => m.code) <input type="submit" value="提交" /> }
taghelper版：
<form asp-action="index" asp-controller="home" method="post"> <label asp-for="code"></label> <input asp-for="code" /> <span asp-validation-for="code"></span> <input type="submit" value="提交" /> </form>
二、自定义taghelper
现在有这样的需求，用于显示book的编号的label不止要添加名为codecolor的css样式，还要给书的编号自动添加一个前缀，例如“bj”。
对于这样的需求，希望可以通过一个简单的标记，然后由taghelper自动实现。例如：
<label show-type="bookcode">1001</label>
自定义了一个属性“show-type”，用于标识这个label的显示类别，“1001”为假定的图书编号。通过这样的设置方式，将来如果需求有变化，需要对编号的显示做更多的修饰，只需修改对应的taghelper即可，而页面部分不需要做任何调整。
系统提供了方便的自定义taghelper的方式，就是继承系统提供的taghelper类，并重写它的process/processasync方法，例如下面的例子：
public class labeltaghelper : taghelper { public override async task processasync(taghelpercontext context, taghelperoutput output) { if (output.attributes.trygetattribute("show-type", out taghelperattribute showtypeattribute)) { if (showtypeattribute.value.tostring().equals("bookcode")) { output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent("bj" + content); } } } }
首先判断label是否被设置了show-type="bookcode"，然后获取当前label的content内容，将其添加前缀“bj”后作为此label的content的新内容。注意一下content的获取方式，如果它没有被修改，凭感觉直接通过output.content.getcontent()获取到的内容是空的。
访问index页面，可以看到改标签已被处理，如下图：
备注：a.关于获取show-type的值，还可以有其他方式，下文会讲到。
b.从规范化命名的角度，建议将自定义的taghelper其命名为xxxaghelper这样的格式。
三、taghelper的注册
taghelper自定义之后需要将其注册一下，否则它是不会生效的。打开_viewimports.cshtml，默认为：
@using taghelperdemo
@using taghelperdemo.models
@addtaghelper *, microsoft.aspnetcore.mvc.taghelpers
在最下面添加一条
@addtaghelper *, taghelperdemo
最后添加的这一句话是什么意思呢？也就是将程序集taghelperdemo（即第二个参数）中的所有taghelper（第一个参数为“*”，即所有）全部启用。假如还定义了一个passwordtaghelper，但只想只添加labeltaghelper，可以这样写：
@addtaghelper taghelperdemo.taghelpers. labeltaghelper, taghelperdemo
如果想添加所有自定义的taghelper，但要去除labeltaghelper呢？
那么可以先添加所有，再去除这个labeltaghelper。
@addtaghelper *, taghelperdemo
@removetaghelper taghelperdemo.taghelpers. labeltaghelper, taghelperdemo
四、taghelper的作用范围
在项目中，可能不止使用label标签来显示book的code，还有可能会是p、span等类型的标签，现在的需求是，无论是上述哪一种标签，都要实现添加css和前缀的功能。
现在将index.cshtml中新增一个p标签如下：
<p show-type="bookcode">1002</p>
访问这个页面发现1002未被处理。这是因为我们定义的taghelper名为labeltaghelper，在默认的情况下只会处理label标签。当然也可以做特殊设置，例如下面代码的写法：
[htmltargetelement("p")] public class labeltaghelper : taghelper { //代码省略 }
通过“[htmltargetelement("p")]”指定本taghelper只能被使用于p标签。再次访问此页面，发现p标签被处理了，而label未被处理。这说明这样的显式指定的优先级要高于默认的名称匹配。除了设置指定标签，还可以有一些其他的辅助设置：
[htmltargetelement("p", attributes = "show-type", parenttag = "div")] public class labeltaghelper : taghelper
可以这样写，会匹配p标签，要求该标签拥有show-type属性，并且父标签为div。这几个条件是“and”的关系。如果还想匹配label标签，可以添加对label的设置，例如下面代码这样：
[htmltargetelement("p", attributes = "show-type", parenttag = "div")] [htmltargetelement("label", attributes = "show-type", parenttag = "div")] public class labeltaghelper : taghelper
这两个htmltargetelement的关系是“or”。通过这样的设置，可以极大的缩小目标标签的范围。
但是这样设置之后，这个taghelper的名字再叫labeltaghelper就不合适了，例如可以改为bookcodetaghelper，最终代码如下：
[htmltargetelement("p", attributes = "show-type", parenttag = "div")] [htmltargetelement("label", attributes = "show-type", parenttag = "div")] public class bookcodetaghelper : taghelper { public override async task processasync(taghelpercontext context, taghelperoutput output) { if (output.attributes.trygetattribute("show-type", out taghelperattribute showtypeattribute)) { if (showtypeattribute.value.tostring().equals("bookcode")) { output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent("bj" + content); } } } }
如果想使个别html标签屏蔽taghelper的作用，可以使用“!”。例如下面两个标签：
<!label show-type="bookcode">1001</label>
五、自定义标签
上一节最终形成了一个名为bookcodetaghelper的taghelper，我们知道labeltaghelper是可以按名称默认匹配label标签的，那么是否可以自定义一个bookcode标签呢？在index.cshtml中添加这样的代码：
<bookcode>1003</bookcode>
由于自定义bookcode标签的目的就是专门显示book的code，所以也不必添加show-type属性了。然后修改bookcodetaghelper，修改后的代码如下：
public class bookcodetaghelper : taghelper { public override async task processasync(taghelpercontext context, taghelperoutput output) { output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent("bj" + content); } }
去掉了两个htmltargetelement设置并取消了对show-type的判断，访问index页面查看新建的bookcode标签是否会被处理，结果是没有被处理。这是为什么呢？
这是由于taghelper会将采用pascal 大小写格式的类和属性名将转换为各自相应的短横线格式。即“bookcode”对应“book-code”，获取标签的属性值，同样遵循这样的规则。所以将标签改为如下写法即可：
<book-code>1003</book-code>
再次运行测试，发现这个新标签被成功处理。查看网页源代码，被处理后的html代码是这样的：
<book-code class="codecolor">tj1003</book-code>
如果想将其改变为label，可以在bookcodetaghelper中通过指定tagname实现：
public class bookcodetaghelper : taghelper { public book book { get; set; } public override async task processasync(taghelpercontext context, taghelperoutput output) { output.tagname = "label"; output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent(book.prefix + content); } }
六、taghelper与页面之间的数据传递
假如现在的新需求是图书编码的前缀不再固定为“bj”了，需要在标签中定义，例如这样：
<book-code prefix="sh">1003</book-code>
需要获取prefix的值，在上面的例子中采用的是trygetattribute方法，其实还有简单的方式，修改bookcodetaghelper，代码如下：
public class bookcodetaghelper : taghelper { public string prefix { get; set; } public override async task processasync(taghelpercontext context, taghelperoutput output) { output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent(prefix + content); } }
标签中的prefix的值会自动赋值给bookcodetaghelper.prefix，是不是更方便了。那么如果是model中的值呢？假如book类有一个属性“public string prefix { get; set; } ”，这和传入一个字符串没什么区别，那么可以这样写：
<book-code prefix="@model.prefix">1003</book-code>
这种传值方式不止是支持字符串，将model整体传入也是支持的，将标签修改如下：
<book-code book="@model">1003</book-code>
修改bookcodetaghelper代码：
public class bookcodetaghelper : taghelper { public book book { get; set; } public override async task processasync(taghelpercontext context, taghelperoutput output) { output.attributes.setattribute("class", "codecolor"); string content = output.content.ismodified ? output.content.getcontent() : (await output.getchildcontentasync()).getcontent(); ; output.content.setcontent(book.prefix + content); } }
七、取消标签输出
前面的几个例子都是对满足条件的标签的修改，taghelper也可以取消对应标签的输出，例如存在这样一个标签：
<div simple-type="simple1"></div>
如果不想让它出现在生成的html中，可以这样处理：
[htmltargetelement("div",attributes = "simple-type")] public class simple1taghelpers : taghelper { public string simpletype { get; set; } public override void process(taghelpercontext context, taghelperoutput output) { if (simpletype.equals("simple1")) //可以是其他一些判断规则 { output.suppressoutput(); } } }
八、tagbuilder
在taghelper中，可以用tagbuilder来辅助生成标签，例如存在如下两个div：
<div simple-type="simple2"></div> <div simple-type="simple3"></div>
想在div中添加html元素可以这样写：
[htmltargetelement("div",attributes = "simple-type")] public class simple1taghelpers : taghelper { public string simpletype { get; set; } public override void process(taghelpercontext context, taghelperoutput output) { if (simpletype.equals("simple2")) { output.content.sethtmlcontent("<p>simple2</p>"); } else if (simpletype.equals("simple3")) { var p = new tagbuilder("p"); p.innerhtml.append("simple3"); output.content.sethtmlcontent(p); } } }
通过tagbuilder生成了一个新的p标签，并将它插入到div中。