你的位置:首页 > ASP.net教程

[ASP.net教程]通过后台验证后提交表单,阻止表单默认提交

Todo:

有一个修改页面,其中有一个DepartmentName标签不允许在数据库中同名!当提交表单时,就从数据库中查询出是否有该名字的数据.如果有则返回false,否则返回true.然后前台根据返回的数据再来判断是否要提交!

效果图:

 

然而,在真正要写代码的时候发现了两个非常严重的问题!

待解决:

1.如何阻止表单提交(主要问题)

2.无论如何要修改的这条数据在数据库中都至少存在一条(不出意外的话数据库中应该只会存在一条相同DepartmentName的数据,所以返回的总是false)

 

解决方法:

前台的Html代码:

 1 @using (Html.BeginForm()) 2 { 3   @Html.AntiForgeryToken() 4  5   <div class="form-horizontal"> 6     <h4>@Html.DisplayFor(model => model.DepartmentName)===></h4> 7     <hr /> 8     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 9     @Html.HiddenFor(model => model.Id)10     <div class="form-group">11       @Html.LabelFor(model => model.DepartmentName, htmlAttributes: new { @class = "control-label col-md-2" })12       <div class="col-md-10">13         @Html.EditorFor(model => model.DepartmentName, new { htmlAttributes = new { @class = "form-control" } })14         @Html.ValidationMessageFor(model => model.DepartmentName, "", new { @class = "text-danger" })15       </div>16     </div>17     <div class="form-group">18       @Html.LabelFor(model => model.DepartmentDescription, htmlAttributes: new { @class = "control-label col-md-2" })19       <div class="col-md-10">20         @Html.EditorFor(model => model.DepartmentDescription, new { htmlAttributes = new { @class = "form-control" } })21         @Html.ValidationMessageFor(model => model.DepartmentDescription, "", new { @class = "text-danger" })22       </div>23     </div>24     <div class="form-group">25       <div class="col-md-offset-2 col-md-10">26         <input type="submit" value="保存" class="btn btn-success" />27       </div>28     </div>29   </div>30 }

View Code 

 前台的javascript代码:

 1 <script type="text/javascript"> 2     $('form').submit(function () {//把要提交的表单用jquery.submit()方法提交 3       var form = $(this);//获取当前要提交的表单 4       var departmentName = $('#DepartmentName').val();//获取要提交的DepartmentName 5       //解决第二个问题:因为是asp.mvc,[email protected]ntName值比较       6       if (departmentName !== [email protected]') {//值已改变,去后台验证是否有同名 7         $.post([email protected]("CheckDepartmentName")', {//ajax异步 8           departmentName: departmentName 9         }, function(data) {10           if (data) {//没有相同名11             form.unbind('submit');//解除在这个form表单上绑定的各种东西(很重要,不然就一直循环个不停)12             form.submit();//成功提交13           } else {14             showDialog("已有相同院系");//已有相同名:弹出提示框15           }16         });17       } else {//DepartmentName值没有改变18         form.unbind('submit');//解除在这个form表单上绑定的各种东西(很重要,不然就一直循环个不停)19         form.submit();//成功提交20       }21       return false;//返回false(非常重要)22     });23     //这是封装的提示框方法:bootstrap-dialog(喜欢的可以耍耍)24     function showDialog (dialogMessage, dialogType) {25       var dialog = BootstrapDialog.show({  26         title: '提示',27         message: dialogMessage28       });      29       if (dialogType==='success') {30         dialog.setType(BootstrapDialog.TYPE_SUCCESS);31       } else {32         dialog.setType(BootstrapDialog.TYPE_DANGER);33       }34       var time = setTimeout(function () {35         dialog.close();36         clearTimeout(time);37       }, 3000);38     };39   </script>

后台验证代码:

public JsonResult CheckDepartmentName(string departmentName)    {      var query = db.Departments.Count(d => d.DepartmentName == departmentName);      return Json(query < 1, JsonRequestBehavior.AllowGet);    }

 

最终效果: