[MVC]MVC+JQuery开发B/S系统:②表单绑定

标题冠名MVC其实跟MVC没多大关系了。。 目前只是写的前台,请求的都是后台给的Json数据。

逻辑比较复杂的Form绑定起来比较麻烦,这些都是要自己写代码。而简单的我们可以写一个通用的进行处理。不需要反复的 xxx.Text = "xxx" ..

MVC有自己的自动映射功能,我们这里用JQuery来遍历Controls进行绑定。
如果用过asp开发过系统的人都知道以前取表单的值都是request.form("controlName"),用到的是name而不是id。
所以我们的表单在制作的时候元素的Name值不能没有。 为了能够写通用的方法,我们约定所有的元素的name 是 "cName" 格式 ,"c"+"字段名",id自己随便。
由于Js的Dictionary区分大小写,所以我们这些名字也对大小写敏感,包括上一节的列表绑定都是这样。

$.fn.bindForm = function(model) {
    
if (model == undefined || model == null) {
        
return;
    }
    
var formId = this.attr("id");
    $(
"input,textarea,select""#" + formId).each(function() {
        
var cname = $(this).attr("name");
        
var cid = $(this).attr("id");
        
if (cname == "")
            
return;
        
if (cid == "") {
            cid 
= $(this)[0].tagName + "[name='" + cname + "']";
            $(
this).attr("id", cname);
        } 
else
            cid 
= "#" + cid;
        $(cid).bindControl(model[cname.replace(
"c""")], formId);
    });
    
return this;
 

$.fn.bindControl = function(value, formId) {
    
if (value == undefined)
        
return this;
    value 
= value.toString();
    formId 
= formId || "";
    
if (formId != "")
        formId 
= "#" + formId + " ";
    
switch (this.attr("type")) {
        
case "select-one"//DropDownList
            //this[0].selectedIndex = 0;
            //$("option[value='" + value + "']", this).attr("selected");
            var isSelected = false;
            
this.children().each(function() {
                
if (this.value == value) {
                    
this.selected = true;
                    isSelected 
= true;
                    
return;
                }
            });
            
if (!isSelected)
                
this[0].selectedIndex = 0;
            
break;
        
case "select-multiple"//ListBox
            this.children().each(function() {
                
var arr = value.split(',');
                
for (var i = 0; i < arr.length; i++) {
                    
if (this.value == arr[i]) {
                        
this.selected = true;
                    }
                }
            });
            
break;
        
case "checkbox"//CheckboxList
            //单选
            if (value.indexOf(','== 1) {
                $(formId 
+ "input[name='" + this.attr("name"+ "']").each(function() {
                    
if (this.value == value) {
                        $(
this).attr("checked"true);
                        
return;
                    }
                });
            }
            
//多选
            else if (this.attr("type"== 'checkbox') {
                
var arr = value.split(',');
                
for (var i = 0; i < arr.length; i++) {
                    $(formId 
+ "input[name='" + this.attr("name"+ "']").each(function() {
                        
if (this.value == arr[i]) {
                            
this.checked = true;
                        }
                    });
                }
            }
            
break;
        
case "radio"//RadioButtonList
            $(formId + " input[name='" + this.attr("name"+ "']").each(function() {
                
if (this.value == value) {
                    
this.checked = true;
                    
return;
                }
            });
            
break;
        
default//Normal
            this.val(value);
            
break;
    }
    
return this;
}
绑定表单就显得比较容易了。 
$("#form1").bindForm(<%=Json(ViewData["model"])%>); 简单的一句话,就自动把值绑定了。
绑定一个控件也很容易 $("#controlId").bindControl(value); 
其实在实际开发中,我们会经常碰到 级联的DropDownList , 这样在绑定的时候 我们还要对具体的Control 执行绑定,并且trigger他的event。 这个叫双向绑定,目前还没做成自动化。
赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