原文地址: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