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

核心提示： 上面的方法很简单，就是form插件的使用，MVC+Jquery开发B/S系统：③表单提交(2)，还有几个我们需要实现的方法，(inputValidate,submitValiedate,ajaxMsg)既然是ajax提交，比较简陋，如果不喜欢，我们则需要给客户端一个反馈信息，然后用Lightbo

上面的方法很简单，就是form插件的使用，还有几个我们需要实现的方法。(inputValidate,submitValiedate,ajaxMsg)

既然是ajax提交，我们则需要给客户端一个反馈信息，然后用Lightbox呈现。

一：我们定义一个JsonMessage类

Code

　　　 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，比较简陋，如果不喜欢，也可以用一些知名的插件。

Code

var ajaxMsg = function(msg) {
　　　 if (msg != undefined) {
　　　　　　　 //提示框的属性
　　　　　　　 this.result = msg.result || 0; //0错误 1正确 2提示 3警告
　　　　　　　 this.title = msg.title || ""; //提示框的标题
　　　　　　　 this.redirect = msg.redirect || null;
　　　　　　　 this.content = msg.content || ""; //窗口的内容 通过后台json数据获得
　　　　　　　 this.callBackData = msg.callBackData;
　　　 }
}
//创建一个win
ajaxMsg.prototype.open = function(parentElement) {
　　　 //创建Mask遮罩层
　　　 $("body").append("<div id=\"MsgMask\" class=\"mask\"></div>");
　　　 //设置Mask高度
　　　 var bodyheight = document.body.offsetHeight;
　　　 var clientheight = document.documentElement.clientHeight;
　　　 if (bodyheight > clientheight)
　　　　　　　 clientheight = bodyheight;
　　　 else
　　　　　　　 bodyheight = clientheight;
　　　 $("#MsgMask").height(bodyheight + "px");

　　　 //创建窗口
　　　 $("body").append("<div id=\"MsgFrame\" class=\"frame\"></div>");
　　　 var frameId = "#MsgFrame";

　　　 //不同的style 不同的frame　 frame由mask来控制
　　　 switch (this.result) {
　　　　　　　 case 0:
　　　　　　　　　　　 $(frameId).addClass("msg_error");
　　　　　　　　　　　 break;
　　　　　　　 case 1:
　　　　　　　　　　　 $(frameId).addClass("msg_right");
　　　　　　　　　　　 break;
　　　　　　　 case 2:
　　　　　　　　　　　 $(frameId).addClass("msg_tips");
　　　　　　　　　　　 break;
　　　　　　　 case 3:
　　　　　　　　　　　 $(frameId).addClass("msg_warning");
　　　　　　　　　　　 break;
　　　　　　　 default:
　　　　　　　　　　　 $(frameId).addClass("msg_default");
　　　　　　　　　　　 break;
　　　 }
　　　 //创建内容div
　　　 $(frameId).append("<div id=\"MsgContent\" class=\"content\">" + this.content + "</div>");

　　　 //设置Mask的宽高
　　　 if (this.width > 0)
　　　　　　　 $(frameId).width(this.width);
　　　 if (this.height > 0)
　　　　　　　 $(frameId).height(this.height);

　　　 //设置窗口的定位
　　　 var frame_width = $(frameId).width();
　　　 var frame_height = $(frameId).height();
　　　 var css_top = parseInt((document.documentElement.clientHeight - frame_height) / 2) - 100;
　　　 if (css_top <= 0)
　　　　　　　 css_top = 80;
　　　 var css_left = (document.documentElement.clientWidth - frame_width) / 2;
　　　 var css_right = css_left;
　　　 $(frameId).css("top", css_top + "px").css("left", css_left + "px").css("right", css_right + "px");
　　　 hideSelects();
}

//显示方式
ajaxMsg.prototype.show = function(callBack) {
　　　 if (this.result == undefined) {
　　　　　　　 if (callBack != undefined)
　　　　　　　　　　　 callBack(this.callBackData);
　　　　　　　 return;
　　　 }
　　　 if (this.result == 1) {
　　　　　　　 if (this.content != undefined && this.content != "") {
　　　　　　　　　　　 //this.open();
　　　　　　　　　　　 //setTimeout(this.close, 1000);
　　　　　　　　　　　 alert(this.content);
　　　　　　　 }
　　　　　　　 if (callBack != undefined)
　　　　　　　　　　　 callBack(this.callBackData);
　　　 }
　　　 else {
　　　　　　　 //this.open();
　　　　　　　 //setTimeout(this.close, 2000);
　　　　　　　 alert(this.content);
　　　 }
}

//关闭
ajaxMsg.prototype.close = function() {
　　　 removeMsg();
}
function removeMsg() {
　　　 $("div").remove("#MsgMask");
　　　 $("div").remove("#MsgFrame");
　　　 showSelects();
}

编缉推荐阅读以下文章

• MVC+JQuery开发B/S系统：②表单绑定
• MVC+Jquery开发B/S系统：①列表绑定