Gridview is not populating using AJAX post method? how to solve this?

Question

I have a table in my sql database . I am using a gridview to display it in webpage. the problem is nothing is displaying. I have used AJAX post method to get data from database but grid remains empty. i want to display data in gridview on a button click using AJAX post method.

I have a table in my sql database . I am using a gridview to display it in webpage.the problem is nothing is displaying. I have used AJAX post method to get data from database but grid remains empty. i want to display data in gridview on a button click using AJAX post method . 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

Try like this as you set datatype json, your need you response in json format data.
First Create a Class:

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

---

You webmethod look like this which returns a list of car class

   [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: Your success function would be like this:

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

---

Using $.each() you can loop and get/ set to you gridview control, basically gridview control convert into HTML table. So you can add tr to it, as written in below code

 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);
}