ASP.NET Core - Razor 标签助手

标记帮助程序使服务器端代码能够参与在 Razor 文件中创建和呈现 HTML 元素。标签助手是一项新功能，类似于 HTML 助手，可以帮助我们渲染 HTML。

有许多内置的标记帮助程序可用于常见任务，例如创建表单、链接、加载资源等。标记帮助程序是用 C# 编写的，它们根据元素名称、属性名称或父标记来定位 HTML 元素。
例如，当应用 LabelTagHelper 属性时，内置 LabelTagHelper 可以定位 HTML <label> 元素。
如果您熟悉 HTML 帮助程序，标记帮助程序会减少 Razor 视图中 HTML 和 C# 之间的显式转换。

为了使用标签助手，我们需要安装 NuGet 库，并向使用这些标签助手的视图添加 addTagHelper 指令。让我们在解决方案资源管理器中右键单击您的项目，然后选择“管理 NuGet 包...”

搜索Microsoft.AspNet.Mvc.TagHelpers并单击“安装”按钮。

您将收到以下预览对话框。

单击“确定”按钮。

单击我接受按钮。安装 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。因为这里的第一部分是类型名称，所以如果您只想使用一个，我们可以在此处列出特定的标签助手。

但是，如果您只想获取此程序集中的所有标记助手，则可以仅使用星号(*)。标签助手库中有许多可用的标签助手。让我们看一下 Index 视图。

@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，使我们能够获取员工的详细信息。

让我们首先在家庭控制器中添加“详细信息”操作，如以下程序所示。

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); 
}

现在我们需要为“详细信息”操作添加一个视图。让我们在 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>

现在让我们运行该应用程序。

当您单击员工 ID 时，您将进入详细信息视图。

让我们单击第一个员工 ID。

现在，要使用标签帮助器来实现此目的，让我们在 index.cshtml 文件中添加以下行并删除 HTML 帮助器。

<a asp-action = "Details" asp-rout-id = "@employee.Id" >Details</a>

asp -action = "Details"是我们想要访问的操作的名称。如果您想要传递任何参数，您可以使用 asp-route tag helper，这里我们希望包含 ID 作为参数，因此我们可以使用 asp-route-Id taghelper。

以下是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>

让我们再次运行您的应用程序。运行应用程序后，您将看到以下页面。

以前，我们将 ID 显示为链接文本，但现在我们显示文本详细信息。现在，我们单击详细信息并使用标签助手而不是 HTML 助手创建正确的 URL。

无论您选择使用HTML 帮助程序还是标签帮助程序，这实际上都是个人喜好问题。许多开发人员发现标签助手更容易编写和维护。