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!

phwt · Accepted Answer · 2020-04-07 12:30:48Z

14

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

edited Apr 7, 2020 at 12:30

phwt

1,4241 gold badge28 silver badges47 bronze badges

answered Dec 2, 2013 at 9:44

abidmix

1,7481 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SHEKHAR SHETE Over a year ago

hi @Abide Masaraure, After making some modifications this code runs. But, i am not able to bind the GridView with this Returned DataTable will you please tell me how to do?

abidmix Over a year ago

I have updated my answer with a link you can reference.What does your json returned object look like.Let me know if you cant still append rows to your grid view.

SHEKHAR SHETE Over a year ago

Oh..Till you reply me i have done with the same..! Now, How to Pass CommandName & CommandArguments?

abidmix Over a year ago

I have send you a chat request on gmail.You need to clarify exactly what you want to do with those arguments.Bear in mind that, because you would have rendered the gridview client side,the server has no idea of the current viewstate of your gridview anymore.

SHEKHAR SHETE Over a year ago

Ok instead why dont we use chat.stackoverflow.com/rooms/info/42333/… i have created it..so plz join here..

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related