介绍

标签助手使我们能够运行服务器端代码来在Razor View中生成HTML，CSS，Javascript代码。在我之前的文章中，我已经谈到了标签助手，表单标签助手和其他常用标签助手。在本文中，我将解释如何在ASP.NET Core MVC中创建自定义标签助手。

使用标签助手，我们可以扩展现有的HTML元素或创建自己的自定义HTML元素。自定义标签助手只是实现ITagHelper接口的类。但是，.NET Core MVC为我们提供了这个接口的实现。

要创建自定义标签助手，第一步是创建一个从“TagHelper”类继承的类。这个类有一个虚拟的方法来生成HTML标签。它包含虚拟方法的同步（Process）和异步（ProcessAsync）实现。

publicvirtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output);

publicvirtualvoid Process(TagHelperContext context, TagHelperOutput output);

根据我们的要求，我们可以实现这两个或两个之一。Process方法（或ProcessAsync）负责生成浏览器呈现的HTML。它接收标签助手实例和TegHelperOuter的上下文，我们可以使用它来读取和更改范围内的标签助手的内容。

例

在下面的例子中，我创建了一个简单的标签助手，它会在我们提供的文本中生成<my-first-tag-helper> </ my-first-tag-helper>标签助手。

使用HtmlTargetElement属性，我们可以提供一个标签帮手目标。它传递一个属性参数，该参数指定包含名称为“my-first-tag-helper”的HTML属性的HTML元素。它将匹配并处理将要运行的类中的重写方法。

TagHelper

namespace CustomTagHelper.TagHelpers

{

using Microsoft.AspNetCore.Razor.TagHelpers;

using System.Text;

[HtmlTargetElement("my-first-tag-helper")]

publicclass MyCustomTagHelper : TagHelper

{

public string Name { get; set; }

public override void Process(TagHelperContext context, TagHelperOutput output)

{

output.TagName = "CustumTagHelper";

output.TagMode = TagMode.StartTagAndEndTag;

var sb = new StringBuilder();

sb.AppendFormat("<span>Hi! {0}</span>", this.Name);

output.PreContent.SetHtmlContent(sb.ToString());

}

}

}

下一步是将标签助手注册到_ViewImports.cshtml文件中。如果我们在View文件夹的根目录下添加这个文件并注册我们的标签帮助程序，那么它将可用于“查看”文件夹下的所有视图。在这个例子中，我已经注册了“*”，所以它会在程序集中添加所有的标签助手。

_ViewImports.cshtml

@addTagHelper *，CustomTagHelper

接下来，我们需要使用我们的标签帮手进入查看。Visual Studio对标签助手提供了丰富的智能支持。

Index.cshtml

<div class = “row” >

<my-first-tag-helper name = “Jignesh Trivedi” >

</我的 - 第一标签辅助>

</ DIV>

Output

将模型数据传递给标签助手

我们也可以通过创建“ModelExpression”类型的属性，通过模型绑定将模型数据传递给标签帮助器。使用HtmlAttributeName属性，我们可以创建一个友好的属性名称。

ModelExpression描述了一个传递给标签帮助器的模型表达式。使用这个类的Model属性，我们可以得到感兴趣表达的模型对象。

在下面的例子中，我创建了一个标签助手来显示员工的详细信息，例如姓名和职位。在这里，我创建了两个模型表达式的属性：EmployeeName和Designation。在Process方法中，我使用了这些属性并创建了分配给输出的HTML。从视图中，我已经传递了EmployeeViewModel的属性名称，标记助手将评估模型属性的值，以便在需要时使用该值。

Tag Helper

namespace CustomTagHelper.TagHelpers

{

using Microsoft.AspNetCore.Mvc.ViewFeatures;

using Microsoft.AspNetCore.Razor.TagHelpers;

using System.Text;

[HtmlTargetElement("employee-details")]

publicclass EmployeeDetailTagHelper : TagHelper

{

[HtmlAttributeName("for-name")]

public ModelExpression EmployeeName { get; set; }

[HtmlAttributeName("for-designation")]

public ModelExpression Designation { get; set; }

public override void Process(TagHelperContext context, TagHelperOutput output)

{

output.TagName = "EmployeeDetails";

output.TagMode = TagMode.StartTagAndEndTag;

var sb = new StringBuilder();

sb.AppendFormat("<span>Name: {0}</span> <br/>", this.EmployeeName.Model);

sb.AppendFormat("<span>Designation: {0}</span>", this.Designation.Model);

output.PreContent.SetHtmlContent(sb.ToString());

}

}

}

Model

namespace CustomTagHelper.Models

{

using System.ComponentModel.DataAnnotations;

publicclass EmployeeViewModel

{

public string Name { get; set; }

public string Designation { get; set; }

}

}

Controller

public IActionResult Index1()

{

EmployeeViewModel e = new EmployeeViewModel();

e.Name = "Jignesh Trivedi";

e.Designation = "Senior Consultant";

return View(e);

}

View

@model CustomTagHelper.Models.EmployeeViewModel

<div class="row">

<employee-details for-name ="Name"for-designation="Designation"></employee-details>

</div>

Output

我们可以在标签帮助器中使用ViewContext类型来访问View的上下文信息，比如ModelState，HttpContext等。这是通过使用ViewContext属性和类型来完成的，通过声明属性类型到ViewContext并使用ViewContext属性进行注释。如果使用HttpAttributeNotBound属性进行注释，则属性不应绑定到标记助手的HTML属性。

例

[HtmlAttributeNotBound]

[ViewContext]

public ViewContext ViewContext { get; set; }

我们可以使用ProcessAsync方法异步执行给定上下文的标签助手。这个实现和Process方法是一样的，但是我们可以从这个方法中调用其他的异步方法并且等到它完成。

例

public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)

{

}

概要

借助标签助手，我们可以扩展现有的元素或创建新的元素。标签助手允许我们创建可重用的属性或元素。标签助手也遵循MVC命名约定（例如 - 控制器）。它为MVC提供了标签助手类的方法和属性。