How to Return DataTable from WebMethod using JSON and JQuery in asp.net?

asp.net, asynchronous, datatable, jquery, json

Solution

Here is how I normally do it. I load the `DataTable` contents into a dictionary, serialize it and everything works. You can modify the code to suit your needs.

[WebMethod]
public string GetQueryInfo()
{
    String daresult = null;
    DataTable yourDatable = new DataTable();
    DataSet ds = new DataSet();
    ds.Tables.Add(yourDataTable);
    daresult = DataSetToJSON(ds);
    return daresult;
}

public string DataSetToJSON(DataSet ds)
{
    Dictionary < string, object > dict = new Dictionary<string, object>();
    foreach(DataTable dt in ds.Tables) {
        object[] arr = new object[dt.Rows.Count + 1];

        for (int i = 0; i <= dt.Rows.Count - 1; i++) {
            arr[i] = dt.Rows[i].ItemArray;
        }

        dict.Add(dt.TableName, arr);
    }

    JavaScriptSerializer json = new JavaScriptSerializer();
    return json.Serialize(dict);
}

On your aspx.

$.ajax({
    type: "POST",
    url: 'Webservices/GetQueryInfo',
    data: {},
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    success: function (data) {
        var objdata = $.parseJSON(data.d);
        // now iterate through this object's contents and load your gridview
    }
});

There are many tutorials on how to load a grid view using JavaScript or jquery. This will at least give you a starting point. You can find a nice example here.To do CRUD operations with the `GridView` see link here

Problem

I am new to `JSON`. I have created a sample which returns the `String` from `WebMethod` and assign the value returned to `asp.net Label` control. Sample JSON returning String: ``` <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "JSONSample.aspx/DisplayData", data: "{}", dataType: "json", success: function(data) { //alert("hi"); $("#ctl00_MainContent_lbltxt").text(data.d); }, error: function(result) { alert("Error"); } }); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> <label id="lbltxt" runat="server"></label> </asp:Content> ``` In .cs file( returning String): ``` [WebMethod] public static string DisplayData() { return DateTime.Now.ToString(); } ``` This works fine. How to access `DataTable` using `JSON` and `JQuery`? ``` [WebMethod] public static DataTable DisplayData() { DataTable dt = new DataTable(); return dt.GetData(); } ``` I want to return the DataTable and Bind the GridView/Access each row of `DataTable` using JSON & JQuery. Please suggest me the right method to `Return` `DataTable` using `JSON`. I have seen some sample using `handlers` & some sample with using `WebMethod`. Which one to use? What are the Benefits one over the other. Help Appreciated!

Original source