通过后台验证后提交表单,阻止表单默认提交

2019-11-17 02:05:42

字体：大中小

来源：转载

供稿：网友

通过后台验证后提交表单,阻止表单默认提交

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,把用户修改后的DepartmentName值与页面的@Model.DepartmentName值比较             6             if (departmentName !== '@Model.DepartmentName') {//值已改变,去后台验证是否有同名 7                 $.post('@Url.Action("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);        }

最终效果: