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

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

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

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

绑定一个控件也很容易

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

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

文/麦子|君子兰

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

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