在 asp.net datagridview 中显示 Json 数据答案

【问题标题】：Showing Json data in asp.net's datagridview在 asp.net datagridview 中显示 Json 数据
【发布时间】：2016-07-19 07:42:04
【问题描述】：

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 数据，它的工作逻辑相同，但在这种情况下并没有帮助我。当我运行此代码时，它在控制台屏幕上没有给我任何错误，并且它在浏览器上什么也没有显示它是干净的页面。

【问题讨论】：

标签： jquery asp.net json datagridview

【解决方案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>

输出：

【讨论】：