ASP.NET Core 中的 Taghelper
admin
2021-06-03本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳:跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core
ASP.NET Core 中的 Taghelper
Tag Helpers(标记助手)是 ASP.NET Core 中的新增功能。让我们通过一个例子来理解 Tag Helpers 是什么以及它们的用途。
什么是 Tag Helpers
Taghelper 是服务器端组件。 它们在服务器上处理,以在 Razor
文件中创建和渲染 HTML
元素。 如果您对以前版本的 ASP.NET MVC 有任何经验,那么您可能熟悉HTMLTaghelper
。 Tag Helpers 类似于 HTML Taghelper。 ASP.NET Core 有许多内置的 Tag Helper 用于常见任务,例如生成链接,创建表单,加载数据等。
导入内置 Tag Helpers
要在整个应用程序中的所有视图使用内置 Taghelper,需要在_ViewImports.cshtml
文件导入 Taghelper。要导入 Taghelper,我们使用@addTagHelper
指令。
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers;
通配符\*
表示我们要导入所有 Tag Helpers, 而 Microsoft.AspNetCore.Mvc.TagHelpers 是包含内置 Taghelper 的组件
使用 Taghelper 生成链接
假设我们要查看指定学生的详细信息。所以我们想要生成以下超链接。数字 5 是我们要查看其详细信息的学生的 ID。
/home/details/5
我们可以通过多种方式在 Razor 视图中实现该效果: 方法 1:手动生成链接
@foreach (var student in Model) {
<a href="/home/details/@student.Id">查看</a>
}
方法 2:使用 HTML 帮助程序
@Html.ActionLink("查看", "details", new { id = student.Id })
生成结果锚元素:
<a href="/hom/details/5">查看</a>
@Url.Action("details", "home", new { id = student.Id })
生成结果字符串:/hom/details/5
方法 3:使用 Tag Helpers
<a asp-controller="home" asp-action="details" asp-route-id="@student.Id">查看</a>
生成结果:
<a href="/Home/details/5">查看</a>```
A 标签的 Tag Helper
A 标签的 Tag Helper 可通过添加新属性来增强标准的 HTML (<a></a>)
标签。比如:
asp-controller
asp-action
asp-route-{value}
所呈现的 A 标签的 Href
属性值由这些 asp
属性的值决定。
正如名称所暗示的那样,asp-controller
指定控制器名称,而asp-action
指定要包含在生成的 href 属性值中的操作方法的名称。asp-route- {value}
属性用于在生成的href
中包含路由数据属性值。{value}
可以替换为路由参数,例如id
。
参考以下代码:
<a asp-controller="home" asp-action="details" asp-route-id="@student.Id">
查看</a>
生成结果:<a href="/Home/details/5">查看</a>
从下面的代码中可以看出,手动生成链接比使用 HTML Helpers 或 Tag Helpers 要容易得多。
<a href="/home/details/@student.Id">查看</a>
您可能会产生一个疑问?为什么我们应该使用 HTML 帮助器或 Tag Helpers 来手动生成这些链接。我们将在下一个章节中回答这个问题。
文章说明
如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权
感谢您对我的支持