Articles → JQUERY → Bind Asp.Net Gridview In Jquery

Bind Asp.Net Gridview In Jquery

In this article I will explain how to bind asp.net gridview using jQuery.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2008(or above) is installed on your machine.
SQL server management studio (any version) is installed on your machine.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create a project using visual studio
How to create tables and insert data into table using SSMS
Basics of ado.net
Basics about data controls like gridview, datalist etc
Basics about jQuery
How to call jquery's ajax method

Steps Of Execution

In this tutorial I will execute certain steps for binding asp.net gridview in jQuery. These steps are

Create a new project
Create a new table
Add code to fetch data from database
Add code to bind columns in gridview
Add controls on aspx page
Write jQuery code to bind drop down

Let us execute each step

Create A New Project

First of all create a new website. See the screen shot below for project structure

Picture showing the project structure in the visual studio

Click to Enlarge

Create A New Table

Create a new table. See the screen shot below for table schema

Picture showing the table schema of the Student table

Click to Enlarge

Add Code To Fetch Data From Database

Add following code in code behind

[WebMethod]
public static string GetNames() {
	DataSet ds = new DataSet("student");
	using(SqlConnection conn = new SqlConnection(@"conn_string")) {
		conn.Open();
		using(SqlDataAdapter adap = new SqlDataAdapter("select student_name,age from student", conn)) {
			adap.Fill(ds);
		}

	}
	return ds.GetXml();
}

In the code above we are fetching data from database and return the values in the form of xml string.

Add Code To Bind Columns In Gridview

On page load event add following code

protected void Page_Load(object sender, EventArgs e) {
	if (!IsPostBack) {
		DataTable dummy = new DataTable();
		dummy.Columns.Add("name");
		dummy.Columns.Add("age");
		dummy.Rows.Add();
		dlCustomers.DataSource = dummy;
		dlCustomers.DataBind();
	}
}

Here we are creating an object of DataTable class and adding 2 columns and one row in it. Finally I am binding this datatable with gridview. The reason for doing this step is to render the control as HTML when page gets loaded (If you don’t execute this step you can see that gridview is not rendered when page gets loaded).

Add Controls On Aspx Page

Add a button and a gridview control on the screen.

<asp:GridView ID="gvCustomers" runat="server"> </asp:GridView>
<asp:Button ID="btnBind" runat="server" Text="Bind" />

Write Jquery Code To Bind Drop Down

First of all add a script tag to include jQuery file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Then add code to bind gridview

<script type = "text/javascript">
 $(document).ready(
  function() {
   $("#<%=btnBind.ClientID %>").click(function() {

    $.ajax({
     type: "POST",
     url: "Default.aspx/GetNames",
     data: "{}",
     contentType: "application/json",
     dataType: "json",
     success: function(response) {
      var xmlDoc = $.parseXML(response.d);
      var xml = $(xmlDoc);

      var customers = xml.find("student").find("Table");

      var str = "";
      for (i = 0; i < customers.length; i++) {
       str = str + "<tr><td>";
       str = str + $(customers[i]).find("student_name").text();
       str = str + "</td><td>";
       str = str + $(customers[i]).find("age").text();
       str = str + "</td></tr>";
      }

      $("#<%=gvCustomers.ClientID %>").append(str);

     }
    });

    return false;
   });
  }); 
</script>

Output

Run the application and click on ‘Bind’ button

Picture showing the data grid bound to the Student table using jquery

Click to Enlarge

Full Code

Aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
   CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"></asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
      $(document).ready(
          function () {
              $("#<%=btnBind.ClientID %>").click(function () {
      
                  $.ajax({
                      type: "POST",
                      url: "Default.aspx/GetNames",
                      data: "{}",
                      contentType: "application/json",
                      dataType: "json",
                      success: function (response) {
                          var xmlDoc = $.parseXML(response.d);
                          var xml = $(xmlDoc);
      
                          var customers = xml.find("student").find("Table");
                         
                          var str = "";
                          for (i = 0; i < customers.length; i++) {
                              str = str + "<tr><td>";
                              str = str + $(customers[i]).find("student_name").text();
                              str = str + "</td><td>";
                              str = str + $(customers[i]).find("age").text();
                              str = str + "</td></tr>";
                          }
      
                          $("#<%=gvCustomers.ClientID %>").append(str);
      
                      }
                  });
      
                  return false;
              });
          });
   </script>
   <asp:GridView ID="gvCustomers" runat="server">
   </asp:GridView>
   <asp:Button ID="btnBind" runat="server" Text="Bind" />
</asp:Content>

Code behind

using System;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;

public partial class _Default: System.Web.UI.Page {
	/// <summary>
	/// Page load
	/// </summary>
	/// <param name="sender"></param>
	/// <param name="e"></param>
	protected void Page_Load(object sender, EventArgs e) {
		if (!IsPostBack) {
			DataTable dummy = new DataTable();
			dummy.Columns.Add("name");
			dummy.Columns.Add("age");
			dummy.Rows.Add();
			gvCustomers.DataSource = dummy;
			gvCustomers.DataBind();
		}
	}

	[WebMethod]
	public static string GetNames() {
		DataSet ds = new DataSet("student");
		using(SqlConnection conn = new SqlConnection(@"conn_string")) {
			conn.Open();
			using(SqlDataAdapter adap = new SqlDataAdapter("select student_name,age from student", conn)) {
				adap.Fill(ds);
			}

		}
		return ds.GetXml();
	}
}

Posted By -	Karan Gupta

Posted On -	Tuesday, October 8, 2013

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**