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

      对于习惯使用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 

转载于:https://www.cnblogs.com/gateluck/archive/2010/09/11/json.html