ASP.NET Core 3.0 : 二十五. TagHelper
<p> 什么是TagHelper？这是ASP.NET Core 中新出现的一个名词，它的作用是使服务器端代码可以在Razor 文件中参与创建和出现HTML 元素。(ASP.NET Core 系列目次)</p><h1>一、概述</h1>
<p> 上面的解释有点拗口？那么换一个名词，HtmlHelper各人都知道吧，在ASP.NET Core中，TagHelper雷同HtmlHelper，但可以说是后来居上而胜于蓝。那么TagHelper的作用也就大概明确了吧。</p>
<p>起首通过一个例子看一下TagHelper是怎么利用的，看看它和HtmlHelper有什么区别。新建一个Book类：</p>
public class Book
{
public string Code { get; set; }
public string Name { get; set; }
}
<p>新建对应的Controller和Action：</p>
public class BookController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
return View(new Book() { Code = "001", Name = "ASP" });
}
}
<p>末了就是View了：</p>
@model Book
@{
Layout = null;
}
@Html.LabelFor(m => m.Name)
@Html.EditorFor(m => m.Name)
<br />
<label asp-for="Name"></label>
<input asp-for="Name" />
<p>这里分别通过HtmlHelper和TagHelper两种方式实现了一个文本和输入框的表现。查看网页源代码，可以看到二者天生的HTML如下:</p>
<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" />
<p>现在看起来二者差不多，从工作量上来看也是区别不大。现在功能实现了，必要做一些样式处置处罚。简单举个例子，现在盼望Book的编号（Code）对应的label的颜色设置为赤色，界说了一个css如下：</p>
<style type="text/css">
.codeColor {
color:red;
}
</style>
<p>然后准备把这个样式应用到label上，这时如果是HtmlHelper就很有可能会被问：“class写在哪”，估计许多多少人都被问过。然后我们告诉他可以如许写：</p>
@Html.LabelFor(m=>m.Name,new {@class="codeColor"})
<p>前端工程师添加后达到了想要的效果，但同时表现记不住这个写法，下次可能还会问。</p>
<p>如果是TagHelper就方便了，告诉他可以像平时给Html的标签添加class一样操纵即可，也就是：</p>
<label asp-for="Name" class="codeColor"></label>
<p>前端工程师表现这种写法“真是太友好了”。同样对于Form及验证，比力一下两种写法的差别，HtmlHelper版：</p>
@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="提交" />
}
<p>TagHelper版：</p>
<form asp-action="Index" asp-controller="Home" method="post">
<label asp-for="Code"></label>
<input asp-for="Code" />
for="Code">
<input type="submit" value="提交" />
</form>
<h1>二、自界说TagHelper</h1>
<p>现在有如许的需求，用于表现Book的编号的label不止要添加名为codeColor的css样式，还要给书的编号自动添加一个前缀，例如“BJ”。</p>
<p>对于如许的需求，盼望可以通过一个简单的标记，然后由TagHelper自动实现。例如：</p>
<label show-type="bookCode">1001</label>
<p>自界说了一个属性“show-type”，用于标识这个label的表现种别，“1001”为假定的图书编号。通过如许的设置方式，未来如果需求有变革，必要对编号的表现做更多的修饰，只需修改对应的TagHelper即可，而页面部门不必要做任何调整。</p>
<p>体系提供了方便的自界说TagHelper的方式，就是继续体系提供的TagHelper类，并重写它的Process/ProcessAsync方法，例如下面的例子：</p>
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);
}
}
}
}
<p>起首判断label是否被设置了show-type="bookCode"，然后获取当前label的Content内容，将其添加前缀“BJ”后作为此label的Content的新内容。注意一下Content的获取方式，如果它没有被修改，凭感觉直接通过output.Content.GetContent()获取到的内容是空的。</p>
<p>访问index页面，可以看到改标签已被处置处罚，如下图：</p>
<p><div align="center"></div></p>
<p>备注：a.关于获取show-type的值，还可以有其他方式，下文会讲到。</p>
<p>b.从规范化定名的角度，建议将自界说的TagHelper其定名为XXXagHelper如许的格式。</p>
<h1>三、TagHelper的注册</h1>
<p>TagHelper自界说之后必要将其注册一下，否则它是不会收效的。打开_ViewImports.cshtml，默认为：</p>
@using TagHelperDemo
@using TagHelperDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<p>在最下面添加一条</p>
@addTagHelper *, TagHelperDemo
<p>末了添加的这一句话是什么意思呢？也就是将步伐集TagHelperDemo（即第二个参数）中的全部TagHelper（第一个参数为“*”，即全部）全部启用。如果还界说了一个PasswordTagHelper，但只想只添加LabelTagHelper，可以如许写：</p>
@addTagHelper TagHelperDemo.TagHelpers. LabelTagHelper, TagHelperDemo
<p>如果想添加全部自界说的TagHelper，但要去除LabelTagHelper呢？</p>
<p>那么可以先添加全部，再去除这个LabelTagHelper。</p>
@addTagHelper *, TagHelperDemo
@removeTagHelper TagHelperDemo.TagHelpers. LabelTagHelper, TagHelperDemo
<h1>四、TagHelper的作用范围</h1>
<p>在项目中，可能不止利用label标签来表现Book的Code，另有可能会是p、span等范例的标签，现在的需求是，无论是上述哪一种标签，都要实现添加css和前缀的功能。</p>
<p>现在将index.cshtml中新增一个p标签如下：</p>
<p show-type="bookCode">1002</p>
<p>访问这个页面发现1002未被处置处罚。这是由于我们界说的TagHelper名为LabelTagHelper，在默认的环境下只会处置处罚label标签。固然也可以做特殊设置，例如下面代码的写法：</p>
public class LabelTagHelper : TagHelper
{
//代码省略
}
<p>通过“”指定本TagHelper只能被利用于p标签。再次访问此页面，发现p标签被处置处罚了，而label未被处置处罚。这分析如许的显式指定的优先级要高于默认的名称匹配。除了设置指定标签，还可以有一些其他的辅助设置：</p>
public class LabelTagHelper : TagHelper
<p>可以如许写，会匹配p标签，要求该标签拥有show-type属性，并且父标签为div。这几个条件是“and”的关系。如果还想匹配label标签，可以添加对label的设置，例如下面代码如许：</p>
public class LabelTagHelper : TagHelper
<p>这两个HtmlTargetElement的关系是“or”。通过如许的设置，可以极大的缩小目的标签的范围。</p>
<p>但是如许设置之后，这个TagHelper的名字再叫LabelTagHelper就不符合了，例如可以改为BookCodeTagHelper，最终代码如下：</p>
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);
}
}
}
}
<p>如果想使个别Html标签屏蔽TagHelper的作用，可以利用“!”。例如下面两个标签：</p>
<!label show-type="bookCode">1001</label>
<h1>五、自界说标签</h1>
<p>上一节最终形成了一个名为BookCodeTagHelper的TagHelper，我们知道LabelTagHelper是可以按名称默认匹配label标签的，那么是否可以自界说一个BookCode标签呢？在index.cshtml中添加如许的代码：</p>
<BookCode>1003</BookCode>
<p> </p>
<p>由于自界说bookcode标签的目的就是专门表现Book的Code，所以也不必添加show-type属性了。然后修改BookCodeTagHelper，修改后的代码如下：</p>
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);
}
}
<p> </p>
<p>去掉了两个HtmlTargetElement设置并取消了对show-type的判断，访问index页面查看新建的bookcode标签是否会被处置处罚，效果是没有被处置处罚。这是为什么呢？</p>
<p>这是由于TagHelper会将接纳Pascal 巨细写格式的类和属性名将转换为各自相应的短横线格式。即“BookCode”对应“book-code”，获取标签的属性值，同样遵循如许的规则。所以将标签改为如下写法即可：</p>
<book-code>1003</book-code>
<p>再次运行测试，发现这个新标签被成功处置处罚。查看网页源代码，被处置处罚后的Html代码是如许的：</p>
<book-code class="codeColor">TJ1003</book-code>
<p>如果想将其改变为label，可以在BookCodeTagHelper中通过指定TagName实现：</p>
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);
}
}
<h1>六、TagHelper与页面之间的数据转达</h1>
<p>如果现在的新需求是图书编码的前缀不再固定为“BJ”了，必要在标签中界说，例如如许：</p>
<book-code prefix="SH">1003</book-code>
<p>必要获取prefix的值，在上面的例子中接纳的是TryGetAttribute方法，实在另有简单的方式，修改BookCodeTagHelper，代码如下：</p>
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);
}
}
<p>标签中的prefix的值会自动赋值给BookCodeTagHelper.Prefix，是不是更方便了。那么如果是Model中的值呢？如果Book类有一个属性“public string Prefix { get; set; } ”，这和传入一个字符串没什么区别，那么可以如许写：</p>
<book-code prefix="@Model.Prefix">1003</book-code>
<p>这种传值方式不止是支持字符串，将Model整体传入也是支持的，将标签修改如下：</p>
<book-code book="@Model">1003</book-code>
<p>修改BookCodeTagHelper代码：</p>
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);
}
}
<h1>七、取消标签输出</h1>
<p>前面的几个例子都是对满意条件的标签的修改，TagHelper也可以取消对应标签的输出，例如存在如许一个标签：</p>
<div simple-type="Simple1"></div>
<p>如果不想让它出现在天生的Html中，可以如许处置处罚：</p>
public class Simple1TagHelpers : TagHelper
{
public string SimpleType { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
if (SimpleType.Equals("Simple1"))//可以是其他一些判断规则
{
output.SuppressOutput();
}
}
}
<h1>八、TagBuilder</h1>
<p>在TagHelper中，可以用TagBuilder来辅助天生标签，例如存在如下两个div：</p>
<div simple-type="Simple2"></div>
<div simple-type="Simple3"></div>
<p>想在div中添加Html元素可以如许写：</p>
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);
}
}
}
<p>通过TagBuilder天生了一个新的p标签，并将它插入到div中。</p>
<p> </p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/FlyLolo/archive/2019/09/25/ASPNETCore_25.html" target="_blank">https://www.cnblogs.com/FlyLolo/archive/2019/09/25/ASPNETCore_25.html</a>
页:
[1]