ASP.NET Core MVC中的标签TagHelper怎么用

本篇内容主要讲解“ASP.NETCoreMVC中的标签TagHelper怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ASP.NETCoreMVC中的标签TagHelper怎么用”吧!标签助手是服务端代码能够参与在 Razor 文件中创建和呈现HTML元素。例如，内置的 ImageTagHelper 可以将版本号追加到图像名称。无论何时更改图像，服务器都会为图像生成新的唯一版本，因此可以保证客户端获取当前图像（而不是过时的缓存图像）。内置的标签助手多用于常见任务，例如创建表单，链接和加载资源等。标签助手是在 C# 中定义的，它们基于元素名称，属性名称或父标签来定位HTML元素。例如，当应用 LabelTagHelper 特性时，内置的LabelTagHelper 可以减少 Razor 视图中 HTML和 C# 之间的显示转换。在大多数情况下，使用标签助手的 Razor 标记看起来像标准的 HTML。如果熟悉 HTML/CSS/Javascript的话，可以直接编辑 Razor，不需要学习C#语法。HTML Helper 是此前在 Razor 视图中服务器端创建标记的方法。IntelliSense 支持 Tag HelpersIntelliSense 解释环境。即使有 Razor C# 语法经验的开发人员使用 Tag Helpers ，也比使用 C# Razor 标记更有效率。还有一种更有效率的方法，并且能够使用尽在服务器上提供的信息生成更强大，可靠和可维护的代码。例如，以前更新图像的时候实在更改图象时更改图像名称。出于性能原因，应该清除缓存，除非更改图像名。内置的ImageTagHelper 可以自动更改图像名称，ImageTagHelper 可将版本号追加到图像名称，因此每当更改图像时，服务器会自动为图像生成一个新的唯一的版本。保证客户端可以获取到当前图像。大多数内置的标签助手均指向现有的 HTML 元素，并为元素提供服务端属性。例如，Views/Account 文件夹中许多使用的元素包含 asp-for 属性，它将指定的模型属性的名称提取到呈现的 HTML 中。asp-for 属性有2 LabelTagHelper 中的 For 属性提供。标签助手范围由 @addTagHelper, @removeTagHelper 和 “！” 为推出字符串的组合控制。@addTagHelper 使标签助手可用。默认_ViewImports.cshtml 文件：上面的代码使用通配符语法（“ * ”）来指定程序集中的所有标签助手将可用于Views目录或子目录中的每个视图文件。@addTagHelper 之后的第一个参数指定要装载的标签助手，第二个参数 “Microsoft.AspNetCore.Mvc.TagHelpers” 指定包含标签助手的程序集。Microsoft.AspNetCore.Mvc.TagHelpers 是内置的 ASP.NET Core 标签助手的程序集。如果你的项目包含具有默认命名空间（AuthoringTagHelpers.TagHelpers.EmailTagHelper）的EmailTagHelper，则可以提供标签助手的完全限定名（FQN）：要想使用 FQN 向视图添加标签助手，请先添加 FQN（AuthoringTagHelpers.TagHelpers.EmailTagHelper），然后再添加程序集名称（AuthoringTagHelpers）。大多数开发人员喜欢使用 “*” 通配符语法。通配符语法允许在 FQN 中插入通配符 “*” 作为后缀。例如：如果希望选择启用将标签助手仅显示给那些视图，则可以再特定视图中使用@addTagHelper 指令。@removeTagHelper 具有与 @addTagHelper 相同的两个参数，它会删除之前添加的标签助手。例如，应用于特定视图的@r免费云主机域名emoveTagHelper 从视图中删除指定的标签助手。在Views/Floder/_ViewImports.cshtml 文件中使用@removeTagHelper 从Floder 的所有视图中删除指定的标签助手。你可以将ViewImports.cshtml 添加到任何视图文件夹，并且驶入引擎将来自ViewImports.cshtml 文件的指令添加到 Views/ViewImports.cshtml 文件包含的指令中。如果为 Home 视图添加一个空的ViewImports.cshtml 文件，则不会有任何改变，因为ViewImports.cshtml 文件是叠加的。任何添加到Views/Home/ViewImports.cshtml 文件的 @addTagHelper 指令都会使用这些标签助手仅显示在Home 文件夹中。你可以使用标签助手退出符（“ ！ ”）在元素级别停用标签助手。例如，使用标签助手退出符在中禁用邮件验证：必须将标签助手退出符应用于开始和结束标记。添加标签助手退出符后，元素和标签助手属性不再以特殊字体显示。@tagHelperPrefix 指令允许你指定标签前缀字符串以启用标签助手支持，并使标签助手显示使用。例如下面代码，标签助手前缀设置为 th: ，因此只使用前缀为 th: support Tag Helper （启用标签助手的元素特殊字体）的元素。和元素有标签助手前缀，并且启用了标签助手，而元素不启用：适用于 @addTagHelper 的相同层次结构规则也是用于 @tagHelperPrefix。当在 VS 中创建一个 web 应用时，在 project.json 文件中添加 “Microsoft.AspNetCore.Razor.Tool”，这就是添加 Tag Helper 工具的包。在 VS 编辑器中一输入

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

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

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

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

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

