asp.net core 中TagHelper使用

原文地址：https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/working-with-forms#the-input-tag-helper

asp.net core里面，TagHelper是一项非常人性化的封装，使得表单提交都变得很简洁。废话不多说，通过小例子对比获得优点。

Form路由标签

特点：

1、为MVC控制器action生成Html中action特性或者定义路由，常使用的标签有asp-controller，asp-action，asp-route

功能：

1、生成html路由功能代码。

2、生成请求验证令牌，阻止外部恶意请求，与之前[ValidateAntiForgeryToken]特性效果一样。

3、生成可选的两种请求，Html.BeginForm and Html.BeginRouteForm。

生成Html.BeginForm请求：

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

等同如下效果的代码：

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

生成Html.BeginRouteForm请求：

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

等同如下效果

<form asp-controller="Account" asp-action="Login"
     asp-route-returnurl="@ViewData["ReturnUrl"]"
     method="post" class="form-horizontal" role="form">

 

Input标签

通常使用的标签有asp-for

特点：

1、asp-for类似于mvc下面的model表达式一样的一样，等价于m => m.Property1.Property2

功能：

1、为Input元素添加ID和Name特性，并且其值为，生成asp-for特性值。

2、asp-for对应的实体字段添加后台data annotation特性

3、如果特性重复，并不会生成重复的特性

4、如果asp-for对应的实体字段有验证特性，则会生成对应的html5验证特性

常用实体字段及其特性生成html类型列举

.NET type	Input Type
Bool	type=”checkbox”
String	type=”text”
DateTime	type=”datetime”
Byte	type=”number”
Int	type=”number”
Single, Double	type=”number”

 

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”

using System.ComponentModel.DataAnnotations;

namespace FormsTagHelper.ViewModels
{
    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" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Register</button>
</form>

上面代码生成如下对应的html代码：

 <form method="post" action="/Demo/RegisterInput">
       Email:
       <input type="email" data-val="true"
              data-val-email="The Email Address field is not a valid e-mail address."
              data-val-required="The Email Address field is required."
              id="Email" name="Email" value="" /> <br>
       Password:
       <input type="password" data-val="true"
              data-val-required="The Password field is required."
              id="Password" name="Password" /><br>
       <button type="submit">Register</button>
     <input name="__RequestVerificationToken" type="hidden" value="<removed for brevity>" />
   </form>

 后续taghelper