Bind Gridview using jQuery JSON Ajax call in asp.net C#

Introduction

Gridview is one of important data control in asp.net and used to display data in tabular form. Developer mostly prefer gridview to bind and use various functionality like selection, sorting, paging, editing and command events. We can not include all gridview event in this article please visit Gridview All in one to grab all about Gridview.

In this article we are going to show how to bind gridview with help of jquery json ajax call in asp.net C#. As you know jQuery ajax call is faster than any other binding techniques. We can call server side code using Ajax Call. GridView Ajax call much faster than traditional asp.net data binding techniques. Using jquery ajax call you can bind gridview data from client side. You can increase performance by using jquery ajax call to bind Gridview. Please visit our previous article jquery autocomplete in asp.net C# to make your textbox with suggestion box.

Recommended to visit

Code of Conduct

In this article we are going show how to bind data to gridview using jquery ajax call. Download Northwind Database to implement this example. To implement this example we take gridview and make ShowHeaderWhenEmpty property true to display header even we don't have any data to bind. Now copy paste above javascript to call WebMethod from server side.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Export Grid to Excel</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnShowData").click(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Default.aspx/BindEmployees",
                    data: "{}",
                    dataType: "json",
                    success: function (result) {
                        for (var i = 0; i < result.d.length; i++) {
                            $("#gvData").append("<tr><td>" + result.d[i].FirstName + "</td><td>" + result.d[i].LastName + "</td><td>" + result.d[i].City + "</td><td>" + result.d[i].Country + "</td></tr>");
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="btnShowData" runat="server">Show Data</button>
    <br /><br />
    <form id="form1" runat="server">
        <asp:GridView ID="gvData" runat="server" CellPadding="4" ShowHeaderWhenEmpty="true" ForeColor="#333333">
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
        </asp:GridView>
    </form>
</body>
</html>
Copy Below code to your cs page.
Default.aspx.cs
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDummyGridrow();
        }
    }

    public void BindDummyGridrow()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("FirstName");
        dt.Columns.Add("LastName");
        dt.Columns.Add("City");
        dt.Columns.Add("Country");
        gvData.DataSource = dt;
        gvData.DataBind();
    }
    [WebMethod]
    public static Employee[] BindEmployees()
    {
        string connectionString = "Your Connection String";
        DataTable dt = new DataTable();
        List employeeList = new List();
        using (SqlConnection con = new SqlConnection(connectionString))
        {
            using (SqlCommand command = new SqlCommand("select FirstName, LastName, City, Country from Employees", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(command);
                da.Fill(dt);
                foreach (DataRow dtrow in dt.Rows)
                {
                    Employee employee = new Employee();
                    employee.FirstName = dtrow["FirstName"].ToString();
                    employee.LastName = dtrow["LastName"].ToString();
                    employee.City = dtrow["City"].ToString();
                    employee.Country = dtrow["Country"].ToString();
                    employeeList.Add(employee);
                }
            }
        }
        return employeeList.ToArray();
    }
    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }
We have method to bind dummy gridview rows that will also help to display headers even gridview don't have data. BindEmployees is webmethod and will return Employee list.

Demo

bind-data-to-gridview-using-jquery-ajax-call-json-in-asp.net-C#

Source code

Download code from github


Please comment below if you any query !!!