ASP.NET Core 中的标记帮助程序Tag Helpers in ASP.NET Core

作者:Rick AndersonBy Rick Anderson

什么是标记帮助程序What are Tag Helpers

标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. 例如,内置 ImageTagHelper 可以将版本号追加到图像名称。For example, the built-in ImageTagHelper can append a version number to the image name. 每当图像发生变化时,服务器都会为图像生成一个新的唯一版本,因此客户端总能获得当前图像(而不是过时的缓存图像)。Whenever the image changes, the server generates a new unique version for the image, so clients are guaranteed to get the current image (instead of a stale cached image). 有多种常见任务(例如创建表单、链接,加载资产等)的内置标记帮助程序,公共 GitHub 存储库和 NuGet 包中甚至还有更多可用标记帮助程序。There are many built-in Tag Helpers for common tasks - such as creating forms, links, loading assets and more - and even more available in public GitHub repositories and as NuGet packages. 标记帮助程序使用 C# 创建,基于元素名称、属性名称或父标记以 HTML 元素为目标。Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. 例如,应用 LabelTagHelper 属性时,内置 LabelTagHelper 可以 HTML <label> 元素为目标。For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied. 如果你熟悉 Html 帮助器,标记帮助程序将减少视图中 HTML 和 c # 之间的显式转换 Razor 。If you're familiar with HTML Helpers, Tag Helpers reduce the explicit transitions between HTML and C# in Razor views. 在很多情况下,HTML 帮助程序为特定标记帮助程序提供了一种替代方法,但标记帮助程序不会替代 HTML 帮助程序,且并非每个 HTML 帮助程序都有对应的标记帮助程序,认识到这点也很重要。In many cases, HTML Helpers provide an alternative approach to a specific Tag Helper, but it's important to recognize that Tag Helpers don't replace HTML Helpers and there's not a Tag Helper for each HTML Helper. 标记帮助程序与 HTML 帮助程序的比较更详细地介绍了两者之间的差异。Tag Helpers compared to HTML Helpers explains the differences in more detail.

标记帮助程序的功能What Tag Helpers provide

HTML 友好的开发体验 大多数情况下, Razor 使用标记帮助程序的标记看起来像标准 HTML。An HTML-friendly development experience For the most part, Razor markup using Tag Helpers looks like standard HTML. 具有 HTML/CSS/JavaScript 的前端设计器熟悉可以在 Razor 不学习 c # 语法的情况下进行编辑 Razor 。Front-end designers conversant with HTML/CSS/JavaScript can edit Razor without learning C# Razor syntax.

用于创建 html 和 Razor 标记的丰富 IntelliSense 环境 此功能与 html 帮助程序的比较清晰,后者是在视图中服务器端创建标记的方法 Razor 。A rich IntelliSense environment for creating HTML and Razor markup This is in sharp contrast to HTML Helpers, the previous approach to server-side creation of markup in Razor views. 标记帮助程序与 HTML 帮助程序的比较更详细地介绍了两者之间的差异。Tag Helpers compared to HTML Helpers explains the differences in more detail. 标记帮助程序的 IntelliSense 支持解释了 IntelliSense 环境。IntelliSense support for Tag Helpers explains the IntelliSense environment. 即使是经验丰富的开发人员, Razor 使用标记帮助程序也比编写 c # 标记更高效 Razor 。Even developers experienced with Razor C# syntax are more productive using Tag Helpers than writing C# Razor markup.

