[MVC]MVC+Jquery开发B/S系统:③表单提交

baacloud免费翻墙vpn注册使用
说起表单提交,是无人不知,无人不晓哇。今天我们就谈如何用jQuery+MVC来处理表单的提交。
想达到的效果:
1、提交前的表单验证
2、表单验证
3、提交后的反馈信息
ok,先说一下工作的原理。
前台<form action='xxx.aspx' method='post'></form>,action指定了接受表单的处理页面。method这里我们只说post
如果用ajax提交表单,自然xxx.aspx便是请求的url。ajax请求后的callback便是响应表单的提交结果(错误、成功),我们提交的反馈信息用一个 浮层(lightbox)来表示。 不至于用 alert(""); 这样铛铛铛很囧。
我们引入一个JQuery的插件http://www.malsup.com/jquery/form/#api 这是一个略有名气的插件,方便易用。
关于其用法,大家可以搜索下。
那么我们需要做的就是
1、JQuery.form.js的使用 
2、lightbox的实现 
3、如何验证


//注册form的ajaxForm 此方法需要调用jQuery.ajaxwindow.js的方法
//一般form里有action,所以参数有可能只需要传一个callback,
//如果一个表单有多个提交按钮,那么则需要 提交不同的url
// 这个方法是用来注册form提交,如果有多个提交按钮时,最好默认注册一个,否则验证方法就不起到作用
$.fn.submitForm = function(args) {
    
var url, id, callback, before;
    id 
= this.attr("id");
    
if (typeof (args) == "string") {//只传一个url
        url 
= args;
        before 
= undefined;
        callback 
= undefined;
    }
    
else {
        args 
= args || new Object();
        url 
= args.url || this.attr("action");
        
if (typeof (args) == "function") {//只传一个callback
            callback 
= args;
        }
        
else {
            before 
= args.before;
            callback 
= args.callback;
        }
    }
    
//输入验证
    this.inputValidate();//这是我们需要实现的一个“输入时的验证”,
    
this.ajaxForm({ //这里调用jquery.form.js表单注册方法。
        url: url,
        beforeSubmit: 
function(a, f, o) {//提交前的处理
            
//提交验证
            if ($("#" + id).submitValidate() == false)//这里我们需要实现的“提交时的验证”。
                
return false;
            
if (before != undefined && before() == false) {
                
return false;
            }
            o.dataType 
= "json";//指定返回的数据为json格式。
        },
        success: 
function(data) {//提交后反馈信息处理
            
if (data == "" || data == null) {
                
return false;
            }
            
var msg = new ajaxMsg(data);//这个ajaxMsg便是我们需要实现的Lightbox
            msg.show(callback);//show这个反馈的结果。
            
return false;
        }
    });
    
return this;
}


上面的方法很简单,就是form插件的使用,还有几个我们需要实现的方法。(inputValidate,submitValiedate,ajaxMsg)
既然是ajax提交,我们则需要给客户端一个反馈信息,然后用Lightbox呈现。

一:我们定义一个JsonMessage类


    public class JsonMessage
    {
        
public int result { getset; } //0错误 1正确 2提示 3警告
        public string title { getset; }//Lightbox窗口的标题
        
public string content { getset; }//message的具体内容
        
public string redirect { getset; }//弹出后自动跳转的到哪里?
        
public object callBackData { getset; }//客户端需要的数据 比如 一个新增的id或整个model


MVC返回Json(jsonmsg1),客户端的callback便可以得到这个对象的json格式。
(注 意:如果是附件的表单提交,则不能识别JsonResult格式。具体我还没有研究怎么回事,这种情况只能response一个json字符串,可以用 System.Web.Script.Serialization.JavaScriptSerializer来序列化对象,也很方便。)

二:我们写一个ajaxMsg来实现lightbox,这是我自己写的Lightbox,比较简陋,如果不喜欢,也可以用一些知名的插件。


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();
}

