ASP.NET Core MVC中Tag Helpers用法介绍

什么是Tag Helpers？

Tag Helpers是ASP.NET Core MVC中一种新的标记语言，它可以让开发人员以更加直观、HTML标签化的方式为视图提供数据和行为。通过使用Tag Helpers，开发人员可以生成更清晰、更易于维护的视图，同时还可以更轻松地扩展ASP.NET Core MVC模型的功能。

如何使用Tag Helpers？

要使用Tag Helpers，首先需要在Razor视图中添加@addTagHelper指令引用所需的Tag Helpers包。通常情况下，需要添加以下指令引用：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

现在就可以在视图中使用Tag Helpers了。

两个示例

示例1：表单输入框

Tag Helper可以简化表单元素的代码，比如输入框。

使用HTML原生的输入框需要这样写：

<div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" name="username">
</div>

而使用Tag Helper则可以写成这样：

<div class="form-group">
    <label asp-for="Username"></label>
    <input asp-for="Username" class="form-control" />
</div>

更简洁直观了吧。

示例2：分页器

另一个例子是用Tag Helper来实现分页控件的生成。

使用HTML原生方式来呈现分页控件，可以在后端生成实现：

<nav>
  <ul class="pagination">
    @for (int i = 0; i < Model.TotalPages; i++)
    {
        <li @(Model.CurrentPage == i + 1 ? "class=active" : "")>
            <a href="@Url.Action("Index", "Home", new { page = i+1 })">@i+1</a>
        </li>
    }
  </ul>
</nav>

而使用Tag Helper可以简化这一过程：

<nav>
    <ul class="pagination">
        <li class="page-item" asp-page="@pageModel.PageIndex - 1" 
            asp-route-id="@Model.RouteData.Values["id"]" asp-route-category="@Model.RouteData.Values["category"]">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active" asp-page="@pageModel.PageIndex" 
            asp-route-id="@Model.RouteData.Values["id"]" asp-route-category="@Model.RouteData.Values["category"]">
            <a class="page-link" href="#">@pageModel.PageIndex</a>
        </li>
        <li class="page-item" asp-page="@pageModel.PageIndex + 1" 
            asp-route-id="@Model.RouteData.Values["id"]" asp-route-category="@Model.RouteData.Values["category"]">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

上面这个Tag Helper会依据当前页面生成一个带有分页控件的导航菜单。而且，如果您的项目需要并且您有针对自定义Tag Helper的需求，您也可以自己编写Tag Helper。

总结

以上就是ASP.NET Core MVC中Tag Helper的简要介绍。Tag Helper是一个非常有用的技术，可以帮助您生成更加直观、易于维护的视图。无论是简化表单元素还是创建自定义控件，Tag Helpers都可以提高您的开发效率并且减轻您的工作压力。