使用仅在服务器上可用的信息,可提高生产力,并能生成更稳定、可靠和可维护的代码 例如,过去更新图像时,必须在更改图像时更改图像名称。A way to make you more productive and able to produce more robust, reliable, and maintainable code using information only available on the server For example, historically the mantra on updating images was to change the name of the image when you change the image. 出于性能原因,要主动缓存图像,而若不更改图像的名称,客户端就可能获得过时的副本。Images should be aggressively cached for performance reasons, and unless you change the name of an image, you risk clients getting a stale copy. 以前,编辑完图像后,必须更改名称,而且需要更新 Web 应用中对该图像的每个引用。Historically, after an image was edited, the name had to be changed and each reference to the image in the web app needed to be updated. 这不仅非常耗费人力,而且还容易出错 (你可能会错过引用、意外输入错误的字符串等。 ) 内置 ImageTagHelper 可自动为你执行此操作。Not only is this very labor intensive, it's also error prone (you could miss a reference, accidentally enter the wrong string, etc.) The built-in ImageTagHelper can do this for you automatically. ImageTagHelper 可将版本号追加到图像名称,这样每当图像出现更改时,服务器都会自动为该图像生成新的唯一版本。The ImageTagHelper can append a version number to the image name, so whenever the image changes, the server automatically generates a new unique version for the image. 客户端总是能获得最新图像。Clients are guaranteed to get the current image. 使用 ImageTagHelper 实质上是免费获得稳健性而节省劳动力。This robustness and labor savings comes essentially free by using the ImageTagHelper.

大多数内置标记帮助程序以标准 HTML 元素为目标,为该元素提供服务器端属性。Most built-in Tag Helpers target standard HTML elements and provide server-side attributes for the element. 例如,<input> 用于包含 asp-for 特性的“视图/帐户”文件夹中的很多视图 。For example, the <input> element used in many views in the Views/Account folder contains the asp-for attribute. 此特性将指定模型属性的名称提取至所呈现的 HTML。This attribute extracts the name of the specified model property into the rendered HTML. 请考虑 Razor 具有以下模型的视图:Consider a Razor view with the following model:

public class Movie
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }

以下 Razor 标记:The following Razor markup:

<label asp-for="Movie.Title"></label>

则会生成以下 HTML:Generates the following HTML:

<label for="Movie_Title">Title</label>

通过 LabelTagHelper 中的 For 属性,可使用 asp-for 特性。The asp-for attribute is made available by the For property in the LabelTagHelper. 请参阅创作标记帮助程序,获取详细信息。See Author Tag Helpers for more information.

管理标记帮助程序作用域Managing Tag Helper scope

标记帮助程序作用域由 @addTagHelper@removeTagHelper 和“!”选择退出字符联合控制。Tag Helpers scope is controlled by a combination of @addTagHelper, @removeTagHelper, and the "!" opt-out character.

使用 @addTagHelper 添加标记帮助程序@addTagHelper makes Tag Helpers available

如果创建名为 AuthoringTagHelpers 的新 ASP.NET Core Web 应用,将向项目添加以下 Views/_ViewImports.cshtml 文件 :If you create a new ASP.NET Core web app named AuthoringTagHelpers , the following Views/_ViewImports.cshtml file will be added to your project:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

@addTagHelper 指令让视图可以使用标记帮助程序。The @addTagHelper directive makes Tag Helpers available to the view. 在这种情况下,视图文件是 pages/_ViewImports ,默认情况下,它由 pages 文件夹和子文件夹中的所有文件继承;使标记帮助程序可用。In this case, the view file is Pages/_ViewImports.cshtml , which by default is inherited by all files in the Pages folder and subfolders; making Tag Helpers available. 上面的代码使用通配符语法 ( " * " ) 来指定指定程序集中的所有标记帮助器 ( microsoft.aspnetcore.mvc.taghelpers ) 将对 Views 目录或子目录中的每个视图文件可用。The code above uses the wildcard syntax ("*") to specify that all Tag Helpers in the specified assembly ( Microsoft.AspNetCore.Mvc.TagHelpers ) will be available to every view file in the Views directory or subdirectory. @addTagHelper 后第一个参数指定要加载的标记帮助程序(我们使用“*”指定加载所有标记帮助程序),第二个参数“Microsoft.AspNetCore.Mvc.TagHelpers”指定包含标记帮助程序的程序集。The first parameter after @addTagHelper specifies the Tag Helpers to load (we are using "*" for all Tag Helpers), and the second parameter "Microsoft.AspNetCore.Mvc.TagHelpers" specifies the assembly containing the Tag Helpers. Microsoft.AspNetCore.Mvc.TagHelpers 是内置 ASP.NET Core 标记帮助程序的程序集。 Microsoft.AspNetCore.Mvc.TagHelpers is the assembly for the built-in ASP.NET Core Tag Helpers.

