asp.net core TagHelpers

目录(?)[+]

• 简介
• 内置Tag Helpers列表
• 表单相关Tag Helpers：
• 缓存：
• 其他：
• 其他标记详解
• Script and Link Tag Helpers
• 缓存 TagHelper
• vary-by 属性
• 分布式 Cache
• 表单
• Form
• Input
• Lable
• TextArea
• Validation
• 综合例子
• 自定义 Tag Helpers
• 简单示例
• 改变属性，构建一个 Email 标签
• 资料：

 

简介

Tag Helpers 提供了在视图中更改和增强现有HTML元素的功能。将它们添加到视图中，会经过Razor模板引擎处理并创建一个HTML，之后再返回给浏览器。有一些Tag Helpers，其实作为元素或实际的标签（如environment，cache等）。

它们使用HTML方式编写，同时利用了Razor的强大功能、C#的简洁和HTML的友好性。由于使用Tag Helpers感觉如此自然，看起来像标准的HTML，前端开发人员也可以轻松地适应，不需要学习C#语法；此外，它们可以在现有元素范围内获得完美的智能提示支持。

看一下简单的例子，注意上下两行代码的区别：

<img src="~/images/banner1.svg" />
<img src="~/images/banner1.svg" asp-append-version="true"  />

它们可能会使您想到Razor中的HTML Helpers，的确，它们也具有部分相同的功能，但是，Tag Helpers使用起来更加自然；我们通常会使用它们来扩展现有HTML元素，使用HTML Helpers是用来创建一个新的HTML元素。

内置Tag Helpers列表

表单相关Tag Helpers：

Form
FormAction
Input
Label
Option
Select
TextArea
ValidationMessage
ValidationSummary

缓存：

Cache
Distributed

其他：

Image
Anchor
Script
Link
Environment

注意：所有内置的Tag Helpers以 asp- 作为前缀。

其他标记详解

<!--<img src="/images/banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk">-->
<img src="~/images/banner1.svg" asp-append-version="true"  />

<!--<a href="/Home/About">home/index</a>-->
<a asp-controller="Home" asp-action="About">home/About</a>


<!--asp-src-include、asp-src-exclude-->
<!--
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery/dist/test/aa.js"></script>     ----排除
<script src="/lib/jquery/dist/test/aa.min.js"></script> ----排除
<script src="/lib/jquery/dist/test2/bb.js"></script>
-->
<script asp-src-include="~/lib/jquery/dist/**/**.js" asp-src-exclude="~/lib/jquery/dist/test/**.js"></script>


