<!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>
每一个 "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 元素字体
你可以在 工具 > 选项 > 环境 > 字体和颜色 中自定义字体和颜色:
Authoring Tag Helpers
Working with Forms (Tag Helpers)
TagHelperSamples on GitHub包含与 Bootstrap一起工作的 Tag Helper 示例。
由于水平有限,错漏之处在所难免,欢迎大家批评指正,不胜感激,我们将及时修正。
dotNet Core Studying Group:436035237