本人遇到一个程序页面，要有很大量的数据进行交互操作。第一次进入aspx页面，就要读取出大量数据。写入页面中。使用都在页面要有添删改的操作，而且只有当点击面的保存按钮才能真正的写入到数据库中。因此我选择了Ajax+JSON的方式来实现这个页面。

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Path="~/WebManage/javascript/jquery.js" />
            </Scripts>
        </asp:ScriptManager>
                <asp:Repeater ID="Repeater1" runat="server">
                    <HeaderTemplate>
                        <table class="popTable" width="100%" cellpadding="0" cellspacing="0" border="1">
                            <thead>
                                <tr class="dottedBg">
                                    <th>
                                        所属机构</th>
                                    <th>
                                        职业群组</th>
                                    <th>
                                        操作</th>
                                  </tr>
                            </thead>
                            <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr class="dottedBg" id='pct-<%#Eval("ID") %>'>
                            <td align="center">
                                <%#Eval("A1") %>
                            </td>
                            <td align="center">
                                <%#Eval("A2")%>
                            </td>
                            <td align="center">
                                <a href="javascript:dataDel('<%#Eval("ID") %>')"><%#Eval("ID") %> - 删除</a>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        <tr />
        </ContentTemplate>
    </asp:UpdatePanel>

所用到的页面端的JS是：

<script type="text/javascript">
    // 删除表格中的一项
    function dataDel(id){      
        // 利用ajax使用C#的正则去掉json中的一项
        var objId;
        objId = "<%= this.TextBox1.ClientID %>";
        jQuery("#"+objId).val(id);
        objId = "<%= this.Button2.ClientID %>";
        jQuery("#"+objId).click();
       
        // 删除表格中的tr一行
        jQuery("#pct-"+id).hide();
    }
   
    var pageTableIdGlobe;
    // 添加表中的一项
    function dateAdd(pageTableId){
        // 备份到全局变量中
        pageTableIdGlobe = pageTableId;
       
        // 获取要查询的id
        var objId;
        var id;
        objId = "<%= this.TextBox1.ClientID %>";
        id = jQuery("#"+objId).val();
       
        // 判断序列化中是否有此ID
        objId = "<%= this.TextBox2.ClientID %>";
        var json = jQuery("#"+objId).val();
        if(json.indexOf(id) == -1){
            // 利用ajax进入后台查找数据库
            PageMethods.AddPageContallorItem(id, RedirectSearchResult);
        }else{
            alert("已存在列表中");
            return;
        }
    }
    // 将要添加的数据，ajax的回调处理方法
    function RedirectSearchResult(result){
        var html;
        // alert(result);
        if (result == "error"){
            alert("数据读取出错");
        }else{
            // 生成新的表格中的一行HTML
            html = CreatePageHtml(result);
           
            // 在页面显示HTML
            jQuery("#"+pageTableIdGlobe).before(html);
           
            // 更新json,以备写入数据库
            var objId = "<%= this.TextBox2.ClientID %>";
            FlashJson(objId, result);
        }
    }
   
    // 生成新的一行表格HTML
    function CreatePageHtml(result){
        var html;
        var data = eval("("+result+")");// 转换为json对象
        html = "<tr class=\"dottedBg\" id='pct-{id}'><td align=\"center\">{a1}</td><td align=\"center\">{a2}</td><td align=\"center\"><a href=\"javascript:dataDel('{id}')\">{id} - 删除</a></td></tr>";
        jQuery.each(data, function(i,item){
            jQuery.each(item, function(j,itemchild){
                if(j==0)
                    html = html.replace(/{id}/g, itemchild);
                if(j==1)
                    html = html.replace(/{a1}/g, itemchild);
                if(j==2)
                    html = html.replace(/{a2}/g, itemchild);
            });
        });
       
        return html;
    }
   
    // 将result写入json中，objId是保存json的控件ID
    function FlashJson(objId, result){
        var obj = jQuery("#"+objId);
        var oldjson = obj.val();
        var newjson;
       
        result = result.replace("{", "");
        if(oldjson=="{}"){
            newjson = oldjson.replace("}", result);
        }else{
            newjson = oldjson.replace("}", ","+result);
        }
       
        obj.val(newjson);
    }
    </script>

后台的程序端就很方便了：

private void InitDataSouce()
        {
            // 获取数据
            pct p;

            for (int i = 0; i < 6000; i++)
            {
                p = new pct();
                p.ID = i.ToString();
                p.A1 = string.Format("{0}-1", i.ToString());
                p.A2 = string.Format("{0}-2", i.ToString());
                dbsouce.Add(p);
            }

            Repeater1.DataSource = dbsouce;
            Repeater1.DataBind();

            // 序列化
            JSONObject jsonObject = new JSONObject();
            JSONArray jsonArray;
            int index = 0;

            foreach(pct temp in dbsouce)
            {
                jsonArray = new JSONArray();
                jsonArray.Add(temp.ID);
                jsonArray.Add(temp.A1);
                jsonArray.Add(temp.A2);
                jsonObject.Add(index.ToString(), jsonArray);
                // 第二种方式，占用更多字符
                //jsonObject1 = new JSONObject();
                //jsonObject1.Add("ID", temp.ID);
                //jsonObject1.Add("A1", temp.A1);
                //jsonObject1.Add("A2", temp.A2);
                //jsonObject.Add(temp.ID, jsonObject1);

                index++;
            }

            this.TextBox2.Text = JSONConvert.SerializeObject(jsonObject);

        }
        #endregion