<!--
 这里src不可用。
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"></script>
<script>(window.jQuery && window.jQuery.fn||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.js\u0022\u003E\u003C\/script\u003E"));</script>
<script src="/lib/jquery/dist/jquery.js"></script>
-->
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn"></script>


<br/>

<!--
environment:
names 采用单个宿主环境名称或以逗号分隔的宿主环境名称列表，用于触发已包含内容的呈现。
-->
<environment names="Staging,Development">
    <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
</environment>

<environment include="Development">
    this will run in Development <br />
</environment>

<environment include="Production">
    this will run in Production <br />
</environment>

生成

<!--<img src="/images/banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk">-->
<img src="/images/banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk">

<!--<a href="/Home/About">home/index</a>-->
<a href="/Home/About">home/About</a>


<!--asp-src-include、asp-src-exclude-->
<!--
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery/dist/test/aa.js"></script>     ----排除
<script src="/lib/jquery/dist/test/aa.min.js"></script> ----排除
<script src="/lib/jquery/dist/test2/bb.js"></script>
-->
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery/dist/test2/bb.js"></script>


<!--
 这里src不可用。
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"></script>
<script>(window.jQuery && window.jQuery.fn||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.js\u0022\u003E\u003C\/script\u003E"));</script>
<script src="/lib/jquery/dist/jquery.js"></script>
-->
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"></script>
<script>(window.jQuery && window.jQuery.fn||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.js\u0022\u003E\u003C\/script\u003E"));</script>


<br>

<!--
environment:
names 采用单个宿主环境名称或以逗号分隔的宿主环境名称列表，用于触发已包含内容的呈现。
-->
    <strong>HostingEnvironment.EnvironmentName is Staging or Production</strong>
    this will run in Development <br>

Script and Link Tag Helpers

这两个Tag Helpers使我们在HTML中添加JS和CSS引用更容易；如果我们使用像CDN这样的外部资源，还能使用本地备用的URL地址。
此外，它们大大简化了使用全局模式时引用大量资源文件。
就像image标签助手，Script和Link Tag Helpers也可以帮助我们缓存资源文件。

<!--
 这里src不可用。
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"></script>
<script>(window.jQuery && window.jQuery.fn||document.write("\u003Cscript src=\u0022\/lib\/jquery\/dist\/jquery.js\u0022\u003E\u003C\/script\u003E"));</script>
<script src="/lib/jquery/dist/jquery.js"></script>
-->
<script src="https://cdn.bootcss.com/jquery1/3.3.1/jquery.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn"></script>

这个例子显示我们引用了来自 aspnetcdn 的 Bootstrap JS文件。如果该网站不可用，将引用本地文件，使用 asp-fallback-src Tag Helper；什么是 asp-fallback-test？它是一种知道是否会使用本地备用的方法，在这个示例中，我们使用一个特定的代码来检查Bootstrap的JS功能是否存在。

如果 asp-fallback-test 中的表达式返回false（falsy），将使用 asp-fallback-src 指定的源文件。

缓存 TagHelper

首先说一下 <cache> Tag Helper。与其它Tag Helper不同，其它Tag Helper被当作属性使用，缓存Tag Helper作为标签使用 - <cache>。它根据其属性指定的选项，将包含的内容缓存到内存中。

expires-after - 最常用的一个，它表示缓存内容过期的时间段（timespan）
expires-on - 过期的时间点
expires-sliding – 访问超过某个时间段后就过期（timespan）

vary-by 属性

它基于当前请求的查询参数创建唯一的缓存键。

<cache expires-after="@TimeSpan.FromSeconds(10)" vary-by-query="queryParam1">
    缓存10秒
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>

http://localhost:5000/home/cache?queryParam1=1

<h1>10秒比较</h1>
<cache expires-after="@TimeSpan.FromSeconds(10)">
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>
<br/>
<span>
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</span>



<h1>3个属性比较</h1>
<!--expires-on 过期的时间点-->
<cache expires-on="@DateTime.Today.AddHours(15)">
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>
<br/>
<!--expires-after 最常用的一个，它表示缓存内容过期的时间段（timespan）-->
<cache expires-after="@TimeSpan.FromSeconds(10)">
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>
<br/>
<!--expires-sliding 每次内容被请求后缓存被延长的时间（timespan）-->
<cache  expires-sliding="@TimeSpan.FromSeconds(10)">
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>



<h1>vary-by</h1>
<h2>vary-by-query</h2>
<!-- /home/cache?queryParam1=1 -->
<cache expires-after="@TimeSpan.FromSeconds(10)" vary-by-query="queryParam1">
    缓存10秒
    this will be cached in server memory. @DateTime.Now.ToString("hh:mm:ss tt")
</cache>

<h2>vary-by-route</h2>
<div>接受路由参数名称的逗号分隔列表，用于在路由数据参数值发生更改时触发缓存刷新。</div>

<h2>vary-by-cookie</h2>
<div>根据存储在cookie中的某一个值来创建唯一的缓存，逗号分隔cookie名称列表</div>


<h2>vary-by-header</h2>
<div>基于请求头的某一个参数来创建唯一的缓存，只需要单个请求头名称</div>


<h2>vary-by-user</h2>
<div>指定当已登录用户（或上下文主体）发生更改时是否应重置缓存.</div>

分布式 Cache

为什么我们应该使用分布式缓存？

支持更高的缩放比例（与内存缓存相比）
使用分布式缓存将缓存内存迁移到外部进程
我们在所有的Web服务器上得到一致的数据（用户总是得到相同的结果，无论他们访问到哪台Web服务器）
缓存的数据在服务器重新启动和部署时不会丢失
我们可以停止或添加Web服务器，不会丢失缓存的数据
现在我们谈谈我们前面提到的分布式缓存Tag Helper。

分布式缓存Tag Helper的行为与缓存Tag helper几乎相同。对<cache> Tag Helper提供每一个属性也可用于<distributed-cache> Tag Helper。

但是，Distributed Cache TagHelper的区别在于它使我们能够注入和使用外部缓存管理器，而不是使用默认的内存缓存管理器。

如果您需要将缓存的HTML内容存储在用SQL Server、Redis等分布式缓存中，那么您需要 Tag Helper。

ASP.NET Core MVC提供两个缓存管理器的实现，分别是SQL Server和Redis。

另一个分布式缓存需要注意的是，它需要一个name属性。

参考：http://www.cnblogs.com/tdfblog/p/caching-taghelpers-in-asp-net-core-mvc.html
https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/built-in/distributed-cache-tag-helper?view=aspnetcore-2.1

表单

Form

<form asp-controller="Demo" asp-action="Register" method="post">
    <!-- Input and Submit elements -->
</form>

生成的HTML

<form method="post" action="/Demo/Register">
    <!-- Input and Submit elements -->
    <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
</form>

请注意在HTTP Post操作方式中，RequestVerificationToken 与内置的[ValidateAntiForgeryToken]属性一起工作，同时，该请求方法会被标记为post方式。

Form Tag Helper的还提供了 asp-route-{ParameterName} 属性，其中参数名称为被添加到路由的值；并且还提供了@Html.BeginForm和@Html.BeginRouteForm另一种清晰的替代方式。

Input

这一个很简单，它是@Html.EditorFor(m => m.Name)的替代方式。

Lable

这一个也很简单，它是@Html.LabelFor(m => m.Name)的替代方式。
它与输入框Tag Helper配合使用：

 <input asp-for="Name" />
    <label asp-for="Name" />

定义两个类

public class AddressViewModel
{
    public string AddressLine1 { get; set; }
}

public class RegisterAddressViewModel
{
    [Required]
    [MinLength(50)]
    [MaxLength(200)]
    public string Description { get; set; }
        
    [Display(Name = "Register Email")]
    public string Email { get; set; }

    [DataType(DataType.Password)]
    public string Password { get; set; }

    public AddressViewModel Address { get; set; }
}

TextArea

<textarea asp-for="Description"></textarea><br />

生成

<textarea data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '200'." data-val-maxlength-max="200" data-val-minlength="The field Description must be a string or array type with a minimum length of '50'." data-val-minlength-min="50" data-val-required="The Description field is required." id="Description" name="Description"></textarea>

Validation

我们使用Validation Tag Helper为我们的视图模型的属性显示验证消息，使用方式也很简单：

<span asp-validation-for="Name"></span>

生成

<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

综合例子

@model RegisterAddressViewModel

<form asp-controller="Demo" asp-action="RegisterAddress" method="post">
    <label asp-for="Email"></label> :  <input asp-for="Email" /> <br />
    <label asp-for="Password"></label>: <input asp-for="Password" /> <br /><span asp-validation-for="Password"></span><br />
    <label asp-for="Address"></label>: <input asp-for="Address.AddressLine1" /><br />
    <textarea asp-for="Description"></textarea><br />
    <button type="submit">Register</button>
</form>

生成

<form method="post" action="/Demo/RegisterAddress" novalidate="novalidate">
    <label for="Email">Register Email</label> :  <input type="text" id="Email" name="Email" value=""> <br>
    <label for="Password">Password</label>: <input type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password"> <br><span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span><br>
    <label for="Address">Address</label>: <input type="text" id="Address_AddressLine1" name="Address.AddressLine1" value=""><br>
    <textarea data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '200'." data-val-maxlength-max="200" data-val-minlength="The field Description must be a string or array type with a minimum length of '50'." data-val-minlength-min="50" data-val-required="The Description field is required." id="Description" name="Description"></textarea><br>

    <button type="submit">Register</button>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8E8SUbZpCkNIprGBJ28vOqxP8Qqc_XkuoKoGsVS2b7N-WBCS68EFGRFQBcZRARdNip0nQw45i8zy4f5XYlA1WGbaeEvYY7GDPwtM0bbjUZSHEAHEptxRzGMSXzIzyBnKkQLtvZkdjBhF5zX6VoBke38"></form>

自定义 Tag Helpers

通过创建自定义Tag Helpers，我们可以扩展现有元素或创建我们自己的元素。
Tag Helper是实现ITagHelper接口类的统称。MVC为我们提供了该接口的抽象类TagHelper，它位于 Microsoft.AspNetCore.Razor.Runtime 程序集中。因此，我们可以直接从TagHelper类继承，我们主要需要实现以下方法：

  public virtual void Process(TagHelperContext context, TagHelperOutput output);

  public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output);

Process方法是具体的逻辑实现。它需要传递 Tag Helper上下文的实例和Tag Helper输出（我们可以用它来读取和更改Tag Helper范围内的实际内容）

简单示例

我们创建自己的Tag Helper。假设我们将使用<simple> </simple>Tag Helper，其中的内容将是粗体。

我们将要创建一个名为CustomTagHelpers的新项目。因此，程序集名称也将是 CustomTagHelpers。

首先，我们创建一个新的Tag Helper。使用Visual Studio，我们可以这样操作添加 - > 新建项 - > Web - > Razor 标记帮助器。

这是默认生成的代码：

    public class SimpleTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "strong";          
        }
    }