不 知道有没有人能理解我这里的callback,我说一下他的用到的情况。 实际应用中我还有一个ajaxWin来实现弹窗,弹窗里的表单提交后一般需要关闭弹窗,然后更新一些数据(比如刷新列表)。这时就需要 submit后的callback动作。另外就是我目前还有使用到redirect这个属性。呵呵,我之前的系统需要大量的跳转处理,这些跳转也是无刷新 的,有一个数组来记录访问的地址。可以实现后退和前进。
下面是他的css

Code


三:好了,Lightbox已经实现了,也能show出各种类型的信息了。
下面还剩下表单验证。 其实表单验证大有文章可做。我这也不能一一做到。目前只做了些简单的验证。以后会实现比较复杂的错误提示效果。其实这都是 体力活,上面没要求我也懒的弄-。-

验证我采用的是给control一些自定义属性,然后再判断其值是否合法。


//输入验证
$.fn.inputValidate = function() {
    $(
"input,select,textarea"this).each(function() {
        
var isnull = $(this).attr("isnull");
        
var regexValue = $(this).attr("regex");
        
var defautValue = $(this).attr("dvalue");
        
//            //①非空注册焦点事件
        //            if (isnull == "0") {
        //                $(this).blur(function() {
        //                    if (this.value == "" || this.value == defautValue)
        //                        $(this).addClass("focus").focus();
        //                    else
        //                        $(this).removeClass("focus");
        //                });
        //            }

        
//②正则注册onchange事件
        if (regexValue != undefined) {
            
var thisValue = this.value;
            
//检查类型绑定不同事件
            if ($(this).attr("type"== "text") {
                $(
this).bind("keyup"function() {
                    
if ($(this).val() == "")
                        
return;
                    
var re = new RegExp(regexValue, "ig");
                    
var newValue = this.value;
                    
if (!re.test(newValue)) {
                        $(
this).val(thisValue).focus();
                    }
                    
else {
                        thisValue 
= newValue;
                        $(
this).val(newValue);
                    }
                });
            }
        }
        
function checkRegex(value, re) {
        }
        
//③最小长度

        
//④其他

    });
}
//提交验证
$.fn.submitValidate = function() {
    
var result = true;
    $(
"input:visible,select:visible,textarea:visible"this).each(function() {
        result 
= true;
        
var thisValue = "";
        
if ($(this).attr("type"== "radio" || $(this).attr("type"== "checkbox") {
            thisValue 
= $("input[name='" + this.name + "']:checked").val();
        }
        
else
            thisValue 
= $(this).val();
        
//判断是否违法

        
if ($(this).attr("isnull"== "0") {//① 是否必填 且不能为空或缺省值
            result = (thisValue != "" && thisValue != $(this).attr("dvalue"));
        }
        
else if (thisValue != "") {//② 是否符合格式 属性为 regex 正则
            var reValue = $(this).attr("regex");
            
if (reValue != undefined) {
                re 
= new RegExp(reValue, "ig");
                result 
= re.test(thisValue);
            }
        }
        
//        //③ 是否符合最大长度
        //        var maxLength = $(this).attr("maxLen");
        //        if (maxLength != undefined && maxLength != "-1") {
        //            if (thisValue.length > parseInt(maxLength))
        //                result = false;
        //        }
        //        //④ 是否符合最小长度

        
//返回false

        
if (result == false) {
            $(
this).addClass("focus").focus().blur(function() {
                
if (this.value != "" && this.value != $(this).attr("dvalue")) {
                    $(
this).removeClass("focus");
                }
            });
            
//alert($(this).attr("name"));
            return false;
        }
    });
    
return result;
}


这些都是比较简单的东西,拿出来献丑了。 下面是我之前写的关于绑定的,有兴趣的可以看看。

MVC+Jquery开发B/S系统:①列表绑定

JQuery数据绑定:①列表绑定(续)
JQuery数据绑定:①列表绑定(三)
MVC+JQuery开发B/S系统:②表单绑定
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