MVC+jQuery开发B/S系统①:列表绑定

OK,今天看到首页一篇MVC+JS的文章。最近我在用这两样东西。 发一下自己在应用中的应用方法。

我们想,WebForm绑定列表有repeater和Gridview ,如果用MVC我们还用控件当然不是不行,就是有点说不过去了吧?(啥子说不过去?)
控件既然如此方便。我们就用Js来实现简单的控件绑定。 这里都是用到的Jquery。如果有人觉得不爽,请立即停止阅读。

请思考下面三个问题:

Ⅰ如何表达一个控件?ItemTemplate如何表示?
Ⅱ有了模板如何执行替换?
Ⅲ如何得到模板需要的DataSource?
先解决第一个问题,我们定好模板的规则才方便写替换方法。也才能和Controller开发人员约定DataSource的格式。
Ⅰ如何表达一个控件?ItemTemplate如何表示?
其实很简单,我们不必做十分复杂的列表。就算做我们也要留个后路才处理复杂的情况。
看一下HTML:
Code
我把ItemTemplate放在thead里是为了绑定后,tbody被填充而把注释也“冲掉”,这样翻页的时候就找不到ItemTemplate了。
可能有同学说不如放在XML里来管理,或者用一个特殊的标签来放模板,其属性target来指定该table,或者...。 我都十分赞同,我也想过很多,目前采用的注释,可是注释有个大缺点就是IE在处理HTML时会把注释处理的乱七八糟-_-。
好的,ItemTemplate十分简单,下面我们要替换这个Item也是轻而易举的事情。
Ⅱ有了模板如何执行替换?请看Js

代码
; (function($) {
$.fn.getTemplate
= function() {
var t = this.html();
if (t == null)
return "";
t
= t.match(/<!--([\s\S]*?)-->/);
if (t != null)
t
= t[1];
return t;
};
})(jQuery);

function replaceTemplate(template, data) {
if (data == undefined || data.length == 0)
return;
if (template == undefined)
return;
var resultHtml = "";
for (var i = 0; i < data.length; i++) {
var rowHtml = template;
var re = /\{(\w+)\}/gi;
if (data[i] == undefined) {
break;
}
while ((fields = re.exec(template)) != null) {
var re1 = new RegExp("\\{" + fields[1] + "\\}", "gi");
rowHtml
= rowHtml.replace(re1, data[i][fields[1]]);
}
resultHtml
+= rowHtml;
}
return resultHtml;
}

 



遍历DataSource,替换Item,然后把HTML添加到tbody里。 just only so so ...
Ⅲ如何得到模板需要的DataSource?
很明显,我们的替换方法里DataSource是JS的Array。 我们知道.net提供了Json序列化的方法。 我们可以把List序列化为Js的Array,把对象序列化为一条Json数据(其实Json也是Array,只不过是Dictionary形式)
MVC框架说实话我用的不多,但是我十分喜欢这个开发模式,这样可以让前台和后台彻底的分离, 开发起来十分愉快。
我们知道一个Action可以返回void或JsonResult, 这便是我们需要的。
Controller开发人员从Model取得数据后,把他序列化后Response或Return Json(data); 这样前台直接请求该Action便得到的是Json数据。

/// <summary>
/// 获取JSON格式的List
/// </summary>
/// <returns></returns>
public JsonResult GetListJson()
{
    Response.Cache.SetNoStore();
    
int RecordCount;
    var list 
= GetList(out RecordCount);
    
return Json(new { recordCount = RecordCount, list });
}
上面是一个取得Json的Action。 GetList是一个已有方法。
--------------------------------------------------------------------------------------------------
其实列表的绑定比较复杂,涉及到排序、翻页、复选框、绑定后的行列处理、嵌套绑定。 这需要其他的方法来实现,请阅读
posted @ 2009-09-11 11:32  君之蘭  阅读(5488)  评论(9编辑  收藏  举报