.Net Core 学习：Razor Pages -- 标签助手

简介

用于服务端渲染，使服务器端代码能够参与创建和呈现内部的HTML元素，帮助程序更加关注HTML元素，而且使用起来更加自然。

优势：

简化开发‌：减少手动编写冗余 HTML 代码，提高开发效率。
‌增强功能‌：自动处理模型绑定、验证和路由，使代码更易维护。
‌与 MVC 模式集成‌：标签助手与控制器和视图的 MVC 基元（如模型绑定和验证）协同工作，确保一致性。‌

分类

页面路由标签助手

生成页面链接

html 复制代码

<!-- 基本页面链接 -->
<a asp-page="/Books/Index">图书列表</a>

<!-- 带参数的页面链接 -->
<a asp-page="/Books/Details" asp-route-id="5">查看图书详情</a>

<a asp-page="/Books/Edit" 
   asp-route-id="@Model.Book.Id"
   asp-route-category="fiction"
   class="btn btn-warning">编辑</a>

<!-- 表单的页面链接 -->
<form method="post" asp-page-handler="Delete" asp-route-id="5">
    <button type="submit" class="btn btn-danger">删除</button>
</form>

<!-- 区域内的页面链接 -->
<a asp-page="/Index" asp-area="Admin">管理后台</a>

<!-- 锚点链接 -->
<a asp-page="/Books/Index" asp-fragment="section-1">跳转到第1节</a>

‌表单标签助手

创建和处理表单

html 复制代码

<!-- 基本表单 -->
<form method="post" asp-page="Create">
    <!-- 表单内容 -->
</form>

<!-- 带处理器的表单 -->
<form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
    <!-- 文件上传内容 -->
</form>

<!-- 防伪令牌 -->
@Html.AntiForgeryToken()
<!-- 或使用标签助手 -->
<form method="post">
    <input type="hidden" asp-antiforgery="true" />
</form>

<!-- 标签助手 -->
<label asp-for="Book.Title" class="form-label"></label>

<!-- 输入助手 -->
<input asp-for="Book.Title" class="form-control" />

<!-- 下拉列表 -->
<select asp-for="Book.CategoryId" 
        asp-items="Model.Categories"
        class="form-select">
    <option value="">请选择分类</option>
</select>

<!-- 文本区域 -->
<textarea asp-for="Book.Description" 
          class="form-control" 
          rows="4"></textarea>

<!-- 复选框 -->
<input type="checkbox" asp-for="Book.IsAvailable" class="form-check-input" />

<!-- 单选按钮 -->
<input type="radio" asp-for="Book.Status" value="Published" /> 已发布
<input type="radio" asp-for="Book.Status" value="Draft" /> 草稿

表单相关属性：

asp-for - 绑定模型属性
asp-items - 绑定选项列表
asp-format - 格式化显示
asp-page-handler - 指定处理方法

验证标签助手

html 复制代码

<!-- 验证摘要 -->
<div asp-validation-summary="All" class="text-danger"></div>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div asp-validation-summary="None" class="text-danger"></div>

<!-- 单个字段验证 -->
<span asp-validation-for="Book.Title" class="text-danger"></span>

<!-- 输入字段的验证属性会自动应用 -->
<input asp-for="Book.Price" 
       data-val="true"
       data-val-range="价格必须在0.01到1000之间"
       data-val-range-min="0.01"
       data-val-range-max="1000"
       data-val-required="价格是必填字段" />

‌验证摘要模式：

All - 显示所有错误
ModelOnly - 只显示模型级错误
None - 不显示

资产标签助手

用于处理CSS、JS等静态资源

html 复制代码

<!-- 脚本标签助手 -->
<script src="~/js/site.js" 
        asp-append-version="true"
        asp-fallback-src="~/js/fallback.js"
        asp-fallback-test="window.jQuery">
</script>

<!-- 链接标签助手 -->
<link rel="stylesheet" 
      href="~/css/site.css"
      asp-append-version="true"
      asp-fallback-href="~/css/fallback.css"
      asp-fallback-test-class="hidden"
      asp-fallback-test-property="visibility"
      asp-fallback-test-value="hidden" />

<!-- 图片标签助手 -->
<img src="~/images/logo.png" 
     asp-append-version="true"
     alt="Logo" 
     width="200" 
     height="100" />

常用属性：

asp-append-version - 添加版本号防止缓存
asp-fallback-src - 回退源
asp-fallback-test - 回退测试

锚点标签助手

html 复制代码

<!-- 控制器动作链接 -->
<a asp-controller="Home" 
   asp-action="Index"
   asp-route-id="@item.Id"
   asp-route-returnUrl="@Context.Request.Path"
   asp-protocol="https"
   asp-host="example.com"
   asp-fragment="section1">
    @item.Title
</a>

<!-- 生成电子邮件链接 -->
<a asp-protocol="mailto" 
   asp-host="support@example.com"
   asp-fragment="help">
    联系支持
</a>