MVC遇上bootstrap后的ajax表单验证
程序员文章站
2022-04-29 09:25:00
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验...
使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jquery.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点。怎么解决呢?
当然你可以专门写一个针对此的jquery插件,我觉得蛮麻烦的,喜欢写插件的研究下吧。
首先nuget获取一个 mvc editortemplates for bootstrap 3 的组件,有了他以后就有了一些模版,比如比较简单的一个text:
@model object <div class="form-group@(html.validationerrorfor(m => m, " has-error"))"> @html.labelfor(m => m, new { @class = "control-label" }) <div class="controls"> @html.textbox( "", viewdata.templateinfo.formattedmodelvalue, viewbag.cleartextfield == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" } ) @html.validationmessagefor(m => m, null, new { @class = "help-block" }) </div> </div>
这样子以后在使用editorfor后就会直接输出bootstrap需要的html,比较方便。
我们看到里面已经有了验证失败的has-error的处理,第二个问题来了,我们需要前端验证,ajax验证也行啊,还有自定义验证呢?
于是乎继续利用mvc自带的模型验证,刚才获取的组件中有个validation类,我们先在里面添加一个扩展方法用于非强类型
public static mvchtmlstring validationerror(this htmlhelper htmlhelper, string field, string error) { if (haserror(htmlhelper, modelmetadata.fromstringexpression(field, htmlhelper.viewdata), field)) return new mvchtmlstring(error); else return null; }
view中即可添加:
<div class="form-group@(html.validationerror("department", " has-error"))"> <label class="control-label" for="departmentid">所在部门</label> <div class="controls"> <span id="deptname"> </span><a id="btnselectdepartment">选择部门</a> <input class="form-control" data-val="true" data-val-required="部门是必需的。" id="departmentid" name="departmentid" type="hidden" value=""> @html.validationmessage("department", null, new { @class = "help-block" }) </div> </div>
最后在脚本中处理ajax提交和回发的处理,不知道用mvc的ajax.beginform能不能更方便点,不过个人觉得这东西不是很灵活,所以继续用ajaxsubmit及jquery.ajax:
//ready var $divuserform = $("#divuserform"); $divuserform.dialog({ title: '新建用户',//..... }); $("#btncreateuser").click(function () { var nodes = ztreeobjleft.getselectednodes(); if (nodes.length > 0) { createuserform($divuserform); } }) function createuserform(form) { var $divuserform = form; $.ajax({ url: "createuser", success: function (html) { createuserformsuccesscallback(html, $divuserform); } }); } function initselectdepartmentwhencreateuser() { $("#btnselectdepartment").departmentselection({ onselected: function (name, id) { $("#deptname").text(name); $("#departmentid").val(id); } }); } function createuserformsuccesscallback(html, form) { var $divuserform = form; $divuserform.children().children().html(html); $("#divuserform").dialog("open"); var $form = $divuserform.find("form") initselectdepartmentwhencreateuser(); $form.submit(function () { $form.ajaxsubmit(function (data) { if (data == "success") { $("#divuserform").dialog("close"); $("#divuserform").clearform(); } else { createuserformsuccesscallback(data, form); } }); event.preventdefault(); }); }
后台action方法中我们便可为其补充自定义验证:
if (!departmentid.hasvalue) { modelstate.addmodelerror("department", "必须选择部门"); } if (modelstate.isvalid) { user.id = guid.newguid(); user.createtime = datetime.now; if (departmentid.hasvalue) { var dept = new deptuserrole(); dept.departmentid = departmentid.value; dept.ismain = true; dept.roleid = roleid.value; user.deptuserroles.add(dept); } db.users.add(user); await db.savechangesasync(); return content("success"); } return view(user);
大致效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Android获取移动网络信号强度的方法
推荐阅读
-
MVC遇上bootstrap后的ajax表单验证
-
MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
-
MVC遇上bootstrap后的ajax表单验证
-
MVC+bootstrap界面怎么进行ajax表单验证
-
MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
-
MVC+bootstrap界面怎么进行ajax表单验证
-
MVC遇上bootstrap后的ajax表单验证