自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

開發(fā)MVC+jQuery下B/S系統(tǒng)的表單提交

作者：麥子|君子蘭
開發(fā) 后端
這里將介紹如何用MVC+jQuery來開發(fā)B/S系統(tǒng)中的提交表單功能，需要引入一些插件，希望本文能對大家有所幫助。

我們這里將說到如果在ajax提交表單，但這里將介紹MVC+jQuery的處理方法。需要實現(xiàn)的是1、jquery.form.js的使用、2、lightbox的實現(xiàn)、3、如何驗證。

說起表單提交，是無人不知，無人不曉哇。今天我們就談如何用MVC+jQuery來處理表單的提交。

想達到的效果：

1、提交前的表單驗證

2、表單驗證

3、提交后的反饋信息

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

前臺 ，action指定了接受表單的處理頁面。method這里我們只說post

如果用ajax提交表單，自然xxx.aspx便是請求的url。ajax請求后的callback便是響應(yīng)表單的提交結(jié)果(錯誤、成功)，我們提交的反饋信息用一個 浮層(lightbox)來表示。 不至于用 alert(""); 這樣鐺鐺鐺很囧。

我們引入一個jQuery的插件http://www.malsup.com/jquery/form/#api 這是一個略有名氣的插件，方便易用。

關(guān)于其用法，大家可以搜索下。

那么我們需要做的就是

1、jquery.form.js的使用

2、lightbox的實現(xiàn)

3、如何驗證

Code

  1. //注冊form的ajaxForm 此方法需要調(diào)用jquery.ajaxwindow.js的方法  
  2. //一般form里有action，所以參數(shù)有可能只需要傳一個callback，  
  3. //如果一個表單有多個提交按鈕，那么則需要 提交不同的url  
  4. // 這個方法是用來注冊form提交，如果有多個提交按鈕時，最好默認注冊一個，否則驗證方法就不起到作用  
  5. $.fn.submitForm = function(args) {  
  6.     var url, id, callback, before;  
  7.     id = this.attr("id");  
  8.  
  9.     if (typeof (args) == "string") {//只傳一個url  
  10.         url = args;  
  11.         before = undefined;  
  12.         callback = undefined;  
  13.     }  
  14.     else {  
  15.         args = args || new Object();  
  16.         url = args.url || this.attr("action");  
  17.         if (typeof (args) == "function") {//只傳一個callback  
  18.             callback = args;  
  19.         }  
  20.         else {  
  21.             before = args.before;  
  22.             callback = args.callback;  
  23.         }  
  24.     }  
  25.     //輸入驗證  
  26.     this.inputValidate();//這是我們需要實現(xiàn)的一個“輸入時的驗證”，  
  27.     this.ajaxForm({ //這里調(diào)用jquery.form.js表單注冊方法。  
  28.         url: url,  
  29.         beforeSubmit: function(a, f, o) {//提交前的處理  
  30.             //提交驗證  
  31.             if ($("#" + id).submitValidate() == false)//這里我們需要實現(xiàn)的“提交時的驗證”。  
  32.                 return false;  
  33.             if (before != undefined && before() == false) {  
  34.                 return false;  
  35.             }  
  36.             o.dataType = "json";//指定返回的數(shù)據(jù)為json格式。  
  37.         },  
  38.  
  39.         success: function(data) {//提交后反饋信息處理  
  40.             if (data == "" || data == null) {  
  41.                 return false;  
  42.             }  
  43.             var msg = new ajaxMsg(data);//這個ajaxMsg便是我們需要實現(xiàn)的Lightbox  
  44.             msg.show(callback);//show這個反饋的結(jié)果。  
  45.             return false;  
  46.         }  
  47.     });  
  48.     return this;  
  49. } 

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

一：我們定義一個JsonMessage類

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

MVC返回Json(jsonmsg1)，客戶端的callback便可以得到這個對象的json格式。

