Having issues with populating Gridview using AJAX post method? Looking for a solution?

Question

Having issues with populating Gridview using AJAX post method? Looking for a solution?

Having trouble displaying data from a SQL database in a GridView on a webpage using AJAX post method? You're not alone. Many face the same issue of the grid appearing empty despite fetching data from the database.

If you want to populate your GridView with data upon button click, consider revisiting your code and make sure you are correctly binding the data fetched through AJAX post method.

// C# code
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDummyRow();
    }
}

private void BindDummyRow()
{
    // Create dummy DataTable for GridView
}

[WebMethod]
public static string GetCarService()
{
    // Fetch Car Service data from the database
}

// JavaScript code
function GridDisplay(){
    GetCarService();
}

// More JavaScript code...


// ASPX markup
<asp:Button runat="server" ID="modalTransportSearchButton" Text="Search" OnClientClick="GridDisplay();" Width="100px" />

// The rest of the GridView markup here...

javascript c#asp.net ajax

Answer 1

Answer №1

If you want your response data in JSON format, set the datatype to json. Here is an example:

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

Your web method should return a list of car class like this:

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

In JQuery, your success function should look something like this:

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

Use $.each() to loop through and set data to your gridview control, which essentially converts it to an HTML table. Here's an example:

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

Answer 2

If you want your response data in JSON format, set the datatype to json. Here is an example:

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

Your web method should return a list of car class like this:

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

In JQuery, your success function should look something like this:

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

Use $.each() to loop through and set data to your gridview control, which essentially converts it to an HTML table. Here's an example:

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

Having issues with populating Gridview using AJAX post method? Looking for a solution?

Answer №1

Similar questions

What is the process for including a class on a div element?

Enhance the readability and writability of the properties of JavaScript objects

When you click on a single checkbox, it automatically selects all of them

Visualizing Data with Flot.js - A Comprehensive Guide

Changing the color of a div through animation

Best practices for executing an asynchronous forEachOf function within a waterfall function

Issue with Jest Test Trigger Event Not Invoking Method

Troubleshooting: xPages radio button group onchange event malfunctioning

Can anyone recommend a super sleek drop-down navigation menu that includes both images and text descriptions?

Fixing a JavaScript Issue with Updating Div Class Content

A step-by-step guide on resolving the issue "Error: listen EADDRINUSE: address already in use :::5000" in the event of an error

An issue has been discovered with the Search function as JavaScript's Array.filter() and .map() methods are not functioning properly, resulting in

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

PHP: Dynamically update div content upon submission

After refreshing the page in Next JS, there is a delay in loading the Swiper Js styles. The Swiper slides appear stretched while waiting for Next JS to load the styles. Any suggestions

Transforming 2D rotation into 3D using three.js

Exploring the Variations in Selenium WebDriver Implementations

retrieving the value of a textbox generated dynamically through C# code

Searching for an item within an object to retrieve an alternative element from that very same object

Conceptual Confusion