jQuery MVC实现表单数据绑定

本文介绍了一种使用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区分大小写,所以我们这些名字也对大小写敏感,包括上一节的列表绑定都是这样。

 

  1. $.fn.bindForm = function(model) {
  2.     if (model == undefined || model == null) {
  3.         return;
  4.     }
  5.     var formId = this.attr("id");
  6.     $("input,textarea,select", "#" + formId).each(function() {
  7.         var cname = $(this).attr("name");
  8.         var cid = $(this).attr("id");
  9.         if (cname == "")
  10.             return;
  11.         if (cid == "") {
  12.             cid = $(this)[0].tagName + "[name='" + cname + "']";
  13.             $(this).attr("id", cname);
  14.         } else
  15.             cid = "#" + cid;
  16.         $(cid).bindControl(model[cname.replace("c", "")], formId);
  17.     });
  18.     return this;

 

 

  1. $.fn.bindControl = function(value, formId) {
  2.     if (value =http://www.chonggou.net/= undefined)
  3.         return this;
  4.     value = http://www.chonggou.net/value.toString();
  5.     formId = formId || "";
  6.     if (formId != "")
  7.         formId = "#" + formId + " ";
  8.  
  9.     switch (this.attr("type")) {
  10.         case "select-one": //DropDownList
  11.             //this[0].selectedIndex = 0;
  12.             //$("option[value='http://www.chonggou.net/" + value + "']", this).attr("selected");
  13.             var isSelected = false;
  14.             this.children().each(function() {
  15.                 if (this.value =http://www.chonggou.net/= value) {
  16.                     this.selected = true;
  17.                     isSelected = true;
  18.                     return;
  19.                 }
  20.             });
  21.             if (!isSelected)
  22.                 this[0].selectedIndex = 0;
  23.             break;
  24.         case "select-multiple": //ListBox
  25.             this.children().each(function() {
  26.                 var arr = value.split(',');
  27.                 for (var i = 0; i < arr.length; i++) {
  28.                     if (this.value =http://www.chonggou.net/= arr) {
  29.                         this.selected = true;
  30.                     }
  31.                 }
  32.             });
  33.             break;
  34.         case "checkbox": //CheckboxList
  35.             //单选
  36.             if (value.indexOf(',') == -1) {
  37.                 $(formId + "input[name='" + this.attr("name") + "']").each(function() {
  38.                     if (this.value =http://www.chonggou.net/= value) {
  39.                         $(this).attr("checked", true);
  40.                         return;
  41.                     }
  42.                 });
  43.             }
  44.             //多选
  45.             else if (this.attr("type") == 'checkbox') {
  46.                 var arr = value.split(',');
  47.                 for (var i = 0; i < arr.length; i++) {
  48.                     $(formId + "input[name='" + this.attr("name") + "']").each(function() {
  49.                         if (this.value =http://www.chonggou.net/= arr) {
  50.                             this.checked = true;
  51.                         }
  52.                     });
  53.                 }
  54.             }
  55.             break;
  56.         case "radio": //RadioButtonList
  57.             $(formId + " input[name='" + this.attr("name") + "']").each(function() {
  58.                 if (this.value =http://www.chonggou.net/= value) {
  59.                     this.checked = true;
  60.                     return;
  61.                 }
  62.             });
  63.             break;
  64.         default: //Normal
  65.             this.val(value);
  66.             break;
  67.     }
  68.  
  69.     return this;
  70. }

 

绑定表单就显得比较容易了。

 

  1. $("#form1").bindForm(<%=Json(ViewData["model"])%>);

 

简单的一句话,就自动把值绑定了。

绑定一个控件也很容易

 

  1. $("#controlId").bindControl(value);

 

其实在实际开发中,我们会经常碰到 级联的DropDownList , 这样在绑定的时候 我们还要对具体的Control 执行绑定,并且trigger他的event。 这个叫双向绑定,目前还没做成自动化。

文/麦子|君子兰

重构网专注于 HTML+CSS 整体解决方案

 

来源:http://www.chonggou.net/show/969.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值