Articles → JQUERY → Bind Asp.Net Gridview In Jquery

Bind Asp.Net Gridview In Jquery






Software Requirement




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

Prerequisite Knowledge




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

Steps Of Execution




  1. Create a new project
  2. Create a new table
  3. Add code to fetch data from database
  4. Add code to bind columns in gridview
  5. Add controls on aspx page
  6. Write jQuery code to bind drop down



Create A New Project




Picture showing the project structure in the visual studio
Click to Enlarge


Create A New Table




Picture showing the table schema of the Student table
Click to Enlarge


Add Code To Fetch Data From Database




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





Add Code To Bind Columns In Gridview




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





Add Controls On Aspx Page




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



Write Jquery Code To Bind Drop Down




<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>



Output




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


Full Code




<%@ 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>




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/FeedbackCharacters remaining 250