ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core Razor 标签助手
上一章节我们介绍了视图导入，学习了如何使用视图导入把一些公共的 C# 指令抽出来放到一起。这已经大大方便了我们编写控制器视图了，到此为止，我们真的没办法再精简控制器视图了。
但是，我总觉的 Index.cshtml 怪怪得，一时又想不起来哪里奇怪
算了，先喝杯茶再说..
....
....
真的啊，我刚刚真的去喝了瓶牛奶，然后，看了一部电影，结果，天黑了...有吃了顿饭...
我终于想起来了，原来是看 <a> 标签不顺眼，我们再来看看 Index.cshtml 中的代码
@model HomePageViewModel
@{
ViewBag.Title = "Home 控制器下的 Index 方法";
}
<h1>欢迎!</h1>
<div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div>
<table>
@foreach (var employee in Model.Employees)
{
<tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table>
看到没有，我们链接中的 URL 路径中的 /Home/Detail/ 竟然是写死的...写死的
这万一网站要是改版了，控制器和方法都不是 Home 和 Detail 了岂不是还要劳心劳肺的修改 Razor 视图吗？
不行，绝对不能这样
但，Razor 视图中有什么办法可以动态生成链接吗？
翻了下 Razor 手册，还好，压压惊，还好，还好有一种方法可以动态生成链接，那就是标签助手
Razor 标签助手
标签助手允许服务器端代码 ( 也就是 C# 代码) 参与到 Razor 文件中创建和渲染 HTML 元素
简单的说，标签助手是一项新功能，类似于 HTML 助手，可以帮助我们渲染 HTML
Razor 内置了许多标签助手用来处理常见的任务。例如创建表单，链接，加载资源等
标签助手是用 C# 语言编写的，它们根据元素名称，属性名称或父标签创建 HTML 元素
例如，可以使用内置的 LabelTagHelper 并传递相应的属性来生成 HTML <label> 元素
如果你对 HTML 助手很熟悉，那么就可以轻松的使用标签助手来简化在 Razor 视图中生成 HTML
检查当前项目是否安装标签助手
ASP.NET Core MVC 中的 Razor 标签助手的命名空间是 Microsoft.AspNetCore.Mvc.TagHelpers 一般情况下系统会自动安装
我们只需要展开依赖项中的 Microsoft.AspNetCore.App 包，一路往下检查即可
如果存在，则不用继续安装
安装 Razor 标签助手
如果你没有在 Microsoft.AspNetCore.App 包中找到 Microsoft.AspNetCore.Mvc.TagHelpers
则需要手动安装，安装教程如下
-
在 依赖项 上添加右键，选择 添加包
如果你的电脑是 Windows 系统，则是选择 管理 NuGet 程序包
![]()
-
在 添加包 管理器中搜索
Microsoft.AspNetCore.Mvc.TagHelpers![]()
接下来像之前我们安装 EF 框架那样点击 添加包 即可
安装成功后，你就能在依赖项中找到 Microsoft.AspNetCore.Mvc.TagHelpers
有一点要非常注意的是，安装的版本要和当前 ASP.NET Core 的版本一致，否则会安装失败
之前我一直不理解，后来理解了
关于标签助手
关于标签助手，我多说几句
-
现在任何人都可以创作一个标签助手，所以如果你需要的标签助手不存在，你可以编写自己的标签助手
-
你可以把自己创作的标签助手放在你的应用程序项目中，但需要把该标签助手关联到 Razor 视图引擎
-
默认情况下，标签助手不会一起被渲染到客户端，即使这些标签助手看起来像融入了 HTML
-
Razor 会调用一些代码来处理标签助手，标签助手可以从 HTML 中删除自己，也可以添加额外的 HTML
导入标签助手
可以用标签助手做很多很棒的事情，但前提是需要向 Razor 注册你的标签助手，甚至微软官方的标签助手，以便 Razor 能够在标记中发现这些标签助手并且能够 调用处理标签助手的代码
注册标签助手的指令是 @addTagHelper， 我们可以把这个指令放置到单个视图中，或者如果您计划在整个应用程序中使用标签助手，则可以放在视图导入 _ViewImports.cshtml
其实，_ViewImports.cshtml 的默认代码就导入了所有官方提供的标签助手
@namespace HelloWorld.Views @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
可以看到 @addTagHelper 指令有两个参数
- 第一个参数，星号 ( * ) 用于导入程序集的所有的标签助手
- 第二个参数，
Microsoft.AspNet.Mvc.TagHelpers，用于指定哪个程序集
第一个参数其实是一个类型名称，所以如果只想使用某个标签助手，那么我们可以列出这个名称，但如果想导入所有的标签助手，则可以使用星号 ( * )
两个参数合起来的意思导入程序集 Microsoft.AspNet.Mvc.TagHelpers 中的所有标签助手
使用标签助手
因为我们已经在视图导入 _ViewImports.cshtml 中导入了标签助手，所以我们可以在 Index.cshtml 视图中使用它们
我们可以使用 @Html.ActionLink URL 链接生成助手来创建自动关联到当前控制器的某个方法的 <a> 标签
@Html.ActionLink 标签有三个参数，分别是 <a> 标签的显示文本，当前控制器下的动作 ( action ) 和其它的附加参数组成的一个对象
现在我们就使用它来改造我们的 Index.cshtml 把，改造完成后如下
@model HomePageViewModel
@{
ViewBag.Title = "Home 控制器下的 Index 方法";
}
<h1>欢迎!</h1>
<div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div>
<table>
@foreach (var employee in Model.Employees)
{
<tr> <td>@Html.ActionLink(employee.ID.ToString(), "Detail", new { id = employee.ID })</td> <td>@employee.Name</td> </tr> } </table>
刷新浏览器，访问首页输出如下
如果点击链接 1，则输出如下
HTML 助手
一般情况下，在视图中我们都更喜欢类 HTML 语法，也就是 XML 语法
这样看起来更直观也更统一
而 Razor 也支持另外一种 HTML 助手，也就是 XML 语法的标签助手，这种助手直接在原来的 HTML 基础上添加一些 asp- 开头的属性来生成 HTML 标签
例如，对于 Index.cshtml 中的 @Html.ActionLink，我们还可以这么写
<a asp-action="Detail" asp-route-id="@employee.ID" >详情</a>
其中，asp-action="Detail" 是我们想要获得的动作的名称，如果想传递任何参数，可以使用 asp-route-* 标签助手，在这里我们想包含 ID 作为参数，则可以使用 asp-route-id
好吧，我们继续对 Index.cshtml 进行改造吧，改造完成后代码如下
@model HomePageViewModel
@{
ViewBag.Title = "Home 控制器下的 Index 方法";
}
<h1>欢迎!</h1> <div>这个消息来自 Home 控制器下的 Index 的视图文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a asp-action="Detail" asp-route-Id="@employee.ID">详情</a></td> <td>@employee.Name</td> </tr> } </table>
刷新浏览器，输出结果如下
在实际的项目中，无论你选择哪种，都是可以的，这是个人的爱好
但对于团队而言，我们建议做一个统一的规定，不然同时出现会造成阅读困难
