Tag Helpers 的使用介绍

什么是 Tag Helpers ？

在 Razor 文件中，Tag Helpers 可以让服务端代码参与建立和渲染 HTML 元素。例如，内置的ImageTagHelper可以在图像名称后面追加版本号。每当图像变化时，服务器为图像生成一个新的惟一的版本，所以保证客户端获得当前图像（而不是旧的缓存图像）。对于常见任务有许多内置的 Tag Helpers - 好比建立表单，连接，加载资产以及更多 - 在公共的 Github 存储库中的和以 NuGet 包的方式存在的可用资源。在 C# 里编写 Tag Helpers，它们的目标是基于元素名称，特性名称或者父标签的 HTML 元素。例如，当 LabelTagHelper 特性被应用时，内置的LabelTagHelper可以做用于 HTML <label> 元素。若是你熟悉 HTML Helpers，Tag Helpers 在 Razor 视图中减小 HTML 和 C# 之间的显示转换。 Tag Helpers 和 HTML Helpers 比较 解释了更详细的差别。

Tag Helpers 提供了什么

一种 HTML-friendly 的开发体验
在大多数状况下，Razor 标记使用 Tag Helpers 看起来更像标准的 HTML。熟悉 HTML/CSS/JavaScript 的前端设计师在没有学习 C# Razor 语法的状况下可以编辑 Razor 。

一个丰富的智能感知环境来建立 HTML 和 Razor 标记
这和 HTML Helpers 有明显的对比，前一种方法在服务端建立 Razor 视图中的标记。 Tag Helpers 和 HTML Helpers 比较 讲解了更详细的差别。Tag Helpers 智能感知支持 讲解了智能感知环境。

一种使用仅在服务器上可用的信息让你更高效而且可以生成更强大，可靠和可维护代码的方式

例如，在以前当你更改图像的时候，更新图像的原则是更改图像的名称。出于性能缘由应该主动缓存图像，除非你改变图像的名称，你的客户端有获得一份过时的副本的风险。在以前，一个图像被编辑后，它的名称必须改变而且在网络应用程序中图像的每个引用都须要更新。这不只是体力活，同时也容易出错（你可能漏掉一个引用，意外的输入错误字符串等）。内置的 ImageTagHelper可以自动为你作这件事情。ImageTagHelper 可以在图像名称后追加一个版本号，每当图像变化时，服务器为图像自动生成一个新的惟一的版本。客户端被保证获得当前的图像。经过使用 ImageTagHelper 这种健壮性和节省劳力基本上是无偿的。

大多数内置的 Tag Helpers 指向现有的 HTML 元素而且为这些元素提供服务端特性。例如：在Views/Account 文件夹下的许多视图中使用的 <input> 元素包含了 asp-for 属性，提取指定模型的属性名称到呈现的 HTML 中。Razor 标记以下：

复制代码

<label asp-for="Email"></label>

 

生成如下的 HTML :

复制代码

<label for="Email">Email</label>

 

asp-for 特性由在 LabelTagHelper 中的 For 属性提供。查看 :doc:authoring 获取更多信息。

 

管理 Tag Helper 范围

Tag Helpers 的范围由 @addTagHelper 和 @removeTagHelper 进行控制，而且 "!" 为退出字符。

 

@addTagHelper 使 Tag Helpers 可用

若是你建立一个新的 ASP.NET Core web 应用，命名为 AuthoringTagHelpers （无身份认证），下面的 *Views/_ViewImports.cshtml* 文件将被添加到你的项目：

复制代码

@using AuthoringTagHelpers
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers // 手动高亮

 

@addTagHelper 指令使 Tag Helpers 在视图中可用。在这种状况下，视图文件是 *Views/_ViewImports.cshtml* ，默认继承全部的在 Views 和子目录中的视图文件；使 Tag Helpers 可用。上面的代码使用通配符 ("") 来指定在特定程序集（Microsoft.AspNetCore.Mvc.TagHelpers）中的全部的 Tag Helpers 在每个 Views* 目录和子目录中的视图文件中可用。 @addTagHelper 后面的第一个参数指定要加载的 Tag Helpers （对于全部 Tag Helpers，咱们使用 “”），第二个参数 “Microsoft.AspNetCore.Mvc.TagHelpers” 指定包含 Tag Helpers 的程序集。Microsoft.AspNetCore.Mvc.TagHelpers* 是内置的 ASP.NET Core Tag Helpers 程序集。

这个项目中，为了暴露全部的Tag Helpers（建立一个名称为 AuthoringTagHelpers 的程序集），你能够像下面同样使用：

复制代码

@using AuthoringTagHelpers
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper "*, AuthoringTagHelpers" // 手动高亮

 

若是你的项目包含一个使用默认命名空间(AuthoringTagHelpers.TagHelpers.EmailTagHelper)的 EmailTagHelper ，你能够对 Tag Helper 提供彻底限定名（FQN）：

复制代码