要公开此项目中的所有标记帮助程序(将创建名为 AuthoringTagHelpers 的程序集),可使用以下内容: To expose all of the Tag Helpers in this project (which creates an assembly named AuthoringTagHelpers ), you would use the following:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

如果项目包含具有默认命名空间 (AuthoringTagHelpers.TagHelpers.EmailTagHelper) 的 EmailTagHelper,则可提供标记帮助程序的完全限定名称 (FQN):If your project contains an EmailTagHelper with the default namespace (AuthoringTagHelpers.TagHelpers.EmailTagHelper), you can provide the fully qualified name (FQN) of the Tag Helper:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

若要使用 FQN 将标记帮助程序添加到视图,请首先添加 FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper),然后添加程序集名称 (AuthoringTagHelpers)。 To add a Tag Helper to a view using an FQN, you first add the FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), and then the assembly name ( AuthoringTagHelpers ). 大多数开发人员更喜欢使用“*”通配符语法。Most developers prefer to use the "*" wildcard syntax. 使用通配符语法,可在 FQN 中插入通配符“*”作为后缀。The wildcard syntax allows you to insert the wildcard character "*" as the suffix in an FQN. 例如,以下任何指令都将引入 EmailTagHelperFor example, any of the following directives will bring in the EmailTagHelper:

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

如前文所述,将 @addTagHelper 指令添加到 views/_ViewImports cshtml 文件,使标记帮助程序可供 views 目录和子目录中的所有视图文件使用。As mentioned previously, adding the @addTagHelper directive to the Views/_ViewImports.cshtml file makes the Tag Helper available to all view files in the Views directory and subdirectories. 如果想选择仅对特定视图公开标记帮助程序,可在这些视图文件中使用 @addTagHelper 指令。You can use the @addTagHelper directive in specific view files if you want to opt-in to exposing the Tag Helper to only those views.

@removeTagHelper 删除标记帮助程序@removeTagHelper removes Tag Helpers

@removeTagHelper@addTagHelper 具有相同的两个参数,它会删除之前添加的标记帮助程序。The @removeTagHelper has the same two parameters as @addTagHelper, and it removes a Tag Helper that was previously added. 例如,应用于特定视图的 @removeTagHelper 会删除该视图中的指定标记帮助程序。For example, @removeTagHelper applied to a specific view removes the specified Tag Helper from the view. 在 Views/Folder/_ViewImports.cshtml 文件中使用 @removeTagHelper,将从 Folder 中的所有视图删除指定的标记帮助程序。 Using @removeTagHelper in a Views/Folder/_ViewImports.cshtml file removes the specified Tag Helper from all of the views in Folder .

使用 _ViewImports.cshtml 文件控制标记帮助程序作用域 Controlling Tag Helper scope with the _ViewImports.cshtml file

可将 _ViewImports.cshtml 添加到任何视图文件夹,视图引擎将同时应用该文件和 Views/_ViewImports.cshtml 文件中的指令。 You can add a _ViewImports.cshtml to any view folder, and the view engine applies the directives from both that file and the Views/_ViewImports.cshtml file. 如果为 Home 视图添加空的 Views/Home/_ViewImports.cshtml 文件,则不会发生任何更改,因为 _ViewImports.cshtml 文件是附加的。 If you added an empty Views/Home/_ViewImports.cshtml file for the Home views, there would be no change because the _ViewImports.cshtml file is additive. 添加到 Views/Home/_ViewImports.cshtml 文件(不在默认 Views/_ViewImports.cshtml 文件中)的任何 @addTagHelper 指令,都只会将这些标记帮助程序公开给 Home 文件夹中的视图。 Any @addTagHelper directives you add to the Views/Home/_ViewImports.cshtml file (that are not in the default Views/_ViewImports.cshtml file) would expose those Tag Helpers to views only in the Home folder.

