title: Load data only when page is scrolled down MVC 4 Jquery Mobile
body: <p>In my view am populating contents taken from a Table which has more than 1000 records. I have to populate the contents in a manner that records are populated to fewer records only when scrolled down and not at once. I use this for developing a mobile application. I have tried with various sources online but not effective to the extent of scrolling. If you are still not clear with my question, most of you might have used facebook. There the posts are not loaded all at once. only when scrolled they are loaded. i have to implement the same functionality. Any references to the realtime code will be appreciated. thanks in advance.</p>
  
  <p>Here is my code where i am getting the records</p>
  
  <pre><code>@foreach (System.Data.DataRow row in Model.dtSearch.Rows)
  {
  if (Model.dtSearch.Rows.Count &gt; 0)
      {
      &lt;input type ="hidden" value="@row["ProductId"]" /&gt;
      &lt;input type ="hidden" value="@row["ProductPriceId"]" /&gt;
  
      &lt;div class="divSearchResult" id="divSearch"&gt;
      &lt;table&gt;
      &lt;tbody&gt;
      &lt;tr&gt;&lt;td rowspan="2" style="width:10%"&gt; @Html.Raw(row["ThumbnailFilename"])&lt;/td&gt;
      &lt;td colspan="3"&gt;&lt;div class="divSearchHeader"&gt; @row["ProductName"] &lt;br /&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td colspan="4"&gt;&lt;div class="divSearchShowHide" &gt;&lt;a class="classShow" id="show" href="#" style="text-decoration:none"&gt;Show&lt;/a&gt;&lt;/div&gt;
      &lt;div style="display:none;" class="divSearchContent" id=divresult_@ProductDescription &gt; @Html.Raw(row["ProductDescription"])&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;hr /&gt;
  &lt;/div&gt;
  
      }}
  </code></pre>
  
  <p>There is no point in showing the code but this is where i must get the functionality implemented</p>