Convert Data Table To Json (Webservice ASP.Net)

Post นี้สำหรับ Dev ที่ทำการ Develop Json ด้วย .Net ครับ ถ้าหากใครที่เคยได้ศึกษามาบ้างแล้วทางที่ถูกต้องที่สุดคือการสร้าง Object Properties มาใช้งานตามตัวอย่าง Code ด้านล่างครับ ซึ่งผมก็เห็นด้วยกับวิธีการดังกล่าว

 
====== Webservice
[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public CityList GetCities()
    {
        CityList oBoCityList = new CityList() { new City { Name = "New Delhi", ID = 1 }, new City { Name = "Kanpur", ID = 2 }, new City { Name = "Gurgaon", ID = 3 } };
        return oBoCityList;
    }
}
 
public class City
{
    public City() { }
    public string Name
    { get; set; }
    public Int32 ID
    { get; set; }
}




====== JavaScript
 $.ajax({
            type: 'POST',
            url: 'WebService.asmx/GetCities',
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseText);
            },
            success: function(data) {
                var cities = data.d;
                $.each(cities, function(index, cities) {
                    alert("City Name: " + cities.Name + "nID: " + cities.ID);
                });
            }
        });

ให้สังเกตว่า  cities.Name  และ cities.ID  นี่ก็คือค่า Properties ที่เราสร้างขึ้นนั่นเอง  ถ้าถามว่าถ้าเราไม่อยากสร้าง Properties และใช้ Data Table ตรงๆได้ไหมก็เพียงแค่ใช้ Function ด้านล่างครับ

//-----------------------c#------------------------------
 
public string GetJson(DataTable dt)
{
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new 
 
    System.Web.Script.Serialization.JavaScriptSerializer();
    List<Dictionary<string, object>> rows = 
      new List<Dictionary<string, object>>();
    Dictionary<string, object> row = null;
 
    foreach (DataRow dr in dt.Rows)
    {
        row = new Dictionary<string, object>();
        foreach (DataColumn col in dt.Columns)
        {
            row.Add(col.ColumnName.Trim(), dr[col]);
        }
        rows.Add(row);
    }
    return serializer.Serialize(rows);
}
Collapse | Copy Code
'------------------------vb.net------------------------
 
Public Function GetJson(ByVal dt As DataTable) As String
    Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
    Dim rows As New List(Of Dictionary(Of String, Object))()
    Dim row As Dictionary(Of String, Object) = Nothing
    For Each dr As DataRow In dt.Rows
        row = New Dictionary(Of String, Object)()
        For Each dc As DataColumn In dt.Columns
         
                row.Add(dc.ColumnName.Trim(), dr(dc))
           
        Next
        rows.Add(row)
    Next
    Return serializer.Serialize(rows)
End Function

เราเพียงแค่ส่ง DataTable เข้าไปใน Function แล้วใช้งาน $.parseJSON(msg.d); ตาม Code JavaScript ด้านล่าง (Webservice เรา Return เป็น String นะครับ)

=====JavaScript
 success: function (msg) {
                         $("#thelist").html('');

                          var parsed = $.parseJSON(msg.d);

                        $(parsed).each(function () {

                         $("#thelist").append("<li>" + this.Name + "</li>");
                     });

this.Name = เป็นชื่อ Column ใน DataTable นะครับ  เท่านี้เราก็ไม่ต้องสร้าง Properties แล้วครับ

 

หวังว่าคงมีประโยชน์บ้างนะครับ^_^