ASP.NET Core Razor 标签助手

标签助手（Tag Helpers）支持服务器端代码参与创建和呈现 Razor 文件中的 HTML 元素。标签助手是一个新功能，类似于 HTML 助手，它帮助我们呈现 HTML。

有许多内置的标签助手用于常见任务，例如创建表单、链接、加载属性等。标签助手是用 C# 编写的，它们基于元素名称、属性名称或父标记以 HTML 元素为目标。
例如，当应用 LabelTagHelper 属性时，内置的 LabelTagHelper 可以针对 HTML <label> 元素。
如果您熟悉 HTML 助手，标签助手可以减少 Razor 视图中 HTML 和 C# 之间的显式转换。

我们在 _ViewImports.cshtml 文件中，添加一下代码：

@addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

注册程序集中所有 标签助手 的语法是使用星号逗号（*，），然后是程序集名称Microsoft.AspNet.Mvc.TagHelpers。因为这里的第一个部分是类型名称，所以如果您只想使用一个 标签助手，我们可以在这里列出一个特定的标签助手。

但是，如果您只想获取此程序集中的所有标签助手，则可以使用星号（*）。标签助手库中有许多可用的标签助手。让我们看看 Index 视图。

@model HomePageViewModel
@{
    ViewBag.Title = "Home";
}
<h1>Welcome!</h1>
<table>
    @foreach (var employee in Model.Employee)
    {
        <tr>
            <td>
                @Html.ActionLink(employee.ID.ToString(), "Details", new { id = employee.ID })
            </td>
            <td>@employee.EmployeeName</td>
        </tr>
    }
</table>

我们已经有一个 HTML 助手使用 ActionLink 生成一个链接，该链接将指向一个 URL，该 URL 让我们获取员工的详细信息。

让我们首先在 Home 控制器中添加 Details 操作，如以下程序所示。

public IActionResult Details(int id)
{
    var model = _context.Employees.Find(id);
    if (model == null)
    {
        return RedirectToAction("Index");
    }
    return View(model);
}

现在我们需要为 Details 操作添加一个视图。让我们在 Home/Views 文件夹中创建一个新视图，并将其称为 Details.cshtml，然后添加以下代码。

@model MyFirstCoreWebApp.Models.Employee
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@Model.EmployeeName</title>
</head>
<body>
    <h1>@Model.EmployeeName</h1>
    <div>Id: @Model.ID</div>
    <div>
        @Html.ActionLink("Home", "Index")
    </div>
</body>
</html>

让我们运行程序，结果如下：

然后点击韩梅梅的ID 1，跳转到详情页面，结果如下：

现在要使用标签助手，让我们在 index.cshtml 文件中添加以下行并删除 HTML 助手。

<a asp-action="Details" asp-route-id="@employee.ID">Details</a>

asp-action="Details" 是我们想要获取的操作的名称。如果有任何参数需要传递，您可以使用 asp-route 标签，这里我们希望包含 ID 作为参数，这样我们就可以使用 asp-rout-id 标签助手。

完整的 Index.chtml 代码修改如下：

@model HomePageViewModel
@{
    ViewBag.Title = "Home";
}
<h1>Welcome!</h1>
<table>
    @foreach (var employee in Model.Employee)
    {
        <tr>
            <td>
                <a asp-action="Details" asp-route-id="@employee.ID">Details</a>
            </td>
            <td>@employee.EmployeeName</td>
        </tr>
    }
</table>

让我们再次运行您的应用程序。结果如下：

之前，我们显示 ID 作为链接文本，但现在显示文本 Details。现在，我们单击 Details，并使用标签助手而不是 HTML 助手创建的 URL。

无论您选择使用 HTML 助手 还是 标签助手，这都是个人喜好的问题。许多开发人员发现 HTML 助手 更容易编写和维护。

ASP.NET Core Razor 标签助手

分类导航