无涯教程-ASP.NET Core - Razor标签标签助手(Tag Helpers)使服务器端代码可以参与在Raz

标签助手(Tag Helpers)使服务器端代码可以参与在Razor文件中创建和呈现HTML元素

为了使用标签助手，无涯教程需要安装NuGet库，还需要向使用这些标签助手的一个或多个视图添加addTagHelper指令，在Solution Explorer中右键单击您的项目，然后选择"Manage NuGet Package"。

搜索 Microsoft.AspNet.Mvc.TagHelpers ，然后单击"Install"按钮。

单击OK按钮。

点击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" 。

@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>

已经有了使用 ActionLink 的HTML帮助器，以生成一个锚标签，该锚标签指向一个URL，该URL可以获取员工的详细信息。

首先在Home控制器中添加Details方法，如以下程序所示。

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>
  </span><span class="str">&lt;div&gt;</span><span class="pln"> 
     </span><span class="lit">@Html</span><span class="pun">.</span><span class="typ">ActionLink</span><span class="pun">(</span><span class="str">"Home"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Index"</span><span class="pun">)</span><span class="pln"> 
  </span><span class="pun">&lt;/</span><span class="pln">div</span><span class="pun">&gt;</span><span class="pln"> 
  

</body>
</html>

现在运行该应用程序。

当您单击员工的ID时，它将带您到详细信息视图。

单击第一个员工ID。

现在要使用标签帮助器，在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>

让无涯教程再次运行您的应用程序。运行该应用程序后，您将看到以下页面。

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

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

无涯教程-ASP.NET Core - Razor标签

参考链接