1.什么是标签助手 Tag Helper

标签助手是服务端代码能够参与在 Razor 文件中创建和呈现HTML元素。例如,内置的 ImageTagHelper 可以将版本号追加到图像名称。无论何时更改图像,服务器都会为图像生成新的唯一版本,因此可以保证客户端获取当前图像(而不是过时的缓存图像)。内置的标签助手多用于常见任务,例如创建表单,链接和加载资源等。标签助手是在 C# 中定义的,它们基于元素名称,属性名称或父标签来定位HTML元素。例如,当应用 LabelTagHelper 特性时,内置的 LabelTagHelper  可以减少 Razor 视图中 HTML和 C# 之间的显示转换。

标签助手与HTML助手的差异:

* 标签助手提供了一HTML友好的开发体验

在大多数情况下,使用标签助手的 Razor 标记看起来像标准的 HTML。如果熟悉 HTML/CSS/Javascript的话,可以直接编辑 Razor,不需要学习C#语法。

* 丰富的IntelliSence 环境,用于创建 HTML 和 Razor 标记

HTML Helper 是此前在 Razor 视图中服务器端创建标记的方法。IntelliSense 支持 Tag HelpersIntelliSense 解释环境。即使有 Razor C# 语法经验的开发人员使用 Tag Helpers ,也比使用 C# Razor 标记更有效率。

还有一种更有效率的方法,并且能够使用尽在服务器上提供的信息生成更强大,可靠和可维护的代码。例如,以前更新图像的时候实在更改图象时更改图像名称。出于性能原因,应该清除缓存,除非更改图像名。内置的 ImageTagHelper 可以自动更改图像名称, ImageTagHelper 可将版本号追加到图像名称,因此每当更改图像时,服务器会自动为图像生成一个新的唯一的版本。保证客户端可以获取到当前图像。

大多数内置的标签助手均指向现有的 HTML 元素,并为元素提供服务端属性。例如,Views/Account 文件夹中许多使用的<input>元素包含 asp-for 属性,它将指定的模型属性的名称提取到呈现的 HTML 中。asp-for 属性有2 LabelTagHelper 中的 For 属性提供。

*管理标签助手范围

 标签助手范围由 @addTagHelper, @removeTagHelper 和 “!” 为推出字符串的组合控制。

@addTagHelper 使标签助手可用。默认 _ViewImports.cshtml 文件:

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"

上面的代码使用通配符语法(“ * ”)来指定程序集中的所有标签助手将可用于Views目录或子目录中的每个视图文件。@addTagHelper 之后的第一个参数指定要装载的标签助手,第二个参数 “Microsoft.AspNetCore.Mvc.TagHelpers” 指定包含标签助手的程序集。 Microsoft.AspNetCore.Mvc.TagHelpers 是内置的 ASP.NET Core 标签助手的程序集。

如果你的项目包含具有默认命名空间(AuthoringTagHelpers.TagHelpers.EmailTagHelper)的 EmailTagHelper,则可以提供标签助手的完全限定名(FQN):

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper  “AuthoringTagHelpers.TagHelpers.EmailTagHelper,AuthoringTagHelpers”

 要想使用 FQN 向视图添加标签助手,请先添加 FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper),然后再添加程序集名称(AuthoringTagHelpers)。大多数开发人员喜欢使用 “*” 通配符语法。通配符语法允许在 FQN 中插入通配符 “*” 作为后缀。例如:

@addTagHelper  “AuthoringTagHelpers.TagHelpers.E *,AuthoringTagHelpers”
@addTagHelper  “AuthoringTagHelpers.TagHelpers.Email *,AuthoringTagHelpers”

如果希望选择启用将标签助手仅显示给那些视图,则可以再特定视图中使用 @addTagHelper 指令。

* @removeTagHelper 删除标签助手

@removeTagHelper 具有与 @addTagHelper 相同的两个参数,它会删除之前添加的标签助手。例如,应用于特定视图的 @removeTagHelper 从视图中删除指定的标签助手。在Views/Floder/_ViewImports.cshtml 文件中使用  @removeTagHelper 从Floder 的所有视图中删除指定的标签助手。

