ASP.NET Core教程

ASP.NET Core - Razor Tag助手

Tag Helpers使服务器端代码能够参与在Razor文件中创建和呈现HTML元素.标记帮助程序是一个新功能，类似于HTML帮助程序，它可以帮助我们呈现HTML.

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

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

管理NuGet包

搜索 Microsoft.AspNet.Mvc.TagHelpers 并单击"安装"按钮.

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

预览对话框

单击OK按钮.

许可证接受

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

但是如果你只是想拿走所有的标签助手在此程序集中，您只需使用星号(*)即可.标记帮助程序库中有许多标记帮助程序.让我们看看索引视图.

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

现在我们需要为Details操作添加一个视图.让我们在Views&rarr中创建一个新视图;主文件夹并将其命名为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 Tag Helpers应用程序运行

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

让我们点击第一个员工ID.

First Employee Id

现在为此使用标记帮助器，让我们在index.cshtml文件中添加以下行并删除HTML帮助器.

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

asp-action ="Details"是我们想要访问的操作的名称.如果你想传递任何参数，你可以使用asp-route标签助手，这里我们想要包含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>

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

员工详细信息