最近同事問用ASP.NET AJAX Call Web Service可以傳回DataTable嗎?現在公司專案的後台很多都直用AJAX作掉,達到非同步的效果,目前公司的作法是用Web Service回傳一個 List 到前端給JavaScript作Parse,Parse過程花調許多程式與效能,所以問題來了,如果能直接傳回DataTable該有多好啊!?
最近同事問用ASP.NET AJAX Call Web Service可以傳回DataTable嗎?
現在公司專案的後台很多都直用AJAX作掉,達到非同步的效果,
目前公司的作法是用Web Service回傳一個 List 到前端給JavaScript作Parse,
Parse過程花調許多程式與效能,所以問題來了,如果能直接傳回DataTable該有多好啊!?
是的,要回傳DataTable其實是可行的,使用ASP.NET 2.0 AJAX Futures 的確有方法可以作到,
只不過,該Solution目前還是CTP,且滿久了,不知何時才會發佈正式版,還是石沉大海了?
後來我提出了一個解決方案,也可以達到"感覺像"傳回一個DataTable,那就是使用JSON,
這裡使用一個C# Class來作解析,可直接傳入DataTable到這個類別裡的Method當參數,
該Method會教這個DataTable提煉成JSON的Format String,所以該Web Service回傳型別是一個String Type,
C# Class (DT2JSON) 如下:
using System.Data; 002
using System.Text; 003
004
public class DT2JSON 005
{ 006
/// <summary> 007
/// 將DataTable轉換成JSON格式字串 (不可指定查詢欄位) 008
/// JavaScript使用方式:OBJ.Table[0].Row[0].Cell[0].Data 009
/// </summary> 010
/// <param name="dt">DataTable</param> 011
/// <returns>回傳一個JSON格式的DataTable內容</returns> 012
public static string JSON_DataTable(DataTable dt) 013
{ 014
StringBuilder JsonString = new StringBuilder(); 015
JsonString.Append("{ ""); 016
JsonString.Append("\"Table\":[{ " 043
JsonString.Append("]}]}); 044
return JsonString.ToString(); 045
}); 017
JsonString.Append("\"Row\":[ "); 018
for (int i = 0; i < dt.Rows.Count; i++) 019
{ 020
JsonString.Append("{ " 038
else 039
{ 040
JsonString.Append("]}); 041
}, "); 021
JsonString.Append("\"Cell\":[ "); 022
for (int j = 0; j < dt.Columns.Count; j++) 023
{ 024
if (j < dt.Columns.Count - 1) 025
{ 026
JsonString.Append("{"," + "\"Value\":\"" + dt.Rows[i][j].ToString() + "\"}); 027
} 028
else if (j == dt.Columns.Count - 1) 029
{ 030
JsonString.Append("{"" + "\"Value\":\"" + dt.Rows[i][j].ToString() + "\"}); 031
} 032
} 033
034
if (i == dt.Rows.Count - 1) 035
{ 036
JsonString.Append("]}); 037
} " 042
} 046
047
/// <summary> 048
/// 將DataTable轉換成JSON格式字串 (可指定查詢欄位) 049
/// JavaScript使用方式:OBJ.Data[0].Name 050
/// </summary> 051
/// <param name="dt">DataTable</param> 052
/// <returns>回傳一個JSON格式的DataTable內容</returns> 053
public static string CreateJsonParameters(DataTable dt) 054
{ 055
StringBuilder JsonString = new StringBuilder(); 056
if (dt != null && dt.Rows.Count > 0) 057
{ 058
JsonString.Append("{ " 084
JsonString.Append("]}); 085
return JsonString.ToString(); 086
}); 059
JsonString.Append("\"Data\":[ "); 060
for (int i = 0; i < dt.Rows.Count; i++) 061
{ 062
JsonString.Append("{ " 079
else 080
{ 081
JsonString.Append("}); 082
}, "); 063
for (int j = 0; j < dt.Columns.Count; j++) 064
{ 065
if (j < dt.Columns.Count - 1) 066
{ 067
JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\","); 068
} 069
else if (j == dt.Columns.Count - 1) 070
{ 071
JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\""); 072
} 073
} 074
075
if (i == dt.Rows.Count - 1) 076
{ 077
JsonString.Append("}); 078
} " 083
}" 087
else 088
{ 089
return null; 090
} 091
} 092
093
/// <summary> 094
/// 將DataTable轉換成JSON格式字串 (可指定查詢欄位) 095
/// JavaScript使用方式:OBJ.[DataTable名稱][0].Name 096
/// </summary> 097
/// <param name="dtName">DataTable名稱</param> 098
/// <param name="dt">DataTable</param> 099
/// <returns>回傳一個JSON格式的DataTable內容</returns> 100
public static string CreateJsonParameters(string dtName, DataTable dt) 101
{ 102
StringBuilder JsonString = new StringBuilder(); 103
if (dt != null && dt.Rows.Count > 0) 104
{ 105
JsonString.Append("{ " 131
JsonString.Append("]}); 132
return JsonString.ToString(); 133
}); 106
JsonString.AppendFormat("\"{0}\":[ ", dtName.Trim()); 107
for (int i = 0; i < dt.Rows.Count; i++) 108
{ 109
JsonString.Append("{ " 126
else 127
{ 128
JsonString.Append("}); 129
}, "); 110
for (int j = 0; j < dt.Columns.Count; j++) 111
{ 112
if (j < dt.Columns.Count - 1) 113
{ 114
JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\","); 115
} 116
else if (j == dt.Columns.Count - 1) 117
{ 118
JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\""); 119
} 120
} 121
122
if (i == dt.Rows.Count - 1) 123
{ 124
JsonString.Append("}); 125
} " 130
}" 134
else 135
{ 136
return null; 137
} 138
} 139
}Web Service Method使用方式:
[WebMethod] 02
public string GetDataTable() 03
{ 04
DataTable dt = new DataTable(); 05
06
dt.Columns.Add(new DataColumn("Name", typeof(string))); 07
dt.Columns.Add(new DataColumn("LastName", typeof(string))); 08
dt.Columns.Add(new DataColumn("Email", typeof(string))); 09
10
dt.Rows.Add("何", "若瑄", "loveyou@yahoo.com.tw"); 11
dt.Rows.Add("毛", "俊傑", "momotw@gamil.com"); 12
13
return DT2JSON.JSON_DataTable(dt); 14
}
ASPX JavaScript 使用方式,這裡是採jQuery的作法,JavaScript作法也差不多,
呼叫用法可以參數C# Class,我有寫在註解裡。
這裡引進了3個JS File
第一個是jQuery主程式
第二個是可以讓VS 2008 SP1支援jQuery intellisense
第三個是jQuery Plugin,用它來Parse JSON (下載)
<script src="lib/jquery-1.2.6.pack.js" type="text/javascript"></script> 02
<script src="lib/jquery-1.2.6-intellisense.js" type="text/javascript"></script> 03
<script src="lib/jquery.json-1.2.js" type="text/javascript"></script> 04
<script language="javascript" type="text/javascript"> 05
06
$(document).ready(function() { 07
$("#Button1").click(function() { 08
WSTEA.GetDataTable(complete); 09
}); 10
}); 11
12
function complete(data) { 13
alert(data); //Alert JSON String14
var obj = $.evalJSON(data); 15
16
$(obj.Table[0].Row[0].Cell).each(function(i) { 17
alert(obj.Table[0].Row[0].Cell[i].Value); 18
}); 19
} 20
21
</script>
就這樣,簡簡單單就可以調用JSON的資料,網頁間傳遞資料使用JSON真的挺方便的,
值得一提的是JSON的速度比較快,用起來感覺像Array,而XML呢?雖然速度比JSON慢一滴滴,
但能表現的資料格式可就非常強大的柳!
using