最近同事問用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) 如下:
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使用方式:
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 (下載)
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 String
14 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慢一滴滴,
但能表現的資料格式可就非常強大的柳!