6.ASP.NET Core MVC标记帮助程序

1.标记帮助程序

1.1@addTagHelper指令

@addTagHelper 指令指定程序集中要加载的标记帮助程序对于 Views 目录或子目录中的所有视图文件均可用。

@addTagHelper 后第一个参数指定程序集中要加载的的标记帮助程序的范围,第二个参数指定包含标记帮助程序的程序集。

//指定程序集(Microsoft.AspNetCore.Mvc.TagHelpers)中的所有标记帮助程序。
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
//使用完全限定名称(fully qualified name,FQN)指定程序集(AuthoringTagHelpers)中的EmailTagHelper
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers
//完全限定名称(fully qualified name,FQN)和通配符(*)配套使用
@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers

1.2@removeTagHelper指令

@removeTagHelper 与 @addTagHelper 具有相同的两个参数,它会删除之前添加的标记帮助程序。

1.3@tagHelperPrefix指令

@tagHelperPrefix 指令可指定一个标记前缀字符串,以启用标记帮助程序支持并明确标记帮助程序用途。 

@tagHelperPrefix th:

标记帮助程序前缀设置为 th:,所以只有使用前缀 th: 的元素才支持标记帮助程序。<label> 和 <input> 元素具有标记帮助程序前缀,可使用标记帮助程序,而 <span> 元素则相反。

<div class="form-group">
    <th:label asp-for="Password" class="col-md-2"></th:label>
    <div class="col-md-10">
        <th:input asp-for="Password" class="form-control" />
        <span asp-validation-for="Password" class="text-danger"></span>   
    </div>
</div>

1.4标记帮助程序选择退出字符(!)

须将标记帮助程序选择退出字符应用于开始和结束标记。

例如,使用标记帮助程序选择退出字符在 <span> 中禁用 Email 验证:

<!span asp-validation-for="Email" class="text-danger"></!span>

1.5标记帮助程序属性中的C#

通常,@ 运算符插入表达式的文本表示形式到呈现的 HTML 标记中。 但是,当表达式的计算结果为逻辑 false时,框架会改为删除该属性。 在下面的示例中,如果ModelLicenseId为 null,则会删除disabled属性。

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

1.6标记帮助程序与HTML帮助程序的比较

并非每个 HTML 帮助程序都有对应的标记帮助程序,所以,标记帮助程序不会替代 HTML 帮助程序,在很多情况下,HTML 帮助程序为没有对应标记帮助程序提供了一种替代方式。

与 HTML 帮助程序方法相比,标记帮助程序更清晰,更容易阅读、编辑和维护。C# 代码会被减少至服务器需要知道的最小值。

//标记帮助程序
<label class="caption" asp-for="FirstName"></label>
//HTML帮助程序
@Html.Label("FirstName", "First Name:", new {@class="caption"})

2.<link>标记帮助程序

属性描述
asp-fallback-href主 URL 失效后要回退到的 CSS 样式表的 URL。
asp-fallback-test-class样式表中定义的用于回退测试的类名称。
asp-fallback-test-property用于回退测试的 CSS 属性名称。
asp-fallback-test-value用于回退测试的 CSS 属性值。

3.<script>标记帮助程序

属性描述
asp-fallback-src主 URL 失效后要回退到的脚本标签的 URL。
asp-fallback-test主脚本中定义的用于回退测试的脚本方法。

4.<img>标记帮助程序

属性描述
asp-append-version调用<img>标记帮助程序并附加哈希值

5.<a>标记帮助程序

属性描述
asp-controller控制器
asp-action控制器操作方法
asp-route命名路由
asp-route-{value}单个路由参数
asp-all-route-data多个路由参数
asp-fragmentURL 片段
asp-area区域
asp-protocolHTTP 协议
asp-host域名

6.<form>标记帮助程序

标记帮助程序对应HTML帮助程序
<form>Html.BeginForm 和 Html.BeginRouteForm
<input>Html.TextBoxHtml.TextBoxForHtml.Editor 和 Html.EditorFor
<textarea>Html.TextAreaFor
<label>Html.LabelFor
<select>Html.DropDownListFor 和 Html.ListBoxFor
属性描述
asp-for绑定模型表达式
asp-itemsoption元素

7.验证标记帮助程序