为了能够在我们的视图中使用新创建的Tag Helper，我们必须在 ViewImports.cshtml 文件中添加下面这一行：

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

以上代码我们使用了通配符表明所有的 tag helper 都将在我们的程序集中启用。
@addTagHelper 之后的第一个字符串指明了要加载的 tag helper（我们使用 "*" 代表所有 tag helper ），
第二个字符串 “IdentityDemo2” 指明了此 tag helper 所在的程序集。除此之外要注意的是，
使用通配符的第二行，引入了 ASP.NET Core MVC 的 tag helper（这些辅助类在 Tag Helpers 介绍中已经讨论过）。
是 @addTagHelper 命令使 tag helper 在 Razor 视图中起作用的。你还可以提供如下所示的 tag helper 的全名（FQN）：

<div>
    <Simple>2.simple.你是天边的亿朵元</Simple>
</div>

我们将在Visual Studio中看到这个simple 的标签已经变成紫色，并且被识别为Tag Helper。如果我们运行应用程序，我们将以粗体显示此文本。

如果我们查看HTML输出，我们可以看到simple 标签被strong所替代：

<div>
    <strong>2.simple你是天边的亿朵元</strong>
</div>

改变属性，构建一个 Email 标签

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

        // Can be passed via <email mail-to="..." />. 
        // Pascal case gets translated into lower-kebab-case.
        public string MailTo { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";    // Replaces <email> with <a> tag

            var address = MailTo + "@" + EmailDomain;
            output.Attributes.SetAttribute("href", "mailto:" + address);
            //output.Content.SetContent(address);
        }
    }

例如：

<email>Support</email>

生成

<a href="mailto:@contoso.com">Support</a>

资料：

Sweet-Tang,ASP.NET Core MVC – Tag Helpers 介绍
Form tagHelper，窗体中使用TagHelpers
作者：Rick Anderson，翻译：张海龙(jiechen)，自定义辅助类标签 Email

 

分类: ASP.NET Core