选择退出各个元素Opting out of individual elements

使用标记帮助程序选择退出字符(“!”),可在元素级别禁用标记帮助程序。You can disable a Tag Helper at the element level with the Tag Helper opt-out character ("!"). 例如,使用标记帮助程序选择退出字符在 <span> 中禁用 Email 验证:For example, Email validation is disabled in the <span> with the Tag Helper opt-out character:

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

须将标记帮助程序选择退出字符应用于开始和结束标记。You must apply the Tag Helper opt-out character to the opening and closing tag. (将选择退出字符添加到开始标记时,Visual Studio 编辑器会自动为结束标记添加相应字符)。(The Visual Studio editor automatically adds the opt-out character to the closing tag when you add one to the opening tag). 添加选择退出字符后,元素和标记帮助程序属性不再以独特字体显示。After you add the opt-out character, the element and Tag Helper attributes are no longer displayed in a distinctive font.

使用 @tagHelperPrefix 阐明标记帮助程序用途Using @tagHelperPrefix to make Tag Helper usage explicit

@tagHelperPrefix 指令可指定一个标记前缀字符串,以启用标记帮助程序支持并阐明标记帮助程序用途。The @tagHelperPrefix directive allows you to specify a tag prefix string to enable Tag Helper support and to make Tag Helper usage explicit. 例如,可以将以下标记添加到 Views/_ViewImports.cshtml 文件: For example, you could add the following markup to the Views/_ViewImports.cshtml file:

@tagHelperPrefix th:

在以下代码图像中,标记帮助程序前缀设置为 th:,所以只有使用前缀 th: 的元素才支持标记帮助程序(可使用标记帮助程序的元素以独特字体显示)。In the code image below, the Tag Helper prefix is set to th:, so only those elements using the prefix th: support Tag Helpers (Tag Helper-enabled elements have a distinctive font). <label><input> 元素具有标记帮助程序前缀,可使用标记帮助程序,而 <span> 元素则相反。The <label> and <input> elements have the Tag Helper prefix and are Tag Helper-enabled, while the <span> element doesn't.


适用于 @addTagHelper 的层次结构规则也适用于 @tagHelperPrefixThe same hierarchy rules that apply to @addTagHelper also apply to @tagHelperPrefix.

自结束标记帮助程序Self-closing Tag Helpers

许多标记帮助程序都不能用作自结束标记。Many Tag Helpers can't be used as self-closing tags. 某些标记帮助程序被设计为自结束标记。Some Tag Helpers are designed to be self-closing tags. 使用未被设计为自结束的标记帮助程序会抑制呈现的输出。Using a Tag Helper that was not designed to be self-closing suppresses the rendered output. 自结束标记帮助程序会在呈现的输出中生成自结束标记。Self-closing a Tag Helper results in a self-closing tag in the rendered output. 有关详细信息,请在创作标记帮助程序中查看此问题For more information, see this note in Authoring Tag Helpers.

标记帮助程序属性/声明中的 C#C# in Tag Helpers attribute/declaration

标记帮助程序不允许在元素的属性或标记声明区域中出现 C#。Tag Helpers do not allow C# in the element's attribute or tag declaration area. 例如,以下代码是无效的:For example, the following code is not valid:

<input asp-for="LastName"  
       @(Model?.LicenseId == null ? "disabled" : string.Empty) />

前面的代码可以编写为:The preceding code can be written as:

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

标记帮助程序的 Intellisense 支持IntelliSense support for Tag Helpers