标记帮助程序对应HTML帮助程序
验证消息Html.ValidationMessageFor
验证摘要Html.ValidationSummary
属性描述一般配合HTML元素使用
asp-validation-for验证消息<span>
asp-validation-summary验证摘要<div>
asp-validation-summary显示的验证消息
All属性和模型级别
ModelOnly模型
None

8.<cache>标记帮助程序

属性描述
enabled开启缓存
expires-on缓存绝对到期日期
expires-after缓存时间长度
expires-sliding未被访问缓存被逐出时间
vary-by-header按header刷新缓存
vary-by-query按查询刷新缓存
vary-by-route按路由刷新缓存
vary-by-cookie按cookie刷新缓存
vary-by-user按用户刷新缓存
vary-by自定义刷新缓存
priority缓存被逐出优先级别

9.<distributed-cache>标记帮助程序

分布式缓存标记帮助程序与缓存标记帮助程序继承自相同的基类。分布式标记帮助程序可以使用所有缓存标记帮助程序的属性。

属性描述
name每个存储的缓存实例的键

10.<environment>标记帮助程序

环境标记帮助程序根据当前主机环境,有条件地呈现其包含的内容。比较不区分大小写。

属性描述
names如果主机环境包含Staging或Production,则呈现内容。
include如果主机环境包含Staging和Production,则呈现内容。
exclude如果主机环境不包含Development,则呈现内容。

11.<component>标记帮助程序

11.1呈现模式(render-mode)属性

Blazor Server呈现模式(render-mode)属性描述
ServerPrerendered将组件呈现为静态 HTML,并包含 Blazor 服务器应用的标记。
当user-agent启动时,此标记用于引导 Blazor 应用程序。
Server呈现 Blazor Server 应用程序的标记。不包括组件的输出。当user-agent启动时,此标记用于引导 Blazor 应用程序。
Static将组件呈现为静态 HTML。
Blazor WebAssembly呈现模式(render-mode)属性描述
WebAssembly呈现 Blazor WebAssembly 应用程序的标记,用于在加载到浏览器中时包含交互式组件。该组件不预呈现。此选项可以更轻松地在不同页面上呈现不同的 Blazor WebAssembly 组件。
WebAssemblyPrerendered将组件预呈现为静态 HTML,并包含 Blazor WebAssembly 应用程序的标记,以供以后加载到浏览器中时使组件具有交互性。

11.2无参数呈现组件

//假定组件 Counter 位于应用的 Pages 文件夹中
//占位符 {APP ASSEMBLY} 是应用的程序集名称
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Pages

...

<component type="typeof(Counter)" render-mode="ServerPrerendered" />

11.3有参数呈现组件

//ColorfulCheckbox组件
<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Shared

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

11.4持久保存预呈现组件的状态

要持久保存预呈现组件的状态,请使用持久化组件状态标记帮助程序。在预呈现组件的应用的 _Host 页面的结束 </body> 标记内添加标记帮助程序的标记 <persist-component-state />

//在 Blazor Server 应用 (Pages/_Host.cshtml)
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    ...

    <persist-component-state />
</body>
//在 Blazor WebAssembly 应用 (Pages/_Host.cshtml)
<body>
    <component type="typeof(App)" render-mode="WebAssemblyPrerendered" />

    ...

    <persist-component-state />
</body>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/csharp/aspnetcoremvc/14913.html

(0)
上一篇 2022年5月5日 01:20

相关推荐

  • 3.ASP.NET Core MVC终结点路由

    1. UseRouting和UseEndpoints方法 1.1作用 路由使用一对由 UseRouting 和 UseEndpoints 注册的中间件: UseRouting 向中间件管道添加路由匹配。此中间件会查看应用中定义的终结点集,并根据请求选择最佳的终…

  • 5.ASP.NET Core MVC视图

    1.创建视图 右键单击Views文件夹-添加–新建文件夹-名称复数Movies。 右键单击刚刚新建的Views/Movies文件夹-添加–新建项-选择合适的视图选项-名称Index.cshtml–添加。 2.View()帮助方法 2.1视图发现 3.强类型数据 (viewmodel)…

  • 1.ASP.NET Core MVC依赖注入

    1.依赖注入步骤 步骤一:使用接口或基类将依赖关系实现抽象化。 步骤二:使用 WebApplicationBuilder.Services 或 builder.Services 的服务注册方法将服务添加到内置的DI服务容器 IServiceProvider 中。 步骤三:将服务注入到依赖该服务的类的…

发表评论

登录后才能评论