MVC+jQuery開發(fā)B/S系統(tǒng)怎么進(jìn)行表單提交

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)MVC+jQuery開發(fā)B/S系統(tǒng)怎么進(jìn)行表單提交，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Jquery是一個(gè)優(yōu)秀的Javascrīpt框架。MVC是一個(gè)設(shè)計(jì)模式，它強(qiáng)制性的使應(yīng)用程序的輸入、處理和輸出分開。今天我們就談如何用JQuery+MVC來(lái)處理表單的提交。

想達(dá)到的效果：

1、提交前的表單驗(yàn)證

2、表單驗(yàn)證

3、提交后的反饋信息

ok，先說一下工作的原理。

前臺(tái)<form action='xxx.aspx' method='post'></form>，action指定了接受表單的處理頁(yè)面。method這里我們只說post。 如果用ajax提交表單，自然xxx.aspx便是請(qǐng)求的url。ajax請(qǐng)求后的callback便是響應(yīng)表單的提交結(jié)果(錯(cuò)誤、成功)，我們提交的反饋信息用一個(gè) 浮層(lightbox)來(lái)表示。 不至于用 alert(""); 這樣鐺鐺鐺很囧。

我們引入一個(gè)Jquery的插件http://www.malsup.com/jquery/form/#api 這是一個(gè)略有名氣的插件，方便易用。關(guān)于其用法，大家可以搜索下。

那么我們需要做的就是：

1、jquery.form.js的使用

2、lightbox的實(shí)現(xiàn)

3、如何驗(yàn)證

代碼：

$.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;              }          }          //輸入驗(yàn)證          this.inputValidate();          //form沒有url 則是偽提交          if (url == undefined || url == "")   {              $("#" + id).submit(function() {                  if ($("#" + id).submitValidate()==false)                      return false;                  //驗(yàn)證成功就執(zhí)行callback                  callback();              });          }          else   {              this.ajaxForm({                  url: url,                  beforeSubmit: function(a, f, o)   {                      //提交驗(yàn)證                      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;      };

上面的方法很簡(jiǎn)單，就是form插件的使用，還有幾個(gè)我們需要實(shí)現(xiàn)的方法。(inputValidate,submitValiedate,ajaxMsg)
既然是ajax提交，我們則需要給客戶端一個(gè)反饋信息，然后用Lightbox呈現(xiàn)。

一：我們定義一個(gè)JsonMessage類

public class JsonMessage  {  public int result { get; set; } //0錯(cuò)誤 1正確 2提示 3警告  public string title { get; set; }//Lightbox窗口的標(biāo)題  public string content { get; set; }//message的具體內(nèi)容  public string redirect { get; set; }//彈出后自動(dòng)跳轉(zhuǎn)的到哪里？  public object callBackData { get; set; }//客戶端需要的數(shù)據(jù) 比如 一個(gè)新增的id或整個(gè)model  }

MVC返回Json(jsonmsg1)，客戶端的callback便可以得到這個(gè)對(duì)象的json格式。
(注意：如果是附件的表單提交，則不能識(shí)別JsonResult格式。具體我還沒有研究怎么回事，這種情況只能response一個(gè)json字符串，可以用System.Web.Script.Serialization.JavaScriptSerializer來(lái)序列化對(duì)象，也很方便。)

二：我們寫一個(gè)ajaxMsg來(lái)實(shí)現(xiàn)lightbox，這是我自己寫的Lightbox，比較簡(jiǎn)陋，如果不喜歡，也可以用一些知名的插件。

代碼：

(function($)   {   $.fn.showMsg = function(model, callback, fail)   {   var me = this;   if (me.length == 0)   {   $("body").append("<div id='" + me.selector.replace("#", "") + "'></div>");   $(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來(lái)做，包括div的定位都可以在css里寫js代碼來(lái)實(shí)現(xiàn)。

不知道有沒有人能理解我這里的callback，我說一下他的用到的情況。 實(shí)際應(yīng)用中我還有一個(gè)ajaxWin來(lái)實(shí)現(xiàn)彈窗，彈窗里的表單提交后一般需要關(guān)閉彈窗，然后更新一些數(shù)據(jù)(比如刷新列表)。這時(shí)就需要 submit后的callback動(dòng)作。另外就是我目前還有使用到redirect這個(gè)屬性。呵呵，我之前的系統(tǒng)需要大量的跳轉(zhuǎn)處理,這些跳轉(zhuǎn)也是無(wú)刷新的，有一個(gè)數(shù)組來(lái)記錄訪問的地址?？梢詫?shí)現(xiàn)后退和前進(jìn)。

三：好了，Lightbox已經(jīng)實(shí)現(xiàn)了，也能show出各種類型的信息了。
下面還剩下表單驗(yàn)證。 其實(shí)表單驗(yàn)證大有文章可做。我這也不能一一做到。目前只做了些簡(jiǎn)單的驗(yàn)證。以后會(huì)實(shí)現(xiàn)比較復(fù)雜的錯(cuò)誤提示效果。其實(shí)這都是體力活，上面沒要求我也懶的弄。

驗(yàn)證我采用的是給control一些自定義屬性，然后再判斷其值是否合法。

代碼：

//輸入驗(yàn)證   $.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("此項(xiàng)必須填寫！");   else $(this).inputRight();   });   }   //②正則注冊(cè)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();   }); }   //③最小長(zhǎng)度   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("長(zhǎng)度不能小于" + minLength); }   });   //④其他   });   };   //提交驗(yàn)證   $.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("此項(xiàng)必須填寫！");   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("<span class='error'>" + (msg || '') + "</span>");   }   $.fn.inputRight = function(msg) {   this.inputRemove();   //this.focus();   $("span", this.parent()).hide();   this.parent().addClass("focus").append("<span class='right'>" + (msg || '') + "</span>");   } $.fn.inputRemove = function() {   this.removeClass("focus");   $(".right,.error", this.parent()).remove();   $("span", this.parent()).show();   }

每一種方法，我們都應(yīng)該從性能和發(fā)功效率上來(lái)考慮，要做到兩者兼得是很不容易的。通過本文作者的分析，希望會(huì)對(duì)你有所幫助。

上述就是小編為大家分享的MVC+jQuery開發(fā)B/S系統(tǒng)怎么進(jìn)行表單提交了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。