*使用 _ViewImports.cshtml  文件控制标签助手范围

你可以将 ViewImports.cshtml  添加到任何视图文件夹,并且驶入引擎将来自 ViewImports.cshtml  文件的指令添加到 Views/ViewImports.cshtml 文件包含的指令中。如果为 Home 视图添加一个空的 ViewImports.cshtml  文件,则不会有任何改变,因为 ViewImports.cshtml  文件是叠加的。任何添加到 Views/Home/ViewImports.cshtml 文件的 @addTagHelper 指令都会使用这些标签助手仅显示在Home 文件夹中。

*选择退出个别元素

你可以使用标签助手退出符(“ ! ”)在元素级别停用标签助手。例如,使用标签助手退出符在<span>中禁用邮件验证:

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

必须将标签助手退出符应用于开始和结束标记。添加标签助手退出符后,元素和标签助手属性不再以特殊字体显示。

2.使用 @tagHelperPrefix 使标签助手显示使用

@tagHelperPrefix 指令允许你指定标签前缀字符串以启用标签助手支持,并使标签助手显示使用。例如下面代码,标签助手前缀设置为 th: ,因此只使用前缀为 th: support Tag Helper (启用标签助手的元素特殊字体)的元素。<label>和<input> 元素有标签助手前缀,并且启用了标签助手,而<sapn> 元素不启用:

<div class="form-group">
                <th:label asp-for="Id" class="control-label"></th:label>
                <th:input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>

适用于 @addTagHelper 的相同层次结构规则也是用于 @tagHelperPrefix。

当在 VS 中创建一个 web 应用时,在 project.json 文件中添加 “Microsoft.AspNetCore.Razor.Tool”,这就是添加 Tag Helper 工具的包。

在 VS 编辑器中一输入 <l ,智能感知就会显示匹配的元素。智能感知语句允许用 Tab 键来输入所选值的语句。

你可以在属性值里面(双引号里)输入VS的CompleteWord快捷键(默认是Ctrl+空格),现在在C#中,就像一个C#类。智能感知显示页面模型的所有方法和属性,也可以帮助选择CSS类。

3.标签助手 Tag Helpers 和 HTML Helpers 比较

 标签助手是附加到 Razor 视图中的 HTML 元素,而 HTML 助手则是在 Razor 视图中穿插的 HTML 的方法调用。下面的 Razor 标记会创建一个带 CSS 类 “caption” 的HTML标签:

@Html.Label("FirstName", "First Name:", new {@class="caption"})

@符号告诉Razor这是代码的开始。接下来的两个参数(“FirstName” 和 “First Name:”)是字符串,因此IntelliSence 不能帮助。最后一个参数 new {@class="caption"} 是用于表示属性的匿名对象。因为 class 是C#中的关键字,所以使用@符号强制C#将@class=解释为符号。

使用LabelTagHelper,相同的标记可以写为:

<label asp-for="FirstName" class="caption"></label>

使用LabelTagHelper,只要在 VS 中输入 <l ,智能感知就会显示匹配的元素。

下面代码是 VS2015 中 ASP.NET 4.5.x MVC 模板生成的  Razor  视图表单部分:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>修改资料</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)
        @Html.HiddenFor(model => model.Account)

        <div class="form-group">
            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" style="padding-top:7px">
                @Html.DisplayFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Account, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" style="padding-top:7px">
                @Html.DisplayFor(model => model.Account, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="保存" class="btn btn-default" />
            </div>
        </div>
    </div>
}

下面是 ASP.NET Core MVC 模板的标签助手表单部分代码:

<div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>

4.标签助手和 WEB 服务器控件比较

Web 服务器控件在页面上声明和调用。标签助手不拥有与其关联的元素,它们只是简单地参与元素和内容的呈现。

Web 服务器控件有一个不同的生命周期,使其开发和调试变得困难。

