In this article I will explain with an example, how to populate (bind) GridView using jQuery AJAX in ASP.Net with C# and VB.Net.
This article will illustrate how to populate ASP.Net GridView control from SQL Server Database on Client Side by calling WebMethod using jQuery AJAX in ASP.Net with C# and VB.Net.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
Download and install Northwind Database
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net GridView with three BoundField columns.
<asp:GridView ID = "gvCustomers" runat="server" AutoGenerateColumns = "false">
<Columns>
    <asp:BoundField DataField = "CustomerID" HeaderText = "Customer Id" />
    <asp:BoundField DataField = "ContactName" HeaderText = "ContactName" />
    <asp:BoundField DataField = "Country" HeaderText = "Country" />
</Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
 
 
Populating the GridView with a Dummy Item
Inside the Page Load event, the GridView control is populated with a dummy record.
In order to populate the GridView control using jQuery AJAX on Client Side, a dummy DataTable will be used with Column schema same as that of the columns returned from the database.
This dummy item will be cloned and used by jQuery to add new items to the GridView control on Client Side.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("CustomerID");
        dummy.Columns.Add("ContactName");
        dummy.Columns.Add("Country");
        dummy.Rows.Add();
        gvCustomers.DataSource = dummy;
        gvCustomers.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("CustomerID")
        dummy.Columns.Add("ContactName")
        dummy.Columns.Add("Country")
        dummy.Rows.Add()
        gvCustomers.DataSource = dummy
        gvCustomers.DataBind()
    End If
End Sub
 
 
WebMethod to handle jQuery AJAX calls
The following WebMethod will be used as a source of data to the jQuery AJAX calls.
When a call is made to the WebMethod, it first fetches the records from the database and populates a DataSet and then the DataSet is returned as an XML string back to the calling Client Side function.
C#
[WebMethod]
public static string GetCustomers()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT TOP 10 CustomerID, ContactName, Country FROM Customers";
            cmd.Connection = con;
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataSet ds = new DataSet();
                sda.Fill(ds);
                return ds.GetXml();
            }
        }
    }
}
 
VB.Net
<WebMethod()>
Public Shared Function GetCustomers() As String
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand()
            cmd.CommandText = "SELECT TOP 10 CustomerID, ContactName, Country FROM Customers"
            cmd.Connection = con
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                Dim ds As DataSet = New DataSet()
                sda.Fill(ds)
                Return ds.GetXml()
            End Using
        End Using
    End Using
End Function
 
 
Client Side functionality
Inside the jQuery document ready event handler, an AJAX call is made to the WebMethod.
The XML string returned from the WebMethod is received inside the Success event handler.
The XML string is parsed into an XML document and then a loop is executed for each entry present in the XML.
Inside the loop, the dummy item of the GridView control is cloned and the columns values are set to their respective fields.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (r) {
                alert(r.d);
            },
            error: function (response) {
                alert(r.d);
            }
        });
    });
 
    function OnSuccess(r) {
        //Parse the XML and extract the records.
        var customers = $($.parseXML(r.d)).find("Table");
 
        //Reference GridView Table.
        var table = $("[id*=gvCustomers]");
 
        //Reference the Dummy Row.
        var row = table.find("tr:last-child").clone(true);
 
        //Remove the Dummy Row.
        $("tr", table).not($("tr:first-child", table)).remove();
 
        //Loop through the XML and add Rows to the Table.
        $.each(customers, function () {
            var customer = $(this);
            $("td", row).eq(0).html($(this).find("CustomerID").text());
            $("td", row).eq(1).html($(this).find("ContactName").text());
            $("td", row).eq(2).html($(this).find("Country").text());
            table.append(row);
            row = table.find("tr:last-child").clone(true);
        });
    }
</script>
 
 
Screenshot
Bind Dataset to ASP.Net GridView using jQuery AJAX
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code