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

iDotNetSpace發表於2010-09-14
 對於習慣使用GridView的人來說,前臺頁面需要動態新增表格的行數,是一件痛苦的事。GridView處理這種事情相當麻煩,你點選“新增一行”,需要回傳到伺服器。伺服器再把GridView反構造成DataTable, 再給DataTable增加一行之後,繫結到GridView,然後發回客戶端...

      能不能簡單一點呢?

      

       在使用Ajax資料請求資料,通常都是簡單格式,比如String,資訊量較少。當然也可以請求回XML,但是XML資料冗餘多,取到客戶端處理比json麻煩的多。

      能不能簡單一點呢? 

 

 

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

       優點:1)避免不必要的回傳;

                2)精簡非同步請求資料的大小 ;

                3)解決資料量較大時,資料傳送與接收繁瑣的問題。

 

      既然好處這麼多,我們上程式碼吧。

前臺程式碼: 

<!-- Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --&gt<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 = $("");
                
for (key in o1) {
                    
var 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>

 

 

後臺程式碼:

 /// 

    /// 頁面載入時
    
/// 
    
/// 
    
/// 
    protected void Page_Load(object sender, EventArgs e)
    {
        
//判斷是否非同步請求
        if (Request.QueryString["ajax"== "1")
        {
            ProcessRequest();
        }
    }

    
/// 
    
/// 處理非同步請求
    
/// 
    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();
    }

    
/// 
    
/// DataTable轉Json
    
/// 
    
/// 
    
/// 
    private string Dtb2Json(DataTable dtb)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        ArrayList dic = new ArrayList();

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

        
return jss.Serialize(dic);
    }

    
/// 
    
/// Json轉DataTable
    
/// 
    
/// 
    
/// 
    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<stringobject> 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 

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-673839/,如需轉載,請註明出處,否則將追究法律責任。

相關文章