@using AuthoringTagHelpers
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper "AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers" // 手动高亮

 

为了使用 FQN 在视图中添加一个 Tag Helper，你首先添加 FQN （AuthoringTagHelpers.TagHelpers.EmailTagHelper），而后是程序集名称（AuthoringTagHelpers）。大多数开发者喜欢使用 "*" 通配符语法。通配符语法容许你在 FQN 中插入通配符 "*" 做为后缀。例如，下列指令将在 EmailTagHelper 中引入：

复制代码

@addTagHelper "AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers" @addTagHelper "AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers"

 

像前面说的，添加 @addTagHelper 指令到 *Views/_ViewImports.cshtml* 文件使 Tag Helper 可用于Views 目录和子目录中的全部视图文件。若是你想选择在特定的视图文件中暴露 Tag Helper ，你能够在这些视图文件中使用 @addTagHelper 指令。

 

@removeTagHelper 删除 Tag Helpers

@removeTagHelper 具备和 @addTagHelper 相同的两个参数，而且它删除以前添加的一个 Tag Helper 。例如： @removeTagHelper 应用于从特定的视图中移除特定的 Tag Helper 。在 *Views/Folder/_ViewImports.cshtml* 中使用 @removeTagHelper 删除 Folder 中全部视图中特定的 Tag Helper 。

 

在 *_ViewImports.cshtml* 中控制 Tag Helper 的范围

你能够在任何视图文件夹中添加一个 *_ViewImports.cshtml* ，而且视图引擎添加 *_ViewImports.cshtml* 文件中的指令到包含它们的 *Views/_ViewImports.cshtml* 文件中。若是你为Home 视图添加一个空 *Views/Home/_ViewImports.cshtml* 文件，它们不会有任何变化由于 *_ViewImports.cshtml* 文件是追加的。你添加到 *Views/Home/_ViewImports.cshtml* 文件（不是默认的 *Views/_ViewImports.cshtml* 文件）的任何 @addTagHelper 指令将会只在 Home 文件夹中公开这些 Tag Helpers 。

 

禁用个别元素

你能够在元素级别禁用带有退出符（"!"）的标签助手。例如：在 <span> 中带有退出字符的 Email 验证被禁用：

复制代码

<!span asp-validation-for="Email" class="text-danger"></!span>

 

你必须使用 Tag Helper 退出字符来打开和关闭标签。（当你添加一个打开标签时， Visual Studio 编辑器自动添加退出字符来关闭标签）。在你添加退出字符以后，元素和 Tag Helper 特性将再也不以特殊的字体显示。

 

使用 @tagHelperPrefix 让 Tag Helper 用法明确

@tagHelperPrefix 指令容许你指定一个标签前缀来启用 Tag Helper 支持和使 Tag Helper 用法明确。在下面的代码图片中，Tag Helper 前缀设置为 th:，所以只有那些使用前缀 th: 的元素支持 Tag Helpers （Tag Helper可用的元素有独特的字体）。 <label> 和 <input> 元素使用 Tag Helper 前缀而且 Tag Helper 可用， <span> 元素不能使用 Tag Helper。

同一层次的规则适用于 @addTagHelper 也适用于 @tagHelperPrefix。

 

Tag Helpers 智能感知支持

当你在 Visual Studio 中建立一个新的 ASP.NET web 应用，在 project.json 文件中添加 "Microsoft.AspNetCore.Razor.Tools" 。这是添加 Tag Helper 工具的包。

考虑写一个 HTML <label> 元素。在 Visual Studio 编辑器中你一进入 <l ，智能感知显示匹配的元素：

你获得的不只仅是 HTML 的帮助，并且图标（下面含有“<>” 的“@”符号）。

有针对性的经过 Tag Helpers 标识元素。纯 HTML 元素（如 fieldset）显示 "<>" 图标。

一个纯 HTML <label> 标签使用棕色字体显示 HTML 标签（默认的 Visual Studio 颜色主题），特性使用红色，特性值使用蓝色。

在你输入 <label 后，智能感知列出可用的 HTML/CSS 特性和 Tag Helper 目标特性：

智能感知语句完成容许你输入 tab 键来完成所选值的语句：

一旦你输入了一个 Tag Helper 特性，标签和属性的字体改变。使用 Visual Studio 默认的 "Blue" 或 "Light" 颜色主题，字体是醒目的紫色。若是你使用 "Dark" 主题，字体是醒目的蓝绿色。在这个文档中的图片使用的是默认的主题。

你能够在双引号（""）里输入 Visual Studio 的 CompleteWord 快捷键（ 默认的 是 Ctrl +spacebar ），你如今在 C# 中，就像你在一个 C# 类中。智能感知显示页面模型的全部方法和属性。方法和属性能被使用由于属性类型是 ModelExpression。在下面的图片中，我编辑 Register 视图，因此 RegisterViewModel 是可用的。

