Question

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>

我尝试在html表中显示json数据它的工作方式相同，但在这种情况下并没有帮助我。当我运行这段代码时，它在控制台屏幕上没有给我任何错误，并且它在浏览器上没有显示任何干净的页面。

Answer 1

GridView控件不会在页面上呈现，除非您为其设置DataSource，这意味着 GridView甚至不会出现在页面上。因此，你的AJAX调用100％工作并获得JSON，但它无法找到要绑定的GridView控件。

要解决此问题，您只需将GridView设置为空DataSource：

代码背后：

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>

<强>输出：

在asp.net的datagridview中显示Json数据

1 个答案: