Asp.net 利用Jquery Ajax傳送和接收DataTable

作者: 三聰來源: 博客園發布時間: 2010-09-17 07:55 閱讀: 4961 次推薦: 1 原文鏈接 [收藏]

　　對于習慣使用GridView的人來說，前臺頁面需要動態添加表格的行數，是一件痛苦的事。GridView處理這種事情相當麻煩，你點擊“新增一行”，需要回傳到服務器。服務器再把GridView反構造成DataTable, 再給DataTable增加一行之后，綁定到GridView，然后發回客戶端...能不能簡單一點呢？

　　在使用Ajax數據請求數據，通常都是簡單格式，比如String，信息量較少。當然也可以請求回XML，但是XML數據冗余多，取到客戶端處理比json麻煩的多。能不能簡單一點呢？

上面這些問題，如果DataTable與JSON類型可以方便的相互轉換，都可以迎刃而解了。

　　優點：1）避免不必要的回傳；2）精簡異步請求數據的大小；3）解決數據量較大時，數據發送與接收繁瑣的問題。

　　前臺代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript">
        //onload
        $(function() {
            //點擊botton1
            $("#botton1").click(function() {
                var url = "default.aspx?ajax=1";
                var dtb = generateDtb();
                //序列化對象
                var postdata = JSON.stringify(dtb);
                //異步請求
                $.post(url, { json: postdata }, function(json) {
                    createTable(json);
                }, "json")

            });
        });

        //生成DataTable對象
        function generateDtb() {
            var dtb = new Array();
            for (var i = 0; i < 10; i++) {
                var row = new Object();
                row.col1 = i;
                row.col2 = i % 2 == 0 ? true : false;
                row.col3 = i + "he\nll\"ow";
                dtb.push(row);
            }
            return dtb;
        }

        //顯示Json中的數據
        function createTable(json) {
            var table = $("<table border='1'></table>");
            for (var i = 0; i < json.length; i++) {
                o1 = json[i];
                var row = $("<tr></tr>");
                for (key in o1) {
                    var td = $("<td></td>");
                    td.text(o1[key].toString());
                    td.appendTo(row);
                }
                row.appendTo(table);
            }
            table.appendTo($("#back"));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="botton1" type="button" value="button" />
        <div id="back">
        </div>
    </div>
    </form>
</body>
</html>

　　后臺代碼：

　　/// <summary>
　　/// 頁面加載時
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        //判斷是否異步請求
        if (Request.QueryString["ajax"] == "1")
        {
            ProcessRequest();
        }
    }

    /// <summary>
    /// 處理異步請求
    /// </summary>
    private void ProcessRequest()
    {
        Response.ContentType = "text/html";

        string json = Request.Form["json"];
        //反序列化DataTable
        DataTable newdtb = Json2Dtb(json);

        //序列化DataTable為JSON
        string back = Dtb2Json(newdtb);
        Response.Write(back);
        Response.End();
    }

    /// <summary>
    /// DataTable轉Json
    /// </summary>
    /// <param name="dtb"></param>
    /// <returns></returns>
    private string Dtb2Json(DataTable dtb)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ArrayList dic = new ArrayList();

        foreach (DataRow row in dtb.Rows)
        {
            Dictionary<string, object> drow = new Dictionary<string, object>();
            foreach (DataColumn col in dtb.Columns)
            {
                drow.Add(col.ColumnName, row[col.ColumnName]);
            }
            dic.Add(drow);
        }

        return jss.Serialize(dic);
    }

    /// <summary>
    /// Json轉DataTable
    /// </summary>
    /// <param name="json"></param>
    /// <returns></returns>
    private DataTable Json2Dtb(string json)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ArrayList dic = jss.Deserialize<ArrayList>(json);
        DataTable dtb = new DataTable();

        if (dic.Count > 0)
        {
            foreach (Dictionary<string, object> drow in dic)
            {
                if (dtb.Columns.Count == 0)
                {
                    foreach (string key in drow.Keys)
                    {
                        dtb.Columns.Add(key, drow[key].GetType());
                    }
                }

                DataRow row = dtb.NewRow();
                foreach (string key in drow.Keys)
                {

                    row[key] = drow[key];
                }
                dtb.Rows.Add(row);
            }
        }
        return dtb;
    }

　　再附一個下載文件，覺得有用的可以下載看看：json.zip