在 Visual Studio 中创建新的 ASP.NET Core web 应用时,它将添加 NuGet 包 "AspNetCore Razor "。工具 "。When you create a new ASP.NET Core web app in Visual Studio, it adds the NuGet package "Microsoft.AspNetCore.Razor.Tools". 这是添加标记帮助程序工具的包。This is the package that adds Tag Helper tooling.

请考虑编写 HTML <label> 元素。Consider writing an HTML <label> element. 只要在 Visual Studio 编辑器中输入 <l,IntelliSense 就会显示匹配的元素:As soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:


不仅会获得 HTML 帮助,还会有图标(下方带有“<>”的“@" symbol with ")Not only do you get HTML help, but the icon (the "@" symbol with "<>" under it).


将该元素标识为标记帮助程序的目标。identifies the element as targeted by Tag Helpers. 纯 HTML 元素(如 fieldset)显示“<>”图标。Pure HTML elements (such as the fieldset) display the "<>" icon.

纯 HTML <label> 标记以棕色字体显示 HTML 标记(使用默认 Visual Studio 颜色主题时),以红色字体显示属性,并以蓝色字体显示属性值。A pure HTML <label> tag displays the HTML tag (with the default Visual Studio color theme) in a brown font, the attributes in red, and the attribute values in blue.


输入 <label 后,IntelliSense 会列出可用的 HTML/CSS 属性和以标记帮助程序为目标的属性:After you enter <label, IntelliSense lists the available HTML/CSS attributes and the Tag Helper-targeted attributes:


通过 IntelliSense 语句完成功能,按 Tab 键即可用选择的值完成语句:IntelliSense statement completion allows you to enter the tab key to complete the statement with the selected value:


只要输入标记帮助程序属性,标记和属性字体就会更改。As soon as a Tag Helper attribute is entered, the tag and attribute fonts change. 如果使用默认的 Visual Studio“蓝色”或“浅色”颜色主题,则字体是粗体紫色。Using the default Visual Studio "Blue" or "Light" color theme, the font is bold purple. 如果使用“深色”主题,则字体为粗体青色。If you're using the "Dark" theme the font is bold teal. 本文档中的图像在使用默认主题时截取的。The images in this document were taken using the default theme.


