MVC+Jquery开发B/S系统：①列表绑定

核心提示： 我把ItemTemplate放在thead里是为了绑定后，tbody被填充而把注释也“冲掉”,这样翻页的时候就找不到ItemTemplate了，MVC+Jquery开发B/S系统：①列表绑定(2)，可能有同学说不如放在XML里来管理，或者用一个特殊的标签来放模板，把他序列

我把ItemTemplate放在thead里是为了绑定后，tbody被填充而把注释也“冲掉”,这样翻页的时候就找不到ItemTemplate了。

可能有同学说不如放在XML里来管理，或者用一个特殊的标签来放模板，其属性target来指定该table，或者...。 我都十分赞同，我也想过很多，目前采用的注释，可是注释有个大缺点就是IE在处理HTML时会把注释处理的乱七八糟-_-。

好的，ItemTemplate十分简单，下面我们要替换这个Item也是轻而易举的事情。

Ⅱ有了模板如何执行替换？请看Js

//==========================================================================
//替换模板得到数据
//==========================================================================
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;
　　　　　　　 if (i % 2 == 1)
　　　　　　　　　　　 rowHtml = rowHtml.replace("<tr", "<tr class=\"bg\"");
　　　　　　　 var re = /\{(\w+)\}/gi;
　　　　　　　 if (data[i] == undefined) {
　　　　　　　　　　　 alert(i);
　　　　　　　　　　　 alert(data.length);
　　　　　　　　　　　 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;
}
//==========================================================================
//获取指定ID的模板 IE下对个别控件无效(非容器一般无效)
//==========================================================================
function getTemplate(id) {
　　　 var t = $("#" + id).html();
　　　 if (t == null)
　　　　　　　 return "";
　　　 t = t.match(/<!--([\s\S]*?)-->/);
　　　 if (t != null)
　　　　　　　 t = t[1];
　　　 return t;

遍历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是一个已有方法。

编缉推荐阅读以下文章

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