[jQuery+Ajax+Json]如何把DataTable轉成JSon(搭配JSon.net的dll)

  • 3131
  • 0
  • 2014-06-09

摘要:[jQuery+Ajax+Json]利用JSon+Ajax從Server讀取資料後,於前端用jQuery讀取出JSon物件(搭配JSon.net的dll)

http://james.newtonking.com/json

下載Jason.net套件,解壓縮之後到bin裡面找自己專案framework版本的資料夾Net40

找到Newtonsoft.Json.dll之後,加入參考到專案

然後記得在程式碼裡面引用


Imports Newtonsoft.Json

首先從資料庫讀取出資料

ps.這裡ajax的做法是用ajaxpro元件去做,當然也可以用最常見的jQuery + Webmethod去做,有興趣可參考

[jQuery+ASP.NET]jQuery ajax Call webmethod

 

<AjaxPro.AjaxMethod(AjaxPro.HttpSessionStateRequirement.ReadWrite)> _
    Public Function testAjaxJqueryJSon() As String
        Dim dt As New DataTable
        dt.Columns.Add("name")
        dt.Columns.Add("idno")
        Dim dr As DataRow = dt.NewRow
        dr("name") = "王先生"
        dr("idno") = "A123456789"
        dt.Rows.Add(dr)
        Dim strJSon As String = JsonConvert.SerializeObject(dt, Formatting.Indented).Replace("[""").Replace("]""")

        Return strJSon

    End Function

然後到前端用jQuery讀取資料(這是讀取單筆資料的情況)


$(document).ready(function () {            
            var jsonString;
            jsonString = ISSALWeb.wFrmFinData.testAjaxJqueryJSon().value;
            
            var jsonObject = jQuery.parseJSON(jsonString);
            alert(jsonObject.name + jsonObject.idno);            
            
        });

 

如果JSon是多筆資料的話


var jsonObject = jQuery.parseJSON(jsonString);
//用迴圈的方式逐筆印出
for (var i = 0; i < jsonObject.length; i++) {
	alert(jsonObject[i].EmployeeID);   
	alert(jsonObject[i].LastName);          
}

收工

補充一下,如果不想另外加入JSON.NET元件,用微軟內建的也可以把DataTable轉成JSon,如下

 public string DtToJSon(DataTable dt)
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new
 
            System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<stringobject>> rows =
              new List<Dictionary<stringobject>>();
            Dictionary<stringobject> row = null;
 
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<stringobject>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName.Trim(), dr[col]);
                }
                rows.Add(row);
            }
            return serializer.Serialize(rows);
        }

如果不想另外加入AjaxPro元件,只用單純jQuery做也可以,參考下面連結:

[jQuery+ASP.NET]jQuery ajax Call webmethod