jQuery MVC实现表单数据绑定

最新推荐文章于 2022-09-27 13:36:45 发布

转载最新推荐文章于 2022-09-27 13:36:45 发布 · 2.2k 阅读

文章标签：

#jquery #mvc #function #input #dictionary #prototype

本文介绍了一种使用jQuery简化表单绑定的方法，通过简单的代码实现表单数据的自动填充，适用于各种类型的输入控件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

标题冠名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 =http://www.chonggou.net/= undefined)
return this;
value = http://www.chonggou.net/value.toString();
formId = formId || "";
if (formId != "")
formId = "#" + formId + " ";
switch (this.attr("type")) {
case "select-one": //DropDownList
//this[0].selectedIndex = 0;
//$("option[value='http://www.chonggou.net/" + value + "']", this).attr("selected");
var isSelected = false;
this.children().each(function() {
if (this.value =http://www.chonggou.net/= 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 =http://www.chonggou.net/= arr) {
this.selected = true;
}
}
});
break;
case "checkbox": //CheckboxList
//单选
if (value.indexOf(',') == -1) {
$(formId + "input[name='" + this.attr("name") + "']").each(function() {
if (this.value =http://www.chonggou.net/= 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 =http://www.chonggou.net/= arr) {
this.checked = true;
}
});
}
}
break;
case "radio": //RadioButtonList
$(formId + " input[name='" + this.attr("name") + "']").each(function() {
if (this.value =http://www.chonggou.net/= value) {
this.checked = true;
return;
}
});
break;
default: //Normal
this.val(value);
break;
}
return this;
}