Asp.net MVC : Implement infinite scroll using Jquery - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Asp.net MVC : Implement infinite scroll using Jquery

Here in this article I am going to explain how to implement infinite scroll using Jquery in asp.net MVC application.

Description:
I am showing list of country in application. Instead of pagination want to show all records on scroll. To fulfill this requirement I am using Jquery.

Implementation:

Model class:
   public partial class CountryMaster
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string CountryCode { get; set; }
    }

Add Controller
Add an empty controller to project.

Complete source code of Controller:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using infinitescroll.Models;

namespace infinitescroll.Controllers
{
    public class CountryController : Controller
    {
        private testEntities db = new testEntities();
         public const int RecordsPerPage = 20;
        //
        // GET: /test/
         public CountryController()
        {
            ViewBag.RecordsPerPage = RecordsPerPage;
        }
        //
        // GET: /Country/
         public ActionResult Index(int? pageNum)
        {
            pageNum = pageNum ?? 0;
            ViewBag.IsEndOfRecords = false;
            if (Request.IsAjaxRequest())
            {
                var customers = GetRecordsForPage(pageNum.Value);
                ViewBag.IsEndOfRecords = (customers.Any()) && ((pageNum.Value * RecordsPerPage) >= customers.Last().Key);
                return PartialView("_CustomerRow", customers);
            }
            else
            {
                LoadAllCustomersToSession();
                ViewBag.Customers = GetRecordsForPage(pageNum.Value);
                return View("Index");
            }
            return View();
        }
        public void LoadAllCustomersToSession()
        {
            var customers = db.CountryMasters;
            int custIndex = 1;
            Session["country"] = customers.ToDictionary(x => custIndex++, x => x);
            ViewBag.TotalNumberCustomers = customers.Count();
        }
        public Dictionary<int, CountryMaster> GetRecordsForPage(int pageNum)
        {
            Dictionary<int, CountryMaster> country = (Session["country"] as Dictionary<int, CountryMaster>);
            int from = (pageNum * RecordsPerPage);
            int to = from + RecordsPerPage;
            return country
                .Where(x => x.Key > from && x.Key <= to)
                .OrderBy(x => x.Key)
                .ToDictionary(x => x.Key, x => x.Value);
        }
        //       
        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}




Add View :
Add view for index action.
Complete source of view :

@model IEnumerable<infinitescroll.Models.CountryMaster>
@{
    ViewBag.Title = "Country List";
}

<table class="infinite-scroll">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CountryCode)
        </th>
        <th></th>
    </tr>
    <tbody style="height:500px">
        @Html.Partial("_CustomerRow", (ViewBag.Customers as Dictionary<int, infinitescroll.Models.CountryMaster>))
    </tbody>

</table>
<div id="loading">
    <img src='@Url.Content("~/images/spin.gif")' /><p><b>Loading the next @ViewBag.RecordsPerPage&hellip;</b></p>
</div>
@section scripts{
    <script src="~/Scripts/infiniteScroll.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div#loading").hide();
        });
        var moreRowsUrl = "/country/index";
        $(window).scroll(scrollHandler);
    </script>
}


Create partial view :
Complete source of partial view :

@model Dictionary<int, infinitescroll.Models.CountryMaster>
@foreach (var cust in Model)
{
    <tr>
        <td>@cust.Value.Name</td>
        <td>@cust.Value.CountryCode</td>
    </tr>
}



Jquery Code :

var page = 0,
    inCallback = false,
    hasReachedEndOfInfiniteScroll = false;

var scrollHandler = function () {
    if (hasReachedEndOfInfiniteScroll == false &&
            ($(window).scrollTop() == $(document).height() - $(window).height())) {
        loadMoreToInfiniteScrollTable(moreRowsUrl);
    }
}

function loadMoreToInfiniteScrollTable(loadMoreRowsUrl) {
    if (page > -1 && !inCallback) {
        inCallback = true;
        page++;
        $("div#loading").show();
        $.ajax({
            type: 'GET',
            url: loadMoreRowsUrl,
            data: "pageNum=" + page,
            success: function (data, textstatus) {
                if (data != '') {
                    $("table.infinite-scroll > tbody").append(data);
                    $("table.infinite-scroll > tbody > tr:even").addClass("alt-row-class");
                    $("table.infinite-scroll > tbody > tr:odd").removeClass("alt-row-class");
                }
                else {
                    page = -1;
                }

                inCallback = false;
                $("div#loading").hide();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
}

function showNoMoreRecords() {
    hasReachedEndOfInfiniteScroll = true;
}




What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

2 Comments

I have uploaded the project. Kindly check if you are missing/skip something


EmoticonEmoticon