通過后臺驗證后提交表單,阻止表單默認提交

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);        }

最終效果: