Gridview是否未使用AJAX发布方法填充？ 如何解决呢？

Question

我的sql数据库中有一个表。 我正在使用gridview在网页中显示它。 问题是什么都没有显示。 我已经使用AJAX发布方法从数据库中获取数据，但是网格仍然为空。 我想使用AJAX发布方法在单击按钮时在gridview中显示数据。

我的sql数据库中有一个表。 我正在使用gridview在网页中显示它。问题是什么也没显示。 我已经使用AJAX发布方法从数据库中获取数据，但是网格仍然为空。 我想使用AJAX发布方法在单击按钮时在gridview中显示数据。 1个

 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDummyRow(); } } private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add("CarServiceId"); dummy.Columns.Add("CarServiceName"); dummy.Columns.Add("CityId"); dummy.Columns.Add("Address"); dummy.Columns.Add("Contact1"); dummy.Columns.Add("Contact2"); dummy.Columns.Add("CarType"); dummy.Columns.Add("NoOfCar"); dummy.Columns.Add("MinimumPrice"); dummy.Columns.Add("MaximumPrice"); dummy.Rows.Add(); carServiceGridView.DataSource = dummy; carServiceGridView.DataBind(); } [WebMethod] public static string GetCarService() { DataTable carDT = CarService.GetCarService(); //get data from Car Service table ( select * from CarService) DataSet ds = new DataSet(); ds.Tables.Add(carDT); return ds.GetXml(); } Javascript: function GridDisplay(){ GetCarService(); } function GetCustomers() { // debugger; $.ajax({ type: "POST", url: "Default.aspx/GetCarService", data: '{}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } function OnSuccess(response) { // debugger; var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find("CarService"); var row = $("[id*=carServiceGridView] tr:last-child").clone(true); $("[id*=carServiceGridView] tr").not($("[id*=carServiceGridView] tr:first-child")).remove(); $.each(customers, function () { // debugger; var customer = $(this); $("td", row).eq(0).html($(this).find("CarServiceID").text()); $("td", row).eq(1).html($(this).find("CarServiceName").text()); $("td", row).eq(0).html($(this).find("Address").text()); $("td", row).eq(1).html($(this).find("Contact1").text()); $("td", row).eq(2).html($(this).find("Contact2").text()); $("td", row).eq(0).html($(this).find("MinimumPrice").text()); $("td", row).eq(1).html($(this).find("MaximumPrice").text()); $("td", row).eq(2).html($(this).find("NoOfCar").text()); $("td", row).eq(2).html($(this).find("CarType").text()); $("[id*=carServiceGridView]").append(row); row = $("[id*=carServiceGridView] tr:last-child").clone(true); }); }; 

 .aspx: <asp:Button runat="server" ID="modalTransportSearchButton" Text="Search" OnClientClick="GridDisplay();" Width="100px" /> <asp:GridView ID="carServiceGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="CarServiceId" Width="100%" Height="100%" AlternatingRowStyle-BackColor="WhiteSmoke"> <Columns> <asp:TemplateField HeaderText="Select"> <ItemTemplate> <asp:RadioButton ID="carServiceGridViewRadioButton" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CarServiceId" HeaderText="Id " /> <asp:BoundField DataField="CarServiceName" HeaderText="Service " /> <asp:BoundField DataField="Address" HeaderText="Address " /> <asp:BoundField DataField="Contact1" HeaderText="Contact 1 " /> <asp:BoundField DataField="Contact2" HeaderText="Contact 2 " /> <asp:BoundField DataField="MinimumPrice" HeaderText="Minimum Price " /> <asp:BoundField DataField="MaximumPrice" HeaderText="Maximum Price " /> <asp:BoundField DataField="NoOfCar" HeaderText="No Of Car " /> <asp:BoundField DataField="CarType" HeaderText="Car Types " /> </Columns> </asp:GridView> 

Answer 1

设置数据类型json时请尝试这样，您需要以json格式的数据进行响应。
首先创建一个类：

 public class Cars
    {
        public string CarServiceId;
        public string CarServiceName;
        public string Contact1;
        ........
    }

---

您的网络方法看起来像这样，它返回汽车类别的列表

   [WebMethod]
    public List<Cars> getListOfCars(List<string> aData)
    {
        SqlDataReader dr;
        List<Cars> carList = new List<Cars>();

        using (SqlConnection con = new SqlConnection(conn))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "YourStoredProcedureName";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = con;
                con.Open();
                dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        string CarServiceId= dr["CarServiceId"].ToString();
                        string CarServiceName= dr["CarServiceName"].ToString();
                        string Contact1= dr["Contact1"].ToString();

                        carList.Add(new Cars
                              {
                                CarServiceId= CarServiceId,
                                 CarServiceName= CarServiceName,
                                 Contact1= Contact1
                            });
                    }
                }
            }
        }
        return carList;
    }

---

jQuery：您的成功函数将如下所示：

function OnSuccess(response) {
 var aData=response.d
  alert(aData);
}

---

使用$.each()可以循环获取并设置gridview控件，基本上将gridview控件转换为HTML表。 因此，您可以将tr添加到它，如下面的代码所示

 function OnSuccess(response) {
    var aData = response.d
    var fragmentation = "";
    $(aData).each(function (indx,val) {
        console.log(val.CarServiceId);
        fragmentation += "<tr><td>" + val.CarServiceId + "</td><td>" + val.CarServiceName + "</td><td>" + val.Contact1 + "</td></tr>"
    });
    $(".myGrdivewClassName").append(fragmentation);
}

在Asp.net C＃中使用SQL数据库查看本文中的简单jQuery ajax JSON示例