星空网 > 软件开发 > 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,把用户修改后的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);    }

 

最终效果:

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

 




原标题:通过后台验证后提交表单,阻止表单默认提交

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

JUMIA入驻开店新手教程,JUMIA平台怎么样?:https://www.ikjzd.com/articles/96280
跨境电商物流模式有哪些?:https://www.ikjzd.com/articles/96281
跨境电商卖家如何在品牌至上的时代,做好“体面工程”:https://www.ikjzd.com/articles/96282
做亚马逊卖家,必须知道这件事!:https://www.ikjzd.com/articles/96284
亚马逊站外引流之AMZPromoter 没听过用过的卖家看过来:https://www.ikjzd.com/articles/96285
为什么很多人在做亚马逊无货源?:https://www.ikjzd.com/articles/96287
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流