MVC+jQuery開發B/S系統：表單提交(2)

一：我們定義一個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("<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來做，包括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("<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();   
}  
 

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