[C#][ASP.NET]DataTable to json

  • 22262
  • 0
  • C#
  • 2010-12-02

[C#][ASP.NET]DataTable to json

上一篇我利用ajax PageMethods呼叫Server function,返回string並更新頁面訊息,

這篇將利用json來呈現Html Table,整個過程如下:

1.Server端DataTable資料拋給client端(資料格式需轉換成json格式)

2.Client端組Html Table Tag

3.Browser呈現最後Data and Style

這裡主要就是要解決Server端DataTable轉換成json格式拋給Client,自己實作練習一下。

 

DataTable to Json Class可參考Dataset, Datatable to Json(我就直接引用了...太懶了)。

 

.aspx

image

div:呈現Table容器。

 

Client Script

		function CallServer(destid) {       
		//呼叫Server Function   
		PageMethods.GetData(OnSuccess, OnFailure, destid);
		}
		 
		function OnSuccess(result, destid) {
		//成功時,目地控制項顯示所接收結果
		$("#" + destid).html(buildHtmldt(result.UserInfo));
		}
		 
		function OnFailure(error, destid) {
		if (error != null) {
		alert(error.get_message());
		}
		}  
		 
		function buildHtmldt(dataTable) {
		var headers = [];
		var rows = [];
		headers.push("<tr>");
		//Column標題
		for (var column in dataTable[0])
		headers.push("<th>" + column + "</th>");
		headers.push("</tr>");
		//row資料
		for (var row in dataTable) {
		rows.push("<tr>");
		for (var column in dataTable[row]) {
		rows.push("<td>");
		rows.push(dataTable[row][column]);
		rows.push("</td>");
		}
		rows.push("</tr>");
		}       
		var top = "<table border='1' class='gridview'>";
		var bottom = "</table>";
		return top + headers.join("") + rows.join("") + bottom;
		}

 

 

.aspx.cs

		[WebMethod]
		public static Dictionary<string, object> GetData()
		{   
		return JsonMethods.ToJson( GetDataTable() );
		}
		 
		private static DataTable GetDataTable()
		{
		DataTable dt = new DataTable();
		dt.TableName = "UserInfo";
		dt.Columns.Add( new DataColumn( "NAME", typeof( string ) ) );
		dt.Columns.Add( new DataColumn( "AGE", typeof( int ) ) );
		DataRow dr = dt.NewRow();
		dr[ "NAME" ] = "RiCo";
		dr[ "AGE" ] = 28;
		dt.Rows.Add( dr );
		return dt;
		}

 

 

結果

image

點擊按鈕。

 

image

呈現Html Table。

 

 

參考

Dataset, Datatable to Json