ASP.NET Core - Razor 标签助手
Tag 标签助手使服务器端代码能够参与创建和呈现 Razor 文件中的 HTML 元素。 Tag 标签助手是一个新特性,类似于 HTML 助手,帮助我们渲染 HTML。
有许多内置的 Tag 标签助手用于常见任务,例如创建表单、链接、加载资产等。Tag 标签助手是用 C# 编写的,它们基于元素名称、属性名称或父标记来定位 HTML 元素。
例如,当应用 LabelTagHelper 属性时,内置的 LabelTagHelper 可以将 HTML <label> 元素作为目标。
如果您熟悉 HTML 助手,Tag 标签助手会减少 Razor 视图中 HTML 和 C# 之间的显式转换。
为了使用 Tag Helpers,我们需要安装一个 NuGet 库,并将 addTagHelper 指令添加到使用这些标签帮助器的一个或多个视图中。 让我们在解决方案资源管理器中右键单击您的项目并选择管理 NuGet 包...。
![管理 NuGet 包](https://www.w3ccoo.com/asp.net_core/images/manage_nuget_packages.jpg)
搜索 Microsoft.AspNet.Mvc.TagHelpers 并点击 Install 安装按钮。
您将收到以下预览对话框。
![预览对话框](https://www.w3ccoo.com/asp.net_core/images/preview_dialog_box.jpg)
Click the OK button.
![许可证接受](https://www.w3ccoo.com/asp.net_core/images/license_acceptance.jpg)
点击I Accept接受按钮。 安装 Microsoft.AspNet.Mvc.TagHelpers 后,转到 project.json 文件。
{ "version": "1.0.0-*", "compilationOptions": { "emitEntryPoint": true }, "dependencies": { "Microsoft.AspNet.Mvc": "6.0.0-rc1-final", "Microsoft.AspNet.Diagnostics": "1.0.0-rc1-final", "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final", "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final", "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final", "EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final", "EntityFramework.Commands": "7.0.0-rc1-final", "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final" }, "commands": { "web": "Microsoft.AspNet.Server.Kestrel", "ef": "EntityFramework.Commands" }, "frameworks": { "dnx451": { }, "dnxcore50": { } }, "exclude": [ "wwwroot", "node_modules" ], "publishExclude": [ "**.user", "**.vspscc" ] }
在依赖项部分,您会看到添加了 "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final"。
现在任何人都可以编写标签助手,所以如果您能想到您需要的标签助手,您可以编写自己的标签助手。
您可以将它直接放在您的应用程序项目中,但您需要将标签助手告知 Razor 视图引擎。
默认情况下,它们不仅呈现给客户端,即使这些标签助手看起来像是融入了 HTML 中。
Razor 将调用一些代码来处理标签助手; 它可以从 HTML 中删除自己,也可以添加额外的 HTML。
使用标签助手可以做很多很棒的事情,但是您需要使用 Razor 注册您的标签助手,甚至是 Microsoft 标签助手,以便 Razor 能够在标记中发现这些标签助手,并能够调用处理标签助手的代码。
执行此操作的指令是 addTagHelper,您可以将其放入单独的视图中,或者如果您计划在整个应用程序中使用标签助手,则可以在 ViewImports 文件中使用 addTagHelper,如下所示。
@using FirstAppDemo.Controllers @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
注册程序集中所有标签助手的语法是使用星号逗号 (*,),然后是程序集名称 Microsoft.AspNet.Mvc.TagHelpers。因为这里的第一部分是类型名称,所以如果您只想使用一个,我们可以在此处列出特定的标签助手。
但是,如果您只想获取此程序集中的所有标签助手,则可以只使用 asterisk(*)。标签助手库中有许多可用的标签助手。 让我们看一下索引视图。
@model HomePageViewModel @{ ViewBag.Title = "Home"; } <h1>Welcome!</h1> <table> @foreach (var employee in Model.Employees) { <tr> <td> @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id }) </td> <td>@employee.Name</td> </tr> } </table>
我们已经有一个 HTML 帮助器,它使用 ActionLink 来生成一个锚标记,该标记将指向一个 URL,使我们能够获得员工的详细信息。
让我们首先在 home 控制器中添加详细信息操作,如以下程序所示。
public IActionResult Details(int id) { var context = new FirstAppDemoDbContext(); SQLEmployeeData sqlData = new SQLEmployeeData(context); var model = sqlData.Get(id); if (model == null) { return RedirectToAction("Index"); } return View(model); }
现在我们需要为 Details 操作添加一个视图。 让我们在 Views → Home 文件夹中创建一个新视图并将其命名为 Details.cshtml 并添加以下代码。
@model FirstAppDemo.Models.Employee <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>@Model.Name</title> </head> <body> <h1>@Model.Name</h1> <div>Id: @Model.Id</div> <div> @Html.ActionLink("Home", "Index") </div> </body> </html>
现在让我们运行应用程序。
![Razor 标签助手应用程序运行](https://www.w3ccoo.com/asp.net_core/images/razor_tag_helpers_application_run.jpg)
当您单击员工的 ID 时,它将带您进入详细信息视图。
让我们点击第一个员工 ID。
![第一个员工 ID](https://www.w3ccoo.com/asp.net_core/images/first_employee_id.jpg)
现在为此使用标签助手,让我们在 index.cshtml 文件中添加以下行并删除 HTML 助手。
<a asp-action = "Details" asp-rout-id = "@employee.Id" >Details</a>
asp-action = "Details" 是我们想要进行的操作的名称。 如果有任何你想传递的参数,你可以使用 asp-route 标签助手,这里我们想包含 ID 作为参数,所以我们可以使用 asp-route-Id 标签助手。
下面是完整的 index.cshtml 文件植入。
@model HomePageViewModel @{ ViewBag.Title = "Home"; } <h1>Welcome!</h1> <table> @foreach (var employee in Model.Employees) { <tr> <td> <a asp-action="Details" asp-route-id="@employee.Id" >Details</a> </td> <td>@employee.Name</td> </tr> } </table>
让我们再次运行您的应用程序。 运行应用程序后,您将看到以下页面。
![员工详情](https://www.w3ccoo.com/asp.net_core/images/employee_details.jpg)
之前,我们将 ID 显示为链接文本,但现在我们将显示文本详细信息。 现在,我们单击详细信息并使用标签助手而不是 HTML 助手创建正确的 URL。
![HTML 助手标签](https://www.w3ccoo.com/asp.net_core/images/html_helpers_tag.jpg)
无论您选择使用 HTML 助手还是标签助手,这实际上是个人喜好的问题。 许多开发人员发现标签助手更易于编写和维护。