.net core Razor视图的Tag Helper

Tag Helper

在 Razor 文件中，Tag Helpers 能够让服务端代码参与创建和渲染 HTML 元素。
Tag Helpers通过丰富的智能感知环境来创建 HTML 和 Razor 标记，为我们提供了友好的开发体验，同时让生成的代码更加高效、可靠，可维护。
Tag Helpers的内容比较多，特地整理一下。。。

Form Tag Helper

直接举例：

<form asp-controller="Demo" asp-action="Register" method="post">

</form>

生成的HTML：

<form method="post" action="/Demo/Register">

  <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
 </form>

MVC 运行时会根据 Form Tag Helper 的属性 asp-controller 和 asp-action 生成 action的属性值。

使用命名路由

通过asp-route可以让下面的表单使用路由规则中name为register的路由。

<form asp-route="register" method="post">
    <!-- Input and Submit elements -->
</form>

生成的HTML：

<form asp-controller="Account" asp-action="Login"
  method="post" class="form-horizontal" role="form">
  <!-- Input and Submit elements -->
</form>

Input Tag Helper

作用：

1. 为 asp-for 属性中指定的表达式名称生成 id 和 name 属性。

2. 基于模型类型和应用在模型属性上的 Tpye 特性来设置 HTML type 的属性值。

3. 如果 HTML type 属性已被指定，则不会覆盖它。

4. 根据应用在模型属性上的 验证 特性生成 HTML5 验证属性。

上面第2条说到Tag Helper基于 .NET 类型和特性来设置 HTML type 属性。以下是常见的 .NET 类型和特性生成出的 HTML 类型：

.Net类型生成的HTML类型：

.Net类型	Input类型
Bool	type=”checkbox”
String	type=”text”
DateTime	type=”datetime”
Byte	type=”number”
Int	type=”number”
Single, Double	type=”number”

.Net特性生成的HTML类型：

Attribute	Input Type
[EmailAddress]	type=”email”
[Url]	type=”url”
[HiddenInput]	type=”hidden”
[Phone]	type=”tel”
[DataType(DataType.Password)]	type=”password”
[DataType(DataType.Date)]	type=”date”
[DataType(DataType.Time)]	type=”time”

举个栗子：

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email Address")]
    public string Email { get; set; }

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

@model RegisterViewModel

<form asp-controller="Demo" asp-action="RegisterInput" method="post">
    Email:  <input asp-for="Email" /> <