点击这里给我发消息 点击这里给我发消息

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

添加时间:2010-1-5
    相关阅读: 开发 模板 HTML 框架 VC 系统

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

  我们想,WebForm绑定列表有repeater和Gridview ,如果用MVC我们还用控件当然不是不行,就是有点说不过去了吧?(啥子说不过去?)

  控件既然如此方便。我们就用Js来实现简单的控件绑定。 这里都是用到的Jquery。如果有人觉得不爽,请立即停止阅读。

  请思考下面三个问题:

  Ⅰ如何表达一个控件?ItemTemplate如何表示?

  Ⅱ有了模板如何执行替换?

  Ⅲ如何得到模板需要的DataSource?

  先解决第一个问题,我们定好模板的规则才方便写替换方法。也才能和Controller开发人员约定DataSource的格式。

  Ⅰ如何表达一个控件?ItemTemplate如何表示?

  其实很简单,我们不必做十分复杂的列表。就算做我们也要留个后路才处理复杂的情况。

  看一下HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="list" id="lstAdvertiser">
    <thead>
        <tr>
            <th style="width: 80px">
                <a href="javascript:void(0)" sort="AdvertiserId">ID</a>
            </th>
            <th>
                <a href="javascript:void(0)" sort="AdvertiserName">广告客户</a>
            </th>
            <th style="width: 120px">
                品牌管理
            </th>
            <th style="width: 120px">
                操作
            </th>
        </tr>
        <!--
        <tr id="item_{AdvertiserId}">
            <td>
                {AdvertiserId}
            </td>
            <td style="text-align: left;">
                {AdvertiserName}
            </td>
            <td>
                <a href="/Brand/Add?AccountId={AdvertiserId}" target="_new" title="创建品牌">
                    创建</a> <a href="/Brand/List?AccountId= {AdvertiserId}&AdvertiserName= {AdvertiserName}" target="_new" title="品牌管理">
                        查看</a>
            </td>
            <td>
                <a href="/Advertiser/Edit?Id={AdvertiserId}" target="_new" title="修改广告客户">修改</a>
                <a href="/Advertiser/Delete?id={AdvertiserId}" target="_delete">删除</a>
            </td>
        </tr>
    -->
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>
我把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是一个已有方法

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册