Harun KARATAŞ Harun KARATAŞ - 4 months ago 15
JSON Question

Showing Json data in asp.net's datagridview

Im need to showing json data in asp.net's gridview (not html table) . I search a lot but i cant figure it out. I got code like this.


function BindGridView() {
//Tabloyu oluşturma
$.ajax(
{
type: "GET",
url: 'http://jsonplaceholder.typicode.com/users',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function (data) {

for (var i = 0; i < data.length; i++) {
$(".mainGridView").empty();
$(".mainGridView").append('<tr><td class="' + i + '">' + data[i].name + '</td>'
+ '<td>' + data[i].username + '</td></tr>');
};



},

error: function (msg) {

alert(msg.responseText);
}
})
};





<body onload="BindGridView();">
<form id="form1" runat="server">
<div>

<asp:GridView class="mainGridView" runat="server" />
here it s style codes
</asp:GridView>

</div>
</form>




I tried showing json data in html table it was worked same logic but in this case didnt help me.
When i run this code it gives me no error at console screen and it shows nothing on browser it's clean page.

Answer

The GridView control won't render on the page unless you set a DataSource for it, this means the GridView doesn't even appear on the page.So your AJAX call is working 100% and getting the JSON back but it can't find the GridView control to bind to.

To overcome this issue you can just set your GridView bound to an empty DataSource:

Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        mainGridView.DataSource = new List<string>() { };
        mainGridView.DataBind();
    }
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            BindGridView();
            function BindGridView() {
                $.ajax(
                {
                    type: "GET",
                    url: 'http://jsonplaceholder.typicode.com/users',
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        $(".mainGridView").empty();
                        for (var i = 0; i < data.length; i++) {
                            $(".mainGridView").append('<tr><td class="' + i + '">' + data[i].name + '</td>'
                                   + '<td>' + data[i].username + '</td></tr>');
                        };
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }
                })
            };
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="mainGridView" runat="server" CssClass="mainGridView" ShowHeaderWhenEmpty="true" EmptyDataText="No records found">
        </asp:GridView>
    </form>
</body>

Output:

Displaying AJAX call results in ASP.NET GridView

Comments