TagHelper能夠去替代原來在@Html幫助類中的一些功能，比如form，a等標籤，而且寫在html代碼中更加的舒服，符合html的語法。
<!--標籤助手版form--><form asp-controller="Home" asp-action="Index" class="form-horizontal" method="post"></form><!--Html幫助類版form-->@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" }))
{
}
那麼，在Html幫助類中最有用的Model與Tag的轉換，自動錶單的生成，微軟是否也給出瞭解決方案呢？答案是肯定的。Microsoft還專門分出了單獨的說明頁面來講述TagHelper的自動錶單生成，英文功底好的同學可以直接查看MS的官方文檔《Introduction to using tag helpers in forms in ASP.NET Core》。
文檔中提及了對於表單控件，我們可以直接在asp-for屬性中直接填寫Model中的屬性名，即可自動生成對應的控件類型和填入默認值。
ok,我們來嘗試一下。
（1）創建ViewModel類
public class SignUpViewModel
{
[Required]
[Display(Name ="用戶名")]
[MaxLength(30,ErrorMessage = "用戶名不能超過30")] public string UserName { get; set; }
[Required]
[DataType(DataType.Password)]
[RegularExpression(@"((?=.*\d)(?=.*\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))^$",ErrorMessage ="密碼至少包含兩種以上字符")]
[Display(Name ="密碼")] public string Password { get; set; }
[DataType(DataType.MultilineText)] public string Description { get; set; }
}
對於寫過asp.net mvc的開發者肯定不會陌生這種驗證方式~~
（2）編寫TagHelper標籤
爲了與Html區分，我寫了兩者的比較版本
<form asp-controller="Home" asp-action="SignUp" method="post" class="form-horizontal"> <div class="form-group"> <label asp-for="UserName"></label> <input asp-for="UserName" /> <span asp-validation-for="UserName"></span> </div> <div class="form-group"> @Html.LabelFor(m=>m.Password) @Html.PasswordFor(m=>m.Password) @Html.ValidationMessageFor(m=>m.Password) </div> <div class="form-group"> <label asp-for="Description"></label> <textarea asp-for="Description"></textarea> <span asp-validation-for="Description"></span> </div> <div class="form-group"> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </div></form>
（3）驗證表單
public IActionResult SignUp(SignUpViewModel model)
{ if (ModelState.IsValid)
{ return RedirectToAction("Index");
} else
{ return RedirectToAction("Index",model);
}
}
（4）結果
ok,如果覺得這樣就結束了，那麼就不算TagHelper高級應用，那隻能充其量在翻譯MS的文檔罷了。
那麼，重點來了，既然MS能讓我們創建自定義TagHelper，那我爲什麼不能在TagHelper當中使用Model的值呢？於是我開始在asp.net core開源github項目中尋找，終於是找到了ImputTagHelper的源碼。
在源碼中，由三個對象一起來完成標籤的生成
protected IHtmlGenerator Generator { get; }
[HtmlAttributeNotBound]
[ViewContext] public ViewContext ViewContext { get; set; } /// <summary>
/// An expression to be evaluated against the current model. /// </summary> [HtmlAttributeName(ForAttributeName)] public ModelExpression For { get; set; }
三個對象均是通過依賴注入的方式來實現對象的生成。
（1）其中Generator爲發生器，負責生成各種類型的標籤
（2）ViewContext爲視圖上下文，獲取視圖上下文相關信息
（3）For獲取到當前Model的相關信息，包括Required等關鍵信息
有了這三個標籤，我們也可以在自定義的標籤助手中獲取你想要的Model信息，比如我可以向form中填入Model信息，讓標籤助手自動生成form表單中的所有內容；也可以向ul標籤中填入樹信息，讓其自動生成樹列表等等
如下就是我編寫的自動生成表單
//自定義標籤助手名爲bg-form
[HtmlTargetElement("bg-form")] public class FormTagHelper : TagHelper
{
[ViewContext]
[HtmlAttributeNotBound] public ViewContext ViewContext { get; set; }
[HtmlAttributeName("asp-for")] public ModelExpression For { get; set; } protected IHtmlGenerator Generator { get; } public FormTagHelper(IHtmlGenerator generator)
{
Generator = generator;
}
[HtmlAttributeName("asp-controller")] public string Controller { get; set; }
[HtmlAttributeName("asp-action")] public string Action { get; set; } //異步方法
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "form"; if (!string.IsNullOrWhiteSpace(Controller))
{
output.Attributes.Add("action", "/" + Controller + "/" + Action);
}
output.Attributes.Add("class", "form-horizontal"); //獲取子屬性
var props = For.ModelExplorer.Properties; foreach (var prop in props)
{ //生成表單
var div = new TagBuilder("div");
div.AddCssClass("form-group"); var label = Generator.GenerateLabel(ViewContext, prop, null, prop.Metadata.DisplayName, null); var input = Generator.GenerateTextBox(ViewContext, prop, prop.Metadata.PropertyName, null, null, null); var span = Generator.GenerateValidationMessage(ViewContext, prop, prop.Metadata.PropertyName, null, ViewContext.ValidationMessageElement, null);
div.InnerHtml.AppendHtml(label);
div.InnerHtml.AppendHtml(input);
div.InnerHtml.AppendHtml(span);
output.Content.AppendHtml(div);
} //添加按鈕
var btn = new TagBuilder("div");
btn.AddCssClass("form-group"); var submit = new TagBuilder("input");
submit.Attributes.Add("type", "submit");
submit.Attributes.Add("value", "提交"); var reset = new TagBuilder("input");
reset.Attributes.Add("type", "reset");
reset.Attributes.Add("value", "重置");
btn.InnerHtml.AppendHtml(submit);
btn.InnerHtml.AppendHtml(reset);
output.Content.AppendHtml(btn); //將原有的內容添加到標籤內部
output.Content.AppendHtml(await output.GetChildContentAsync());
}
}
只要在html加入
<bg-form asp-controller="Home" asp-action="SignUp" asp-for="@Model"></bg-form>
即可自動生成表單
