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

Question

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!

Answer 1

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