智能感知列出模型在页面上可用的属性和方法。丰富的智能感知环境帮助你选择 CSS class：

 

Tag Helpers 和 HTML Helpers 比较

Tag Helpers 在 Razor 视图中附加到 HTML 元素，而 `HTML Helpers 在 Razor 视图中做为穿插到 HTML 的方法被调用。考虑下面的 Razor 标记，它建立一个带有 "caption" CSS class的HTML label 标签：

复制代码

@Html.Label("FirstName", "First Name:", new {@class="caption"})

 

at (@) 符号告诉 Razor 这是代码的开始。接下来的两个参数（"FirstName" 和 "First Name:"）是字符串，因此 `IntelliSense 不能帮助。最后的参数：

复制代码

new {@class="caption"}

 

是一个用于表示特性的匿名对象。由于 class 是一个 C# 的保留关键字，使用 @ 符号强制 C# 解释"@class=" 做为一个符号（属性名称）。对于一个前端设计师（一些人熟悉 HTML/CSS/JavaScript 和其余客户端技术可是不熟悉 C# 和 Razor）来说，该行的大部分是陌生的。整行必须在没有智能感知的帮助下编写。

使用 LabelTagHelper，相同的标记能够被写为：

使用 Tag Helper 的版本，一旦你在 Visual Studio 编辑器输入 <l，智能感知显示匹配的元素：

智能感知帮助你写整行代码。 LabelTagHelper 也默认设置 asp-for 特性值（"FirstName"）的内容到 "First Name"；它转换驼峰名称属性到由每个首字母大写的属性名称组成的句子。在下面的标记中：

生成：

复制代码

<label class="caption" for="FirstName">First Name</label>

 

若是你想添加内容到 <label> 中，camel-cased 到 sentence-cased 的内容不被使用。例如：

生成：

复制代码

<label class="caption" for="FirstName">Name First</label>

 

下面的代码图片展现了从传统的包含在 Visual Studio 2015 中的 ASP.NET 4.5.x MVC 的模版生成的Views/Account/Register.cshtml Razor 视图的表单部分。

Visual Studio 编辑器使用灰色背景显示 C# 代码。例如， AntiForgeryToken HTML Helper：

复制代码

@Html.AntiForgeryToken()

 

被灰色背景显示。在 Register 视图中大部分标记是 C#。与使用 Tag Helpers 的等效方法比较：

和 HTML Helpers 方法相比，这些标记干净的多而且更容易阅读，编辑和维护。C# 代码减小到服务器须要知道的最小值。 Visual Studio 编辑器经过一个独特的字体显示标记的目标。

考虑 Email 组：

复制代码

<div class="form-group"> <label asp-for="Email" class="col-md-2 control-label"></label> <div class="col-md-10"> <input asp-for="Email" class="form-control" /> <span asp-validation-for="Email" class="text-danger"></span> </div> </div>

 

每个 "asp-" 特性都有一个 "Email" 值，可是 "Email" 不是字符串。在这个上下文， "Email" 是对于 RegisterViewModel 的 C# 模型表达式属性。

使用Tag Helper 注册表单中的方法，Visual Studio 编辑器会帮助你编写 全部 标记，而Visual Studio 没有给 HTML Helpers 方法的代码提供帮助 IntelliSense support for Tag Helpers_ 详细介绍 Tag Helpers 在 Visual Studio 编辑器中的工做。

 

Tag Helpers 和 Web 服务器控件比较

• Tag Helpers 不拥有它们所关联的元素，它们只简单的参与元素和内容的渲染。ASP.NETWeb Server controls声明而且在页面上调用。

• `Web 服务器控件有一个不同的生命周期使得开发和调试困难。

• Web 服务器控件容许你给经过客户端控件给客户端文档对象模型（ocument Object Model ，DOM）添加功能。Tag Helpers 不具备 DOM。

• Web 服务器控件包含自动的浏览器检测。 Tag Helpers 不能识别浏览器。

• 多个 Tag Helpers 能够做用在相同的元素，而你一般不能构成 Web 服务器控件。

• Tag Helpers 能够修改在它们范围内的标签和 HTML 元素的内容，可是不直接修改页面上的任何内容。 Web 服务器控件有一个较小的特定范围，能够执行影响页面其余部分的操做，从而形成非预期的反作用。

• Web 服务器控件使用类型转换器（type converters）转换字符串到对象。使用 Tag Helpers，你自己就使用 C# 工做，因此你不须要作类型转换。

• Web 服务器控件使用 System.ComponentModel实现组件和控件的运行时和设计时行为。 System.ComponentModel 包括用于实现属性和类型转换器的基类和接口，绑定到数据源和受权组件。和 Tag Helpers 对比，一般来自 TagHelper，而且 TagHelper 基类只公开两个方法 Process 和 ProcessAsync。

 

自定义 Tag Helper 元素字体

你能够在 工具 > 选项 > 环境 > 字体和颜色 中自定义字体和颜色：