快捷導(dǎo)航

Asp.net下使用Jquery Ajax傳送和接收DataTable的代碼

更新時(shí)間：2010年09月12日 13:51:19 作者：

對(duì)于習(xí)慣使用GridView的人來(lái)說(shuō)，前臺(tái)頁(yè)面需要?jiǎng)討B(tài)添加表格的行數(shù)，是一件痛苦的事。GridView處理這種事情相當(dāng)麻煩，你點(diǎn)擊“新增一行”，需要回傳到服務(wù)器。

服務(wù)器再把GridView反構(gòu)造成DataTable, 再給DataTable增加一行之后，綁定到GridView，然后發(fā)回客戶(hù)端...
能不能簡(jiǎn)單一點(diǎn)呢？
在使用Ajax數(shù)據(jù)請(qǐng)求數(shù)據(jù)，通常都是簡(jiǎn)單格式，比如String，信息量較少。當(dāng)然也可以請(qǐng)求回XML，但是XML數(shù)據(jù)冗余多，取到客戶(hù)端處理比json麻煩的多。
能不能簡(jiǎn)單一點(diǎn)呢？
上面這些問(wèn)題，如果DataTable與JSON類(lèi)型可以方便的相互轉(zhuǎn)換，都可以迎刃而解了。
優(yōu)點(diǎn)：1）避免不必要的回傳；
2）精簡(jiǎn)異步請(qǐng)求數(shù)據(jù)的大小；
3）解決數(shù)據(jù)量較大時(shí)，數(shù)據(jù)發(fā)送與接收繁瑣的問(wèn)題。
既然好處這么多，我們上代碼吧。
前臺(tái)代碼：

復(fù)制代碼代碼如下:

 
<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() { 
//點(diǎn)擊botton1 
$("#botton1").click(function() { 
var url = "default.aspx?ajax=1"; 
var dtb = generateDtb(); 
//序列化對(duì)象 
var postdata = JSON.stringify(dtb); 
//異步請(qǐng)求 
$.post(url, { json: postdata }, function(json) { 
createTable(json); 
}, "json") 
}); 
}); 
//生成DataTable對(duì)象 
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中的數(shù)據(jù) 
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> 

后臺(tái)代碼：
/// <summary>

復(fù)制代碼代碼如下:

 
/// 頁(yè)面加載時(shí) 
/// </summary> 
/// <param name="sender"></param> 
/// <param name="e"></param> 
protected void Page_Load(object sender, EventArgs e) 
{ 
//判斷是否異步請(qǐng)求 
if (Request.QueryString["ajax"] == "1") 
{ 
ProcessRequest(); 
} 
} 
/// <summary> 
/// 處理異步請(qǐng)求 
/// </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轉(zhuǎn)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轉(zhuǎn)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; 
} 