猿教程 Logo

Asp.Net Core-Razor Tag Helpers

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效:去购买

Tag Helpers(标签助手)使服务器端代码能够参与在Razor文件中创建和呈现HTML元素。 Tag Helpers是一个新功能,类似于HTML helpers,帮助我们呈现HTML。

  • 有许多内置的Tag Helpers用于常见任务,例如创建表单,链接,加载资源等。Tag Helpers是在C#中创作的,它们基于元素名称,属性名称或父标签来定位HTML元素。

  • 例如,当应用LabelTagHelper属性时,内置的LabelTagHelper可以定位HTML

  • 如果您熟悉HTML Helpers,Tag Helpers可以减少Razor视图中HTML和C#之间的显式转换。

为了使用Tag Helpers,我们需要安装一个NuGet库。 让我们在解决方案资源管理器中右键单击您的项目,然后选择管理NuGet包....


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

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


单击确定按钮。


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

  • 现在任何人都可以创建一个tag helper,所以如果你能想到一个你需要的tag helper,你可以编写自己的tag helper。

  • 你可以把它放在你的应用程序项目中,但你需要告诉Razor视图引擎关于tag helper。

  • 默认情况下,它们不只是渲染到客户端,即使这些tag helper看起来好像他们融入到了HTML中。

  • Razor将调用一些代码来处理tag helper;它可以从HTML中删除自己,也可以添加额外的HTML。

  • 有许多奇妙的事情,你可以做一个tag helper,但你需要在Razor中注册你的tag helper。

  • 要做到这一点的指令是 addTagHelper,您可以将其放入单个视图中,或者如果您计划在整个应用程序中使用标记帮助程序,则可以在ViewImports文件中使用addTagHelper,如下所示。

@using FirstAppDemo.Controllers
@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

注册程序集中所有Tag Helper程序的语法是使用星号逗号(*,),然后使用程序集名称Microsoft.AspNet.Mvc.TagHelpers。 由于这里的第一个是一个类型名称,所以如果你只想使用一个Tag Helper,我们可以在这里列出一个特定的标签助手。

但是,如果你只是想取得在这个程序集中的所有标签助手,你可以只使用星号(*)。 Tag Helper库中有许多标记助手。 让我们看看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 Helper,使用ActionLink生成一个锚点标签,指向一个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。


现在,为此使用tag helper,让我们在index.cshtml文件中添加以下行,并删除HTML Helper。

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

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


以前,我们显示ID作为链接文本,但现在我们显示文本详细信息。 现在,我们点击详细信息,现在使用Tag Helper程序创建正确的URL,而不是HTML Helper程序。


无论你选择使用HTML助手还是Tag助手,这只是个人喜好的问题。 许多开发人员发现Tag Helper更容易创作和维护。

阿里云服务器,每月低至7.8元,项目演示即建站必备,比腾讯云更便宜,并且不需学生认证,从此链接购买有效: 去购买


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/ASPNET-CORE/core-razor-taghelpers.html