title: How to keep on scrolling the page vertically and adding items continuously?
body: <p>I've a huge data to display on my page.I want to do this in a similar manner as it is done on facebook page,i.e. I will scroll down the vertical bar and items will be added.I got one web link for this and used its code as follows:--</p>
  
  <pre><code>    &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Form1.aspx.cs"         Inherits="Form1" %&gt;
  
      &lt;%@ Import Namespace="System.Data" %&gt;
      &lt;%@ Import Namespace="System.Data.SqlClient" %&gt;
  
     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;script runat="server"&gt;
  protected void Page_Load(object sender, EventArgs e)
  {
       if (!IsPostBack)
      {
          DataSet ds = new DataSet();
          SqlConnection conn = new SqlConnection("my connection string");
          string _cmdText = "SELECT TOP 20 TRIAL_USER_DETAIL_ID, Convert(CHAR(10),TRIAL_ACTIVATE_DATE,103) as 'ACTIVATEDATE',TRIAL_CD_SERIAL_NO FROM TDSMAN_TRIAL_USER_DETAIL";
          SqlDataAdapter da = new SqlDataAdapter(_cmdText, conn);
          da.Fill(ds,  "User_Detail");
          tblUserDetail.DataSource = ds;
          tblUserDetail.DataBind();
      }
  }  
  &lt;/script&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;Dynamic Content Load on Scroll&lt;/title&gt;
  &lt;style type="text/css"&gt;
      body
      {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 11px;
          color: #666666;
      }
      .divLeft
      {
          height: 220px;
          border: solid 1px blue;
          width: 300px;
          text-align: left;
          overflow: auto;
      }
      .divProgress
      {
          width: 15%;
          background-color: red;
          color: white;
      }
      .tblHeader
      {
          font-weight: bold;
          text-align: left;
          background-color: blue;
          color: red;
      }
      td 
      {
          text-align:center;
      }
  &lt;/style&gt;
  &lt;script src="Scripts/jquery-1.2.6.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      //following code utilizes jQuery 1.2.6
      var prev = 0;
      $(document).ready(
  
      //DIV showing the message "Loading..." is hidden initially
      //The message will be shown when records are fetched with AJAX 
      //when user has scrolled to the bottom of the DIV scrollbar 
      function () {
          $(".divProgress").hide();
  
          $(".divLeft").scroll(
  
      function () {
          //triggering point is when the difference of the heights of the TABLE 
          //and DIV match the DIV's scrollTop value
          if ($("#tblUserDetail").height() - this.scrollTop == $(this).height()) {
              //progress bar         
              $(".divProgress").ajaxStart(function () {
                  $(this).show();
              });
              $(".divProgress").ajaxStop(function () {
                  $(this).hide();
              });
  
              //get last Order Id to track next fetch
              var OrderIdLast = $("#tblUserDetail tr:last").children("td:first").html();
  
              //get last table row in order to append the new result set increment
              var trLast = $("#tblUserDetail tr:last");
              if (parseInt(OrderIdLast, 10) &gt; parseInt(prev, 10)) {
                  prev = OrderIdLast;
                  //make a async call to fetch the incremental results     
                  $.post("AsyncHandler.ashx?lastOrderId=" + OrderIdLast, function (data) {
                      if (data != null) {
                          //append new result set to last row
                          trLast.after(data);
                      }
                  });
              }
          }
      });
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h3&gt;This  is a demo to show Continous Scrolling&lt;/h3&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div class="divLeft"&gt;
              &lt;asp:GridView ID="tblUserDetail" runat="server" AutoGenerateColumns="false" CellPadding="2" Width="100%"&gt;
                  &lt;HeaderStyle CssClass="tblHeader" /&gt;
                  &lt;Columns&gt;
                      &lt;asp:TemplateField HeaderText="Detail Id"&gt;
                           &lt;ItemTemplate&gt;
                                &lt;%#Eval("TRIAL_USER_DETAIL_ID")%&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;asp:TemplateField HeaderText="Activate Date"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;%# Eval("ActivateDate")%&gt;
                              &lt;input type="hidden" id="htxtOrderId" runat="server" value='&lt;%#Eval("TRIAL_USER_DETAIL_ID")%&gt;' /&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;asp:TemplateField HeaderText="CD Serial No."&gt;
                           &lt;ItemTemplate&gt;
                              &lt;%#Eval("TRIAL_CD_SERIAL_NO")%&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                  &lt;/Columns&gt;
              &lt;/asp:GridView&gt;
          &lt;/div&gt;
          &lt;div  class="divProgress"&gt;
              Loading....
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've introduced a handler and its code goes as follows:--</p>
  
  <pre><code>    &lt;%@ WebHandler Language="C#" Class="AsyncHandler" %&gt;
  
      using System;
      using System.Web;
      using System.Text;
      using System.Data;
      using System.Data.SqlClient;
  
     public class AsyncHandler : IHttpHandler {
  
      public void ProcessRequest (HttpContext context) {
          //context.Response.ContentType = "text/plain";
          //context.Response.Write("Hello World");
          //REMOVE BELOW LINE if you are using it in a real application
          //It is here to simulate the delay while fetching results 
          //System.Threading.Thread.Sleep(2000);
  
          //The last OrderId is used to get the next increment
          int lastOrderId = Convert.ToInt32(context.Request.QueryString["lastOrderId"]);
  
          //The PrepareDataSet method stuffs the DataSet into a HTML table
          context.Response.Write(PrepareDataSet(lastOrderId));
      }
  
      private string PrepareDataSet(int LAST_TRIAL_USER_DETAIL_ID)
      {
          System.Data.SqlClient.SqlConnection conn = new SqlConnection("my connection string");
          string _cmdText = "Select TOP 10 TRIAL_USER_DETAIL_ID,Convert(Varchar,TRIAL_ACTIVATE_DATE,103) ActivateDate,TRIAL_CD_SERIAL_NO From TDSMAN_TRIAL_USER_DETAIL Where TRIAL_USER_DETAIL_ID &gt;" + LAST_TRIAL_USER_DETAIL_ID;
  
          SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(_cmdText, conn);
          DataSet ds = new System.Data.DataSet();
          da.Fill(ds,  "User_Detail");
  
          //The BuildRows method prepares a HTML table &amp; stuffs the resultset into it
          return BuildRows(ds.Tables[0]);
      }
  
      private string BuildRows(System.Data.DataTable dt)
      {
          StringBuilder sb = new StringBuilder();
          System.Data.DataRow dr;
          if (dt.Rows.Count &gt; 0)
          {
              for (int i = 0; i &lt; dt.Rows.Count; i++)
              {
                  sb.Append("&lt;tr class='tblRow'&gt;");
                  dr = dt.Rows[i];
                  for (int j = 0; j &lt; dt.Columns.Count; j++)
                  {
                      sb.Append("&lt;td&gt;" + dr[j] + "&lt;/td&gt;");
                  }
                  sb.Append("&lt;/tr&gt;");
              }
          }
          return sb.ToString();
      }
  
      public bool IsReusable 
      {
          get {
              return false;
          }
      }
  
      }
  </code></pre>
  
  <p>Now when I run the code a grid is shown on my page with data in it.But when I scroll down,neither "Loading.." is shown nor next batch of data is populated in the grid.Do any of you have any idea,how to solve this?</p>