可在双引号 ("") 内输入 Visual Studio CompleteWord 快捷方式( You can enter the Visual Studio CompleteWord shortcut (Ctrl +spacebar is the default inside the double quotes (""), and you are now in C#, just like you would be in a C# class. IntelliSense 会显示页面模型上的所有方法和属性。IntelliSense displays all the methods and properties on the page model. 由于属性类型是 ModelExpression,所以这些方法和属性可用。The methods and properties are available because the property type is ModelExpression. 在下图中,我正在编辑 Register 视图,所以 RegisterViewModel 是可用的。In the image below, I'm editing the Register view, so the RegisterViewModel is available.


IntelliSense 会列出页面上模型可用的属性和方法。IntelliSense lists the properties and methods available to the model on the page. 丰富 IntelliSense 环境可帮助选择 CSS 类:The rich IntelliSense environment helps you select the CSS class:



标记帮助程序与 HTML 帮助程序的比较Tag Helpers compared to HTML Helpers

标记帮助程序将附加到视图中的 HTML 元素 Razor ,而 HTML 帮助 器将作为与视图中的 html 交错的方法进行调用 Razor 。Tag Helpers attach to HTML elements in Razor views, while HTML Helpers are invoked as methods interspersed with HTML in Razor views. 请考虑以下 Razor 标记,该标记使用 CSS 类 "caption" 创建 HTML 标签:Consider the following Razor markup, which creates an HTML label with the CSS class "caption":

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

位于 (@) 符号指示 Razor 这是代码的开头。The at (@) symbol tells Razor this is the start of code. 接下来的两个参数(“FirstName”和“First Name:”)是字符串,所以 IntelliSense 无法提供帮助。The next two parameters ("FirstName" and "First Name:") are strings, so IntelliSense can't help. 最后一个参数:The last argument:

new {@class="caption"}

是用于表示属性的匿名对象。Is an anonymous object used to represent attributes. 由于 class 是 C# 中的保留关键字,因此要使用 @ 符号强制 C# 将 @class= 解释为符号(属性名称)。Because class is a reserved keyword in C#, you use the @ symbol to force C# to interpret @class= as a symbol (property name). 如果某个前端设计人员 (熟悉 HTML/CSS/JavaScript 和其他客户端技术,但并不熟悉 c # 和 Razor) 的人员,则大多数这三行都是外部的。To a front-end designer (someone familiar with HTML/CSS/JavaScript and other client technologies but not familiar with C# and Razor), most of the line is foreign. 必须在没有 IntelliSense 帮助的情况下编写整行代码。The entire line must be authored with no help from IntelliSense.

使用 LabelTagHelper,相同标记可以编写为:Using the LabelTagHelper, the same markup can be written as:

<label class="caption" asp-for="FirstName"></label>

使用标记帮助程序版本,只要在 Visual Studio 编辑器中输入 <l,IntelliSense 就会显示匹配的元素:With the Tag Helper version, as soon as you enter <l in the Visual Studio editor, IntelliSense displays matching elements:


IntelliSense 可帮助编写整行。IntelliSense helps you write the entire line.

下面的代码图显示了从 Visual Studio 附带的 ASP.NET 4.5. x MVC 模板生成的 视图/帐户/注册. cshtml 视图的窗体部分 Razor 。The following code image shows the Form portion of the Views/Account/Register.cshtml Razor view generated from the ASP.NET 4.5.x MVC template included with Visual Studio.


Visual Studio 编辑器以灰色背景显示 C# 代码。The Visual Studio editor displays C# code with a grey background. 例如,AntiForgeryToken HTML 帮助程序:For example, the AntiForgeryToken HTML Helper:


以灰色背景显示。is displayed with a grey background. Register 视图中的标记大部分是 C#。Most of the markup in the Register view is C#. 将其与使用标记帮助程序的等效方法进行比较:Compare that to the equivalent approach using Tag Helpers:


与 HTML 帮助程序方法相比,此标记更清晰,更容易阅读、编辑和维护。The markup is much cleaner and easier to read, edit, and maintain than the HTML Helpers approach. C# 代码会被减少至服务器需要知道的最小值。The C# code is reduced to the minimum that the server needs to know about. Visual Studio 编辑器以独特的字体显示标记帮助程序的目标标记。The Visual Studio editor displays markup targeted by a Tag Helper in a distinctive font.

请考虑 Email 组: Consider the Email group:

<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”不是字符串。Each of the "asp-" attributes has a value of "Email", but "Email" isn't a string. 在此上下文中,“Email”是 RegisterViewModel 的 C# 模型表达式属性。In this context, "Email" is the C# model expression property for the RegisterViewModel.

Visual Studio 编辑器可帮助编写注册窗体的标记帮助程序方法中的所有标记,而 Visual Studio 不会为 HTML 帮助程序方法中的大多数代码提供帮助。 The Visual Studio editor helps you write all of the markup in the Tag Helper approach of the register form, while Visual Studio provides no help for most of the code in the HTML Helpers approach. 标记帮助程序的 IntelliSense 支持详细介绍了如何在 Visual Studio 编辑器中使用标记帮助程序。IntelliSense support for Tag Helpers goes into detail on working with Tag Helpers in the Visual Studio editor.

标记帮助程序与 Web 服务器控件的比较Tag Helpers compared to Web Server Controls

  • 标记帮助程序不拥有与其相关的元素:它们只是参与元素和内容的呈现。Tag Helpers don't own the element they're associated with; they simply participate in the rendering of the element and content. /previous-versions/dotnet/netframework-3.0/7698y1f0(v=vs.85)在页面上声明并调用 ASP.NET。ASP.NET /previous-versions/dotnet/netframework-3.0/7698y1f0(v=vs.85) are declared and invoked on a page.

  • /previous-versions/zsyt68f1(v=vs.140) 具有不太重要的生命周期,使开发和调试变得困难。/previous-versions/zsyt68f1(v=vs.140) have a non-trivial lifecycle that can make developing and debugging difficult.

  • 通过 Web 服务器控件,可使用客户端控件向客户端文档对象模型 (DOM) 元素添加功能。Web Server controls allow you to add functionality to the client Document Object Model (DOM) elements by using a client control. 标记帮助程序没有 DOM。Tag Helpers have no DOM.

  • Web 服务器控件包括自动浏览器检测。Web Server controls include automatic browser detection. 标记帮助程序不了解浏览器。Tag Helpers have no knowledge of the browser.

  • 通常不能撰写 Web 服务器控件时,多个标记帮助程序可作用于同一元素(请参阅避免标记帮助程序冲突)。Multiple Tag Helpers can act on the same element (see Avoiding Tag Helper conflicts ) while you typically can't compose Web Server controls.

  • 标记帮助程序可以修改其作用域内 HTML 元素的标记和内容,但不会直接修改页面上的其他内容。Tag Helpers can modify the tag and content of HTML elements that they're scoped to, but don't directly modify anything else on a page. Web 服务器控件的作用域较广,并且可以执行影响页面其他部分的操作,从而可能造成意想不到的副作用。Web Server controls have a less specific scope and can perform actions that affect other parts of your page; enabling unintended side effects.

  • Web 服务器控件使用类型转换器将字符串转换为对象。Web Server controls use type converters to convert strings into objects. 使用标记帮助程序时,本身就用 C# 语言工作,因此无需进行类型转换。With Tag Helpers, you work natively in C#, so you don't need to do type conversion.

  • Web 服务器控件使用 System.ComponentModel 实现组件和控件的运行时和设计时行为。Web Server controls use System.ComponentModel to implement the run-time and design-time behavior of components and controls. System.ComponentModel 包括用于属性和类型转换器的实现、数据源绑定和组件授权的基类和接口。System.ComponentModel includes the base classes and interfaces for implementing attributes and type converters, binding to data sources, and licensing components. 与通常派生自 TagHelper 的标记帮助程序相比,TagHelper 基类仅公开两个方法,即 ProcessProcessAsyncContrast that to Tag Helpers, which typically derive from TagHelper, and the TagHelper base class exposes only two methods, Process and ProcessAsync.

自定义标记帮助程序元素字体Customizing the Tag Helper element font

可以从 " 工具 " "选项" "环境" " > Options > Environment > 字体和颜色 " 中自定义字体和着色:You can customize the font and colorization from Tools > Options > Environment > Fonts and Colors :


内置 ASP.NET Core 标记帮助程序Built-in ASP.NET Core Tag Helpers

定位点标记帮助程序Anchor Tag Helper

缓存标记帮助程序Cache Tag Helper

组件标记帮助程序Component Tag Helper

分布式缓存帮助程序Distributed Cache Tag Helper

环境标记帮助程序Environment Tag Helper

表单标记帮助程序Form Tag Helper

窗体操作标记帮助程序Form Action Tag Helper

图像标记帮助程序Image Tag Helper

输入标记帮助程序Input Tag Helper

标签标记帮助程序Label Tag Helper

链接标记帮助程序Link Tag Helper

部分标记帮助程序Partial Tag Helper

脚本标记帮助程序Script Tag Helper

选择标记帮助程序Select Tag Helper

文本区标记帮助程序Textarea Tag Helper

验证消息标记帮助程序Validation Message Tag Helper

验证摘要标记帮助程序Validation Summary Tag Helper

其他资源Additional resources