点击这里给我发消息 点击这里给我发消息

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

添加时间:2010-6-22
    相关阅读: 开发 VC 制作 系统

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

  MVC有自己的自动映射功能,我们这里用jQuery来遍历Controls进行绑定。

  如果用过asp开发过系统的人都知道以前取表单的值都是request.form("controlName"),用到的是name而不是id。

  所以我们的表单在制作的时候元素的Name值不能没有。 为了能够写通用的方法,我们约定所有的元素的name 是 "cName" 格式 ,"c"+"字段名",id自己随便。

  由于Js的Dictionary区分大小写,所以我们这些名字也对大小写敏感,包括上一节的列表绑定都是这样。

  Code

$.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;

Code

$.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。 这个叫双向绑定,目前还没做成自动化

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册