关注我们

ASP.NET Core - Razor标签

标签助手(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" 。

链接：https://www.learnfk.comhttps://www.learnfk.com/asp.net_core/asp.net-core-razor-tag-helpers.html

来源：LearnFk无涯教程网

@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> 
      
      <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标签帮助器，在这里希望将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>