(注意：如果是附件的表單提交，則不能識別JsonResult格式。具體我還沒有研究怎么回事，這種情況只能response一個json字符串，可以用System.Web.Script.Serialization.JavaScriptSerializer來序列化對象，也很方便。)

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

  1. Code  
  2. var ajaxMsg = function(msg) {  
  3.     if (msg != undefined) {  
  4.         //提示框的屬性  
  5.         this.result = msg.result || 0; //0錯誤 1正確 2提示 3警告  
  6.         this.title = msg.title || ""; //提示框的標題  
  7.         this.redirect = msg.redirect || null;  
  8.         this.content = msg.content || ""; //窗口的內(nèi)容 通過后臺json數(shù)據(jù)獲得  
  9.         this.callBackData = msg.callBackData;  
  10.     }  
  11. }  
  12. //創(chuàng)建一個win  
  13. ajaxMsg.prototype.open = function(parentElement) {  
  14.     //創(chuàng)建Mask遮罩層  
  15.     $("body").append("  
  16.  
  17. ");  
  18.     //設(shè)置Mask高度  
  19.     var bodyheight = document.body.offsetHeight;  
  20.     var clientheight = document.documentElement.clientHeight;  
  21.     if (bodyheight > clientheight)  
  22.         clientheight = bodyheight;  
  23.     else 
  24.         bodyheight = clientheight;  
  25.     $("#MsgMask").height(bodyheight + "px");  
  26.  
  27.     //創(chuàng)建窗口  
  28.     $("body").append("  
  29.  
  30. ");  
  31.     var frameId = "#MsgFrame";  
  32.  
  33.     //不同的style 不同的frame  frame由mask來控制  
  34.     switch (this.result) {  
  35.         case 0:  
  36.             $(frameId).addClass("msg_error");  
  37.             break;  
  38.         case 1:  
  39.             $(frameId).addClass("msg_right");  
  40.             break;  
  41.         case 2:  
  42.             $(frameId).addClass("msg_tips");  
  43.             break;  
  44.         case 3:  
  45.             $(frameId).addClass("msg_warning");  
  46.             break;  
  47.         default:  
  48.             $(frameId).addClass("msg_default");  
  49.             break;  
  50.     }  
  51.     //創(chuàng)建內(nèi)容div  
  52.     $(frameId).append("  
  53.  
  54. " + this.content + " 
  55. ");  
  56.  
  57.     //設(shè)置Mask的寬高  
  58.     if (this.width > 0)  
  59.         $(frameId).width(this.width);  
  60.     if (this.height > 0)  
  61.         $(frameId).height(this.height);  
  62.  
  63.     //設(shè)置窗口的定位  
  64.     var frame_width = $(frameId).width();  
  65.     var frame_height = $(frameId).height();  
  66.     var css_top = parseInt((document.documentElement.clientHeight - frame_height) / 2) - 100;  
  67.     if (css_top <= 0)  
  68.         css_top = 80;  
  69.     var css_left = (document.documentElement.clientWidth - frame_width) / 2;  
  70.     var css_right = css_left;  
  71.     $(frameId).css("top", css_top + "px").css("left", css_left + "px").css("right", css_right + "px");  
  72.     hideSelects();  
  73. }  
  74.  
  75. //顯示方式  
  76. ajaxMsg.prototype.show = function(callBack) {  
  77.     if (this.result == undefined) {  
  78.         if (callBack != undefined)  
  79.             callBack(this.callBackData);  
  80.         return;  
  81.     }  
  82.     if (this.result == 1) {  
  83.         if (this.content != undefined && this.content != "") {  
  84.             //this.open();  
  85.             //setTimeout(this.close, 1000);  
  86.             alert(this.content);  
  87.         }  
  88.         if (callBack != undefined)  
  89.             callBack(this.callBackData);  
  90.     }  
  91.     else {  
  92.         //this.open();  
  93.         //setTimeout(this.close, 2000);  
  94.         alert(this.content);  
  95.     }  
  96. }  
  97.  
  98. //關(guān)閉  
  99. ajaxMsg.prototype.close = function() {  
  100.     removeMsg();  
  101. }  
  102. function removeMsg() {  
  103.     $("div").remove("#MsgMask");  
  104.     $("div").remove("#MsgFrame");  
  105.     showSelects();  
  106. } 

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

下面是他的css

  1. Code  
  2. .mask  
  3. {  
  4.     background-color: #fff;  
  5.     width: 100%;  
  6.     height: 100%;  
  7.     position: absolute;  
  8.     display: block;  
  9.     top: 0px;  
  10.     left: 0px;  
  11.     filter:alpha(opacity=0);-moz-opcacity:0;opacity:0;  
  12.     z-index:1;  
  13. }  
  14.  
  15. .frame  
  16. {  
  17.     position: absolute;  
  18.     z-index: 2;  
  19.     min-width:400px;  
  20.     font-size:12px;  
  21.     background-color:#fff;  
  22.     overflow:hidden  
  23. }  
  24. .ajaxwin  
  25. {  
  26.     border: 1px solid #ccc;  
  27.     text-align:left;  
  28. }  
  29. .frame .head  
  30. {  
  31.     line-height:25px;  
  32.     background-color: #d3eaff;  
  33.     clear:both;  
  34.       
  35. }  
  36. .frame .head .title  
  37. {  
  38.     position:relative;  
  39.     left:5px;  
  40.     font-size: 12px;  
  41.     font-weight: bold;  
  42.     color: #000;  
  43. }  
  44. .frame .head .btnclose  
  45. {  
  46.     position:absolute;  
  47.     top:0px;  
  48.     right:5px;  
  49. }  
  50. .default 
  51. {  
  52.     border: 1px solid #95A1B6;  
  53. }  
  54. .msg_error  
  55. {  
  56.     border: 2px solid #FF6600;  
  57.     background-color: #FFFFCC;  
  58.     font-size: 14px;  
  59.     overflow: hidden;  
  60.     font-weight: bold;  
  61. }  
  62. .msg_error .head,.msg_tips .head,.msg_right .head{display:none;}  
  63. .msg_tips,.msg_default  
  64. {  
  65.     border: 2px solid #3399FF;  
  66.     background-color: #E6FFFF;  
  67.     font-size: 14px;  
  68.     height: 60px;  
  69.     overflow: hidden;  
  70.     font-weight: bold;  
  71. }  
  72. .msg_right  
  73. {  
  74.     border: 2px solid #009933;  
  75.     background-color: #E8FFD0;  
  76.     font-size: 14px;  
  77.     height: 60px;  
  78.     overflow: hidden;  
  79.     font-weight: bold;  
  80. }  
  81.  
  82. .content{ padding:25px; text-align:center;}  
  83. .default .content,.ajaxwin .content{ padding:10px; text-align:left; }  
  84.  
  85. .frame .btnclose  
  86. {  
  87.     padding:5px; 

三：好了，Lightbox已經(jīng)實現(xiàn)了，也能show出各種類型的信息了。

下面還剩下表單驗證。 其實表單驗證大有文章可做。我這也不能一一做到。目前只做了些簡單的驗證。以后會實現(xiàn)比較復雜的錯誤提示效果。其實這都是 體力活，上面沒要求我也懶的弄-。-

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

  1. Code  
  2. //輸入驗證  
  3. $.fn.inputValidate = function() {  
  4.     $("input,select,textarea", this).each(function() {  
  5.         var isnull = $(this).attr("isnull");  
  6.         var regexValue = $(this).attr("regex");  
  7.         var defautValue = $(this).attr("dvalue");  
  8.  
  9.         //            //①非空注冊焦點事件  
  10.         //            if (isnull == "0") {  
  11.         //                $(this).blur(function() {  
  12.         //                    if (this.value == "" || this.value == defautValue)  
  13.         //                        $(this).addClass("focus").focus();  
  14.         //                    else  
  15.         //                        $(this).removeClass("focus");  
  16.         //                });  
  17.         //            }  
  18.  
  19.         //②正則注冊onchange事件  
  20.         if (regexValue != undefined) {  
  21.             var thisValue = this.value;  
  22.             //檢查類型綁定不同事件  
  23.             if ($(this).attr("type") == "text") {  
  24.                 $(this).bind("keyup", function() {  
  25.                     if ($(this).val() == "")  
  26.                         return;  
  27.                     var re = new RegExp(regexValue, "ig");  
  28.                     var newValue = this.value;  
  29.                     if (!re.test(newValue)) {  
  30.                         $(this).val(thisValue).focus();  
  31.                     }  
  32.                     else {  
  33.                         thisValue = newValue;  
  34.                         $(this).val(newValue);  
  35.                     }  
  36.                 });  
  37.             }  
  38.         }  
  39.  
  40.         function checkRegex(value, re) {  
  41.  
  42.         }  
  43.         //③最小長度  
  44.  
  45.         //④其他  
  46.  
  47.     });  
  48. }  
  49.  
  50. //提交驗證  
  51. $.fn.submitValidate = function() {  
  52.     var result = true;  
  53.     $("input:visible,select:visible,textarea:visible", this).each(function() {  
  54.         result = true;  
  55.         var thisValue = "";  
  56.         if ($(this).attr("type") == "radio" || $(this).attr("type") == "checkbox") {  
  57.             thisValue = $("input[name='" + this.name + "']:checked").val();  
  58.         }  
  59.         else 
  60.             thisValue = $(this).val();  
  61.         //判斷是否違法  
  62.  
  63.  
  64.         if ($(this).attr("isnull") == "0") {//① 是否必填 且不能為空或缺省值  
  65.             result = (thisValue != "" && thisValue != $(this).attr("dvalue"));  
  66.         }  
  67.         else if (thisValue != "") {//② 是否符合格式 屬性為 regex 正則  
  68.             var reValue = $(this).attr("regex");  
  69.             if (reValue != undefined) {  
  70.                 re = new RegExp(reValue, "ig");  
  71.                 result = re.test(thisValue);  
  72.             }  
  73.         }  
  74.  
  75.         //        //③ 是否符合最大長度  
  76.         //        var maxLength = $(this).attr("maxLen");  
  77.         //        if (maxLength != undefined && maxLength != "-1") {  
  78.         //            if (thisValue.length > parseInt(maxLength))  
  79.         //                result = false;  
  80.         //        }  
  81.         //        //④ 是否符合最小長度  
  82.  
  83.         //返回false  
  84.  
  85.         if (result == false) {  
  86.             $(this).addClass("focus").focus().blur(function() {  
  87.                 if (this.value != "" && this.value != $(this).attr("dvalue")) {  
  88.                     $(this).removeClass("focus");  
  89.                 }  
  90.             });  
  91.             //alert($(this).attr("name"));  
  92.             return false;  
  93.         }  
  94.     });  
  95.     return result;  
  96. } 

原文標題：MVC+Jquery開發(fā)B/S系統(tǒng)：③表單提交

鏈接：http://www.cnblogs.com/mad/archive/2009/09/14/1566231.html

【編輯推薦】

  1. jQuery調(diào)用WCF服務(wù)傳遞JSON對象
  2. 學習jQuery必須知道的幾種常用方法
  3. 用XML+XSLT+CSS+JQuery組建ASP.NET網(wǎng)站
  4. 使用jQuery和PHP構(gòu)建一個受Ajax驅(qū)動的Web頁面
  5. jQuery調(diào)用WCF需要注意的一些問題

【責任編輯：彭凡 TEL：（010）68476606】

責任編輯：彭凡 來源： 博客園
MVC+jQuery
相關(guān)推薦

2011-04-19 10:32:27

MVCjQuery

2009-05-18 10:11:06

MVCXML動態(tài)表單

2009-03-31 13:12:05

ASP.NETMVC表單驗證

2012-06-05 10:15:43

jQuery

2009-07-29 16:40:50

Ajax提交asp.n

2010-11-23 16:56:04

mysql表單

2012-12-24 10:00:07

ASP.NETjQueryAjax

2009-06-25 14:32:00

Java BS開發(fā)模式

2013-11-13 14:39:53

表單提交開發(fā)

2013-11-13 11:01:14

表單表單重復提交表單策略

2009-12-01 18:11:03

PHP表單重復提交

2010-07-29 16:38:14

Flex表單

2023-04-11 07:50:27

軟件架構(gòu)設(shè)計

2010-03-04 11:36:02

Python提交表單

2012-03-29 09:27:49

WEBjQuery

2011-06-16 10:21:52

jQuery

2011-06-28 09:24:44

jQuery

2009-06-19 11:43:59

Spring MVC框

2009-06-30 15:19:55

Form表單JSP入門

2012-03-08 11:23:09

jQuery Mobi
點贊
收藏

51CTO技術(shù)棧公眾號