Articles → JQUERY → Bind asp.net gridview in jQuery

Bind asp.net gridview in jQuery




























Software requirement









Prerequisite knowledge

















Steps of execution



















Create a new project





Click to Enlarge


Create a new 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





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 08, 2013

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250