13518219792
这期内容当中小编将会给大家带来有关MVC+jQuery开发B/S系统怎么进行表单提交，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联公司是一家专注于成都网站设计、成都网站建设与策划设计,盐田网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:盐田等地区。盐田做网站价格咨询:18980820575
Jquery是一个优秀的Javascrīpt框架。MVC是一个设计模式，它强制性的使应用程序的输入、处理和输出分开。今天我们就谈如何用JQuery+MVC来处理表单的提交。
想达到的效果：
1、提交前的表单验证
2、表单验证
3、提交后的反馈信息
ok，先说一下工作的原理。
前台
，action指定了接受表单的处理页面。method这里我们只说post。 如果用ajax提交表单，自然xxx.aspx便是请求的url。ajax请求后的callback便是响应表单的提交结果(错误、成功)，我们提交的反馈信息用一个 浮层(lightbox)来表示。 不至于用 alert(""); 这样铛铛铛很囧。我们引入一个Jquery的插件http://www.malsup.com/jquery/form/#api 这是一个略有名气的插件，方便易用。关于其用法，大家可以搜索下。
那么我们需要做的就是：
1、jquery.form.js的使用
2、lightbox的实现
3、如何验证
代码：
$.fn.submitForm = function(args) { var url, id, callback, before; id = this.attr("id"); if (typeof (args) == "string") { url = args; before = undefined; callback = undefined; } else { args = args || new Object(); url = args.url || this.attr("action"); if (typeof (args) == "function") { callback = args; } else { before = args.before; callback = args.callback; } } //输入验证 this.inputValidate(); //form没有url 则是伪提交 if (url == undefined || url == "") { $("#" + id).submit(function() { if ($("#" + id).submitValidate()==false) return false; //验证成功就执行callback callback(); }); } else { this.ajaxForm({ url: url, beforeSubmit: function(a, f, o) { //提交验证 if ($("#" + id).submitValidate() == false) return false; if (before != undefined && before() == false) { return false; } o.dataType = "json"; }, success: function(data) { if (data == "" || data == null) { return false; } $("#myMsg").showMsg(data, callback); return false; } }); } return this; };上面的方法很简单，就是form插件的使用，还有几个我们需要实现的方法。(inputValidate,submitValiedate,ajaxMsg)
既然是ajax提交，我们则需要给客户端一个反馈信息，然后用Lightbox呈现。
一：我们定义一个JsonMessage类
public class JsonMessage { public int result { get; set; } //0错误 1正确 2提示 3警告 public string title { get; set; }//Lightbox窗口的标题 public string content { get; set; }//message的具体内容 public string redirect { get; set; }//弹出后自动跳转的到哪里？ public object callBackData { get; set; }//客户端需要的数据 比如 一个新增的id或整个model }MVC返回Json(jsonmsg1)，客户端的callback便可以得到这个对象的json格式。
(注意：如果是附件的表单提交，则不能识别JsonResult格式。具体我还没有研究怎么回事，这种情况只能response一个json字符串，可以用System.Web.Script.Serialization.JavaScriptSerializer来序列化对象，也很方便。)
二：我们写一个ajaxMsg来实现lightbox，这是我自己写的Lightbox，比较简陋，如果不喜欢，也可以用一些知名的插件。
代码：
(function($) { $.fn.showMsg = function(model, callback, fail) { var me = this; if (me.length == 0) { $("body").append("Ajax消息的样式完全可以用CSS来做，包括div的定位都可以在css里写js代码来实现。
不知道有没有人能理解我这里的callback，我说一下他的用到的情况。 实际应用中我还有一个ajaxWin来实现弹窗，弹窗里的表单提交后一般需要关闭弹窗，然后更新一些数据(比如刷新列表)。这时就需要 submit后的callback动作。另外就是我目前还有使用到redirect这个属性。呵呵，我之前的系统需要大量的跳转处理,这些跳转也是无刷新的，有一个数组来记录访问的地址。可以实现后退和前进。
三：好了，Lightbox已经实现了，也能show出各种类型的信息了。
下面还剩下表单验证。 其实表单验证大有文章可做。我这也不能一一做到。目前只做了些简单的验证。以后会实现比较复杂的错误提示效果。其实这都是体力活，上面没要求我也懒的弄。
验证我采用的是给control一些自定义属性，然后再判断其值是否合法。
代码：
//输入验证 $.fn.inputValidate = function() { $("input,select,textarea", this).each(function() { var me = $(this); var isnull = me.attr("isnull") || "1"; var dvalue = me.attr("dvalue"); me.focus(function() { if (this.value == "") $(this).inputRemove(); }); me.keyup(function() { if (this.value == "") $(this).inputRemove(); }); //①非空检查 if (isnull == "0") { me.blur(function() { if ($(this).val() == "" || $(this).val() == dvalue) $(this).inputError("此项必须填写！"); else $(this).inputRight(); }); } //②正则注册onchange事件 var regexValue = me.attr("regex"); if (regexValue != undefined) { var thisValue = me.val(); me.blur(function() { var re = new RegExp(regexValue, "ig"); if (this.value != "" && !re.test(this.value)) { me.inputError("格式不正确！"); return result = false; } else me.inputRight(); }); } //③最小长度 var minLength = me.attr("minlength") || 0; if (minLength != undefined) minLength = parseInt(minLength); me.blur(function() { if (me.val() != null) if (me.val().length < minLength) { me.inputError("长度不能小于" + minLength); } }); //④其他 }); }; //提交验证 $.fn.submitValidate = function() { var result = true; $("input:visible,select:visible,textarea:visible", this).each(function() { var me = $(this); var thisValue = ""; if (me.attr("type") == "radio" || me.attr("type") == "checkbox") { thisValue = $("input[name='" + this.name + "']:checked").val(); } else thisValue = me.val(); //判断是否违法 //① 是否必填 且不能为空或缺省值 if (me.attr("isnull") == "0") { if (thisValue == "" || (thisValue != "" && thisValue == me.attr("dvalue"))) { me.inputError("此项必须填写！"); return result = false; } else me.inputRight(); } //② 是否符合格式 属性为 regex 正则 if (thisValue != "") { var reValue = $(this).attr("regex"); if (reValue != undefined) { re = new RegExp(reValue, "ig"); if (!re.test(thisValue)) { me.inputError("格式不正确！"); return result = false; } else me.inputRight(); } } }); return result; }; $.fn.inputError = function(msg) { this.inputRemove(); //this.focus(); $("span", this.parent()).hide(); this.parent().addClass("focus").append("" + (msg || '') + ""); } $.fn.inputRight = function(msg) { this.inputRemove(); //this.focus(); $("span", this.parent()).hide(); this.parent().addClass("focus").append("" + (msg || '') + ""); } $.fn.inputRemove = function() { this.removeClass("focus"); $(".right,.error", this.parent()).remove(); $("span", this.parent()).show(); } 每一种方法，我们都应该从性能和发功效率上来考虑，要做到两者兼得是很不容易的。通过本文作者的分析，希望会对你有所帮助。
上述就是小编为大家分享的MVC+jQuery开发B/S系统怎么进行表单提交了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
