掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
Jquery是一個(gè)優(yōu)秀的Javascrīpt框架。MVC是一個(gè)設(shè)計(jì)模式，它強(qiáng)制性的使應(yīng)用程序的輸入、處理和輸出分開。今天我們就談如何用JQuery+MVC來(lái)處理表單的提交。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、濟(jì)水街道網(wǎng)站維護(hù)、網(wǎng)站推廣。
想達(dá)到的效果：
1、提交前的表單驗(yàn)證
2、表單驗(yàn)證
3、提交后的反饋信息
ok，先說(shuō)一下工作的原理。
前臺(tái)
，action指定了接受表單的處理頁(yè)面。method這里我們只說(shuō)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)。
#p#
一：我們定義一個(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("
Ajax消息的樣式完全可以用CSS來(lái)做，包括div的定位都可以在css里寫js代碼來(lái)實(shí)現(xiàn)。
不知道有沒有人能理解我這里的callback，我說(shuō)一下他的用到的情況。 實(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一些自定義屬性，然后再判斷其值是否合法。
代碼：