Question

I tried to search 2 days about how to do the paging scroll in asp.net mvc project. But I just found the result that not fit to mind.

I am using asp.net mvc 2, and I retrieve all the data from my controller by JSON, and I take the JSON result to display in my view of my mvc project. As the result, there are many products that I display in my views (I put the products in the table). So I want to do a paging scroll to automatically load new content at the bottom of the screen when the user scrolls beyond the element, much like Facebook does with their status updates.

This is some codes show how I display the JSON in my partial views :

<script type="text/javascript" language="javascript">
 $(document).ready(function () {
   var url = '<%: Url.Content("~/") %>' + "ProductListing/AllProductListing";
   var $parent = $("#productlist").empty();

   $parent.append('<br/><table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;"><tbody>');

   var loading = $.getJSON(url,function (product) {
   if(product.ja.length == 0){
     $('#loading').hide();
     $("#productlist").html("<br/><br/><br/><br/><b>There is no product in this category.</b>");
   }
   while (k < loopK) {
     var count_item = 0;
     $.each(product.ja, function (index, value) {
      //blah blah blah ....

     });
    }
  });
});
</script>

This block of code is working well.

Any idea or sample please.

Thanks.

Answer 1

Rob Conery wrote a detailed blog post on this topic.