标签助手(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> <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>
让无涯教程再次运行您的应用程序。运行该应用程序后,您将看到以下页面。
以前,将ID显示为链接文本,但现在显示的是Details文本,现在,单击详细信息,现在使用标签帮助器而不是HTML帮助器来创建正确的URL。
无论您选择使用 HTML帮助器还是标签帮助器,这实际上都是个人喜好问题。许多开发人员发现标签帮助程序更易于编写和维护。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)