8.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>标记帮助程序

标记帮助程序对应HTML帮助程序
<a>Html.ActionLink()
属性描述
asp-controller控制器
asp-action控制器操作方法
asp-route命名路由
asp-route-{value}单个路由参数
asp-all-route-data多个路由参数
asp-fragmentURL 片段
asp-area区域
asp-protocolHTTP 协议
asp-host域名

6.<form>标记帮助程序

<form> 标记帮助程序默认使用 POST 提交表单数据,如果需要使用 GET 提交表单数据,需显式声明method="get"属性。

标记帮助程序对应HTML帮助程序
<form>Html.BeginForm() 和 Html.BeginRouteForm()
<input>Html.TextBox()Html.TextBoxFor()Html.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月7日 01:20
下一篇 2022年6月1日 21:30

相关推荐

  • 6.ASP.NET Core MVC特性

    控制器特性位于Microsoft.AspNetCore.Mvc 命名空间。 类 描述 AcceptVerbsAttribute 指定操作支持的 HTTP 方法。 ActionContextAttribute 指定当创建控制器时应使用当前 ActionContext set控制器属性。该属性必须具有公…

  • 5.ASP.NET Core MVC控制器

    1.新建控制器 右键单击Controllers文件夹-添加–控制器。 单击MVC–控制器-选择合适的脚手架选项–添加-名称复数MoviesController.cs–添加。 2.新搭建基架的项目 右键单击Controllers文件夹-添加–新搭建基架的项目&#…

  • 2.ASP.NET Core MVC中间件

    按照惯例,通过调用 Use 、Map、Run 扩展方法,向请求处理管道添加中间件组件。 请求管道中的每个中间件组件负责调用管道中的下一个组件,或使管道短路。当中间件短路时,它被称为“终端(terminal)中间件”,因为它阻止中间件进一步处理请求。 1.中间件顺序 2.Endpoint中间件 3.内置中间件 Middl…

发表回复

登录后才能评论