使用LabelTagHelper，相同的标记可以写为：

使用LabelTagHelper，只要在 VS 中输入

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

@using(Html.BeginForm())
{
@Html.AntiForgeryToken()


修改资料

@Html.ValidationSummary(true,"",new{@class="text-danger"})
@Html.HiddenFor(model=>model.Id)
@Html.HiddenFor(model=>model.Account)


@Html.LabelFor(model=>model.Id,htmlAttributes:new{@class="control-labelcol-md-2"})

@Html.DisplayFor(model=>model.Id,new{htmlAttributes=new{@class="form-control"}})




@Html.LabelFor(model=>model.Account,htmlAttributes:new{@class="control-labelcol-md-2"})

@Html.DisplayFor(model=>model.Account,new{htmlAttributes=new{@class="form-control"}})










}

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

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 类：

publicclassEmailTagHelper:TagHelper
{
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
}
}

注意：

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

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

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

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

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

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

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

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

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

2.完善 email 标签助手

更新EmailTagHelper类：

publicclassEmailTagHelper:TagHelper
{
privateconststringEmailDomain="contoso.com";
publicstringMailTo{get;set;}//增加nail-to属性，如
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
varaddress=MailTo+"@"+EmailDomain;
output.Attributes.SetAttribute("href","mailto:"+address);
output.Content.SetContent(address);//设置标签助手的内容
}
}

更新Views/Home/Contact.cshtml ，加上 mail-to 属性：

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

以 Pascal 形式命名标签助手的类名及属性名会被翻译成它们的小写 kebab 形式。因此使用 MailTo 属性，与使用。

3.异步标签助手

更新EmailTagHelper：

publicclassEmailTagHelper:TagHelper
{
privateconststringEmailDomain="contoso.com";

publicoverrideasyncTaskProcessAsync(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
varcontent=awaitoutput.GetChildContentAsync();
vartarget=content.GetContent()+"@"+EmailDomain;
output.Attributes.SetAttribute("href","mailto:"+target);
output.Content.SetContent(target);
}
}

Views/Home/Contact.cshtml ：

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

到此，相信大家对“ASP.NETCoreMVC中的标签TagHelper怎么用”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

你可以在属性值里面（双引号里）输入VS的CompleteWord快捷键（默认是Ctrl+空格），现在在C#中，就像一个C#类。智能感知显示页面模型的所有方法和属性，也可以帮助选择CSS类。标签助手是附加到 Razor 视图中的 HTML 元素，而 HTML 助手则是在 Razor 视图中穿插的 HTML 的方法调用。下面的 Razor 标记会创建一个带 CSS 类 “caption” 的HTML标签：@符号告诉Razor这是代码的开始。接下来的两个参数（“FirstName” 和 “First Name：”）是字符串，因此IntelliSence 不能帮助。最后一个参数new {@class=”caption”} 是用于表示属性的匿名对象。因为 class 是C#中的关键字，所以使用@符号强制C#将@class=解释为符号。使用LabelTagHelper，相同的标记可以写为：使用LabelTagHelper，只要在 VS 中输入

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

@using(Html.BeginForm())
{
@Html.AntiForgeryToken()


修改资料

@Html.ValidationSummary(true,"",new{@class="text-danger"})
@Html.HiddenFor(model=>model.Id)
@Html.HiddenFor(model=>model.Account)


@Html.LabelFor(model=>model.Id,htmlAttributes:new{@class="control-labelcol-md-2"})

@Html.DisplayFor(model=>model.Id,new{htmlAttributes=new{@class="form-control"}})




@Html.LabelFor(model=>model.Account,htmlAttributes:new{@class="control-labelcol-md-2"})

@Html.DisplayFor(model=>model.Account,new{htmlAttributes=new{@class="form-control"}})










}

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

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

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

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

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

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

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

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

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

5.自定义标签助手

1.编写一个email 标签助手

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

首先创建一个TagHelpers 文件夹，添加一个EmailTagHelper 类：

publicclassEmailTagHelper:TagHelper
{
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
}
}

