asp.net core标签助手的高级用法TagHelper+Form
上一篇博客我讲解了taghelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下taghelper的高级用法~~,大家也可以在我的博客下随意留言。
对于初步接触asp.net core的骚年可以看看我对taghelper的了解和看法:
《asp.net core新特性(1):taghelper》
之后,我也会继续撰写博文,继续分享asp.net core的一些新特性,比如di,viewcomponent以及bower等asp.net mvc中没有的新东西。
ok,咱们就开始吧~~
在之前我对taghelper的分享当中提及了,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>
即可自动生成表单
over,今天关于taghelper就分享到这
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: MySQL慢查询日志的配置与使用教程
下一篇: .net下log4net使用方法详解