Bind Gridview using Jquery

 First step : Creating Data base which will be our data source ,we do it using building the following data table :

Datastore.cs

using System;using System.Data;
public class DataStore{ public DataStore()
  {    //   // TODO: Add constructor logic here  //  } public static DataTable GetDataTable()
  {   DataTable dt = new DataTable("Names");   DataColumn dc1 = new DataColumn("Name");   DataColumn dc2 = new DataColumn("Age");
   dt.Columns.AddRange(new DataColumn[] { dc1, dc2 });   DataRow dr1 = dt.NewRow();
   dr1[0] = "Ahmed";
   dr1[1] = "27";   DataRow dr2 = dt.NewRow();
   dr2[0] = "Peter";
   dr2[1] = "30";   DataRow dr3 = dt.NewRow();
   dr3[0] = "John";
   dr3[1] = "20";   DataRow dr4 = dt.NewRow();
   dr4[0] = "Ali";
   dr4[1] = "30";
   dt.Rows.Add(dr1);
   dt.Rows.Add(dr2);
   dt.Rows.Add(dr3);
   dt.Rows.Add(dr4);
    return dt;  }
}

Next step:

• Creating Class file "Names" which will contain two properties (Data base columns) for "FirstName" and "Age". Like this :

Names.cs

public class Names{ public Names()
 {   //   // TODO: Add constructor logic here  // } private string _firstName; private string _age; public string FirstName
 {   set { _firstName = value; }   get { return _firstName; }
 } public string Age
 {   set { _age = value; }   get { return _age; }
 }
}

Next Step:

• Creating default.aspx page which will display and call the data.
• Create GridView Control in your page :
  <div><center>    <br />
      <asp:GridView ID="NamesGridView" runat="server"ShowHeaderWhenEmpty="True" >
      </asp:GridView>    <br /></center></div>

Notice that we set ShowHeaderWhenEmpty property to true to display columns names when empty.

• In page load event we will write some code which will display the gridview even it empty :
  
  protected void Page_Load(object sender, EventArgs e)
  {
     DataTable dt = new DataTable();
     dt.Columns.AddRange(new DataColumn[] { new DataColumn("Name"), newDataColumn("Age") });
    NamesGridView.DataSource = dt;
    NamesGridView.DataBind();}

Notice that we created two columns Names as "Name" and "Age" .Now you can run the page the GridView should be displayed (try it!).

• In code behind we will create a method which will connect to datastore and retrieve the data values. As the following :

[WebMethod]public static Names[] GetNames(){  List<Names> list = new List<Names>();  DataTable dt = DataStore.GetDataTable();
  foreach (DataRow row in dt.Rows)
   {
      Names _names = new Names();
      _names.FirstName = row["Name"].ToString();
      _names.Age = row["age"].ToString();
     
      list.Add(_names);
   }  return list.ToArray();}

Here we fill data values in the two properties (FirstName,Age) then we add it to List which accept Names Class Object as you saw above. And at the end we need to convert it to an array .

Notice that the method decorated with [Web Method] attribute which will allow us to get this method using client side code , and the method need to be declared as public and static also to get reached  outside the Container class .

Next Step :

• - Calling Server side method that will get the data values and bind the gridview using Jquery like this :

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script><script type="text/javascript">  function BindGridView() {
     $.ajax({
          type: "POST",
          url: "Default.aspx/GetNames",
          data: "{}",
          contentType: "application/json",
          dataType: "json",
          success: function (data) {         for (var i = 0; i < data.d.length; i++) {
                $("#NamesGridView").append("<tr><td>" + data.d[i].FirstName +
                                            "</td><td>" + data.d[i].Age + "</td></tr>");
             }
           }
          })
      }</script>

We can retrieve one column like "FirstName" or "Age" only, in the above code we create a loop to go through result data and using index of array element to get current row ,it is working like a datareader or dataset, then you get specific value "data.d[n].Age".

now ,we can call this functon on body load Like this :

<body onload="BindGridView();">  <form id="form1" runat="server">
   <div>
     <center>
       <br />
         <asp:GridView ID="NamesGridView" runat="server"ShowHeaderWhenEmpty="True">
         </asp:GridView>
       <br />
     </center>
    </div>
  </form>
</body>

When we run this page it should Display GridView like this :