注意：

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

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

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

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

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

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

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

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

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

2.完善 email 标签助手

更新EmailTagHelper类：

publicclassEmailTagHelper:TagHelper
{
privateconststringEmailDomain="contoso.com";
publicstringMailTo{get;set;}//增加nail-to属性，如
publicoverridevoidProcess(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
varaddress=MailTo+"@"+EmailDomain;
output.Attributes.SetAttribute("href","mailto:"+address);
output.Content.SetContent(address);//设置标签助手的内容
}
}

更新Views/Home/Contact.cshtml ，加上 mail-to 属性：

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

以 Pascal 形式命名标签助手的类名及属性名会被翻译成它们的小写 kebab 形式。因此使用 MailTo 属性，与使用。

3.异步标签助手

更新EmailTagHelper：

publicclassEmailTagHelper:TagHelper
{
privateconststringEmailDomain="contoso.com";

publicoverrideasyncTaskProcessAsync(TagHelperContextcontext,TagHelperOutputoutput)
{
output.TagName="a";//用于将替换为
varcontent=awaitoutput.GetChildContentAsync();
vartarget=content.GetContent()+"@"+EmailDomain;
output.Attributes.SetAttribute("href","mailto:"+target);
output.Content.SetContent(target);
}
}

Views/Home/Contact.cshtml ：

@{
ViewData["Title"]="Contact";
}
@ViewData["Title"]
@ViewData["Message"]


OneMicrosoftWay

Redmond,WA98052-6399

P:
425.555.0100



Support:Support

Marketing:Marketing

下面代码是 VS2015 中 ASP.NET 4.5.x MVC 模板生成的 Razor 视图表单部分：下面是 ASP.NET Core MVC 模板的标签助手表单部分代码：Web 服务器控件在页面上声明和调用。标签助手不拥有与其关联的元素，它们只是简单地参与元素和内容的呈现。Web 服务器控件有一个不同的生命周期，使其开发和调试变得困难。Web 服务器控件允许通过使用客户机空间向客户端文档对象模型（DOM）添加功能。标签助手没有DOM。Web 服务器控件包括自动浏览器检测，标签助手不能识别浏览器。多个标签助手可以对同一元素执行操作，但通常无法编写Web 服务器控件。标签助手可以修改其范围限定的HTML元素的标记和内容，但不直接修改页面上的任何其他内容。Web 服务器控件使用类型转换器将字符串转为对象，有了标签助手，可以在C#中工作，不需要做类型转换。Web 服务器控件使用 System.ComponentModel 来实现组件和控件的运行时和设计时行为。System.ComponentModel 包括用于实现属性和类转换器，绑定到数据源和许可组件的基类和接口。与标签助手相比，通常派生自 TagHelper，TagHelper基类仅公开 Process 和 ProcessAsync 两个方法。标签助手是任何实现ITagHelper 接口的类。然而，编写一个标签助手时，通常是从TagHelper 类开始，这样可以访问Process 方法。首先创建一个TagHelpers 文件夹，添加一个EmailTagHelper 类：注意：* 标签助手使用以目标元素名作为根类名（出去类名中的TagHelper部分）的命名约定，EmailTagHelper最终对应的标签是 email*EmailTagHelper 类需派生自TagHelper，重写Process 方法*Process 或ProcessAsync 的上下文参数包含了与当前 HTML 标签执行的相关信息，输出参数包含了用来生成HTML标签和内容的源代码的静态HTML元素呈现。类名后缀不是必须为TagHelper，但是建议加上。下面在项目中使用 email 标签助手。在_ViewImports.cshtml ，使用addTagHelper 添加EmailTagHelper类：@addTagHelper 之后的第一个字符串指明要加载的标签助手，第二个字符串指明此标签助手所在的程序集，在 Views/Home/Contact.cshtml 文件中加入标签：运行程序并使用浏览器查看HTML代码，可以看到 email 标签都被替换成链接标签。但是没有一个 href 属性。更新EmailTagHelper类：更新Views/Home/Contact.cshtml ，加上 mail-to 属性：以 Pascal 形式命名标签助手的类名及属性名会被翻译成它们的小写 kebab 形式。因此使用 MailTo 属性，与使用。更新EmailTagHelper：Views/Home/Contact.cshtml ：到此，相信大家对“ASP.NETCoreMVC中的标签TagHelper怎么用”有了更深的了解，不妨来实际操作一番吧！这里是百云主机网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: ResizeObserver怎么监视DOM大小变化

本篇内容主要讲解“ResizeObserver怎么监视DOM大小变化”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ResizeObserver怎么监视DOM大小变化”吧!ResizeObserver 用于监听元素的…