Web 服务器控件允许通过使用客户机空间向客户端文档对象模型(DOM)添加功能。标签助手没有DOM。

Web 服务器控件包括自动浏览器检测,标签助手不能识别浏览器。

多个标签助手可以对同一元素执行操作,但通常无法编写 Web 服务器控件。

标签助手可以修改其范围限定的HTML元素的标记和内容,但不直接修改页面上的任何其他内容。

Web 服务器控件使用类型转换器将字符串转为对象,有了标签助手,可以在C#中工作,不需要做类型转换。

Web 服务器控件使用 System.ComponentModel 来实现组件和控件的运行时和设计时行为。System.ComponentModel 包括用于实现属性和类转换器,绑定到数据源和许可组件的基类和接口。与标签助手相比,通常派生自 TagHelper,TagHelper基类仅公开 Process  和 ProcessAsync 两个方法。

5.自定义标签助手

 1.编写一个 email 标签助手

标签助手是任何实现ITagHelper 接口的类。然而,编写一个标签助手时,通常是从 TagHelper 类开始,这样可以访问 Process 方法。

首先创建一个 TagHelpers 文件夹,添加一个 EmailTagHelper 类:

public class EmailTagHelper:TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于将 <email> 替换为 <a>
        }
    }

注意:

* 标签助手使用以目标元素名作为根类名(出去类名中的TagHelper部分)的命名约定,EmailTagHelper最终对应的标签是 email 

* EmailTagHelper 类需派生自 TagHelper,重写 Process 方法

* Process 或 ProcessAsync 的上下文参数包含了与当前 HTML 标签执行的相关信息,输出参数包含了用来生成HTML标签和内容的源代码的静态HTML元素呈现。

类名后缀不是必须为TagHelper,但是建议加上。

下面在项目中使用 email 标签助手。在 _ViewImports.cshtml ,使用 addTagHelper 添加  EmailTagHelper类:

@using MVCTest
@using MVCTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper "MVCTest.TagHelpers.EmailTagHelper,MVCTest"

@addTagHelper 之后的第一个字符串指明要加载的标签助手,第二个字符串指明此标签助手所在的程序集,在 Views/Home/Contact.cshtml 文件中加入标签:

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong> <email>Support</email><br />
    <strong>Marketing:</strong> <email>Marketing</email>
</address>

运行程序并使用浏览器查看HTML代码,可以看到 email 标签都被替换成链接标签。但是没有一个 href 属性。

2.完善 email 标签助手

更新EmailTagHelper类:

public class EmailTagHelper:TagHelper
    {
        private const string EmailDomain = "contoso.com";
        public string MailTo { get; set; } //增加 nail-to 属性,如 <email mail-to="..." />
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于将 <email> 替换为 <a>
            var address = MailTo + "@" + EmailDomain;
            output.Attributes.SetAttribute("href","mailto:"+address);
            output.Content.SetContent(address); //设置标签助手的内容
        }
    }

更新Views/Home/Contact.cshtml  ,加上 mail-to 属性:

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong> <email mail-to="Support">Support</email><br />
    <strong>Marketing:</strong> <email mail-to="Marketing">Marketing</email>
</address>

以 Pascal  形式命名标签助手的类名及属性名会被翻译成它们的小写 kebab 形式。因此使用 MailTo 属性,与使用 <eamil mail-to="value" />。

3.异步标签助手

更新EmailTagHelper:

public class EmailTagHelper:TagHelper
    {
        private const string EmailDomain = "contoso.com";

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a"; //用于将 <email> 替换为 <a>
            var content = await output.GetChildContentAsync();
            var target  = content.GetContent() + "@" + EmailDomain;
            output.Attributes.SetAttribute("href", "mailto:" + target);
            output.Content.SetContent(target);
        }
    }

Views/Home/Contact.cshtml :

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong> <email>Support</email><br />
    <strong>Marketing:</strong> <email>Marketing</email>
</address>

到此这篇关于ASP.NET Core MVC标签助手(TagHelper)用法的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部