Asp.net Grid 未使用 JSON /AJAX 填充答案

【问题标题】：Asp.net Grid not Populating using JSON /AJAXAsp.net Grid 未使用 JSON /AJAX 填充
【发布时间】：2014-04-19 06:16:46
【问题描述】：

我需要通过 JSON/Ajax 填充网格（我不想使用模板）...其余代码工作正常

编辑：是否需要将 Grid 与 DataSource /DataBind 绑定？没有它就不行吗？

这是我的成功函数（代码按照教程）

 $.ajax({
    type: "POST",
    url: location.pathname + "/getData",
    data: "{}",
    contentType: "application/json;charset=utf-8",
    dataType: "JSON",
    async: "true",
    success: function(data) {
      for (var i = 0; i < data.d.length; i++) {
             $("#gvDetails").append("<tr><td>" + data.d[i].Id + "</td><td>" + data.d[i].FUllName + "</td></tr>");
       }
     },
    error: function (response) {
        alert(response.status + ' ' + response.statusText);
    }

});

json 数据：

0   Object { Id=1, FUllName="John Smith", Gender="Male", more...}    
1   Object { Id=29, FUllName="aass", Gender="ss", more...}

网格标记：

<asp:GridView ID="gvDetails" runat="server">

它不显示任何东西。

类似的帖子：

Populating Gridview Using Ajax

这篇文章要求附加在 Grid 上。我这样做了.. 请推荐

【问题讨论】：

你在这里使用完整的例子吗？ weblogs.asp.net/ahmedmoosa/archive/2010/10/30/… 特别是这句话：请注意，使用 [Web Method] 属性装饰的方法将允许我们使用客户端代码获取此方法，并且该方法需要声明为 public 和 static 也可以在 Container 类之外到达.
是的。这就是我发布 json 数据的原因。我相信如果剩下的事情出错了 ..我无法获取 json 数据...
您遇到的错误是什么？
无错误。只是网格不会显示

标签： jquery asp.net ajax json gridview

【解决方案1】：

试试这个。

<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: "Default.aspx/BindDatatable",
          data: "{}",
          dataType: "json",
          success: function(data) {
          for (var i = 0; i < data.d.length; i++) {
                 $("#gvDetails").append("<tr><td>" + data.d[i].UserId + "</td><td>" + data.d[i].UserName + "</td><td>" + data.d[i].Location + "</td></tr>");
           }
         },
        error: function(result) {
              alert("Error");
      }
    });
  });
  </script>

<asp:GridView ID="gvDetails" runat="server">
     <HeaderStyle BackColor="#DC5807" Font-Bold="true" ForeColor="White" />
</asp:GridView>

【讨论】：

我在我的脚本中发布了成功函数..它不起作用..它给出了错误

【解决方案2】：

我终于通过参考其他帖子让它工作了..但我不认为这是好的代码::

ajax 方法：

 $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebForm1.aspx/GetDBData",
        data: "{}",
        dataType: "json",
        success: function (data) {
            $("#gvDetails").find("tr:gt(0)").remove();
            for (var i = 0; i < data.d.length; i++) {
                $("#gvDetails").append("<tr><td>" + data.d[i].Id + "</td><td>" + data.d[i].Gender + "</td></tr>");
            }

        },
        error: function (result) {
            alert(result.status + ' ' + result.statusText);
        }
    });

方法背后的代码 ...

    static DataTable dt = new DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {
        dt = LoadData();
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }


    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static Employee[] GetDBData()
    {
        dt = LoadData();
        List<Employee> details = new List<Employee>();
        foreach (DataRow dtrow in dt.Rows)
        {
            try
            {
                Employee user = new Employee();
                user.Id = Convert.ToInt32(dtrow["Id"]);
                user.Gender = dtrow["Gender"].ToString();
                details.Add(user);
            }

            catch (Exception e)
            {
                throw e;
            }
        }

        return details.ToArray();
    }

从数据库加载数据..

   public static DataTable LoadData()
        {
            dt.Rows.Clear();
            String ConnString = ConfigurationManager.ConnectionStrings["ComputerFirmConnectionString"].ConnectionString;
            SqlDataAdapter adapter = new SqlDataAdapter();
            DataTable myDataTable = new DataTable();
            using (SqlConnection conn = new SqlConnection(ConnString))
            {
                adapter.SelectCommand = new SqlCommand("SELECT Id, Gender FROM tblEmployee", conn);
                adapter.Fill(myDataTable);
            }
            return myDataTable;

        }

【讨论】：