asp.netcore标签助手之TagHelper+Form的用法示例-创新互联

这篇文章主要介绍了asp.net core标签助手之TagHelper+Form的用法示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联主要从事网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务平远,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

TagHelper能够去替代原来在@Html帮助类中的一些功能，比如form，a等标签，而且写在html代码中更加的舒服，符合html的语法。






@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区分，我写了两者的比较版本

@Html.LabelFor(m=>m.Password) @Html.PasswordFor(m=>m.Password) @Html.ValidationMessageFor(m=>m.Password)

public IActionResult SignUp(SignUpViewModel model) { if (ModelState.IsValid) { return RedirectToAction("Index"); } else { return RedirectToAction("Index",model); } }

protected IHtmlGenerator Generator { get; } [HtmlAttributeNotBound] [ViewContext] public ViewContext ViewContext { get; set; } ///

/// An expression to be evaluated against the current model. ///

[HtmlAttributeName(ForAttributeName)] public ModelExpression For { get; set; }

//自定义标签助手名为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()); } }

重庆分公司，新征程启航

asp.netcore标签助手之TagHelper+Form的用法示例-创新互联

其他资讯