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

核心提示： Code$.fn.bindControl = function(value, formId) { if (value == undefined) return this; value = value.toString(); formId = formId || ""; if

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

编缉推荐阅读以下文章

• MVC+Jquery开发B/S系统：③表单提交
• MVC+Jquery开发B/S系统：①列表绑定