MVC+jQuery开发B/S系统：表单提交

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呈现。

#p#

一：我们定义一个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("

");

$(me.selector).showMsg(model, callback);

return;

}

if (model == undefined)

return;

model.content = model.result == 1 && model.content == undefined ? "操作成功！" : model.content;

me.html(model.content);

me.removeClass().addClass("message_" + model.result).show(100);

if (model.result1 == 1 && fail != undefined)

{

fail(model);

}

if (model.result == 1 && callback != undefined)

{

callback(model);

}

setTimeout(function()

{

if (me.css("display") != "none")

{

me.hide(100);

}

}, 3000);

return me;

}

})(jQuery);

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系统：表单提交
网页路径：http://zsjierui.cn/article/dpohdhs.html

网站建设知识

MVC+jQuery开发B/S系统：表单提交

其他资讯