Infinite Scroll Paging in Asp.net mvc 4

Friday, December 20, 2013 0 Comments A+ a-

Today i am sharing another feature which Facebook and LinkedIn like paging, i came across a scenario to show doctors list in our database, instead of paging i thought to go for infinite scroll paging like Facebook LinkedIn, on page load i show top 10 or 20 doctors and as user scrolls down i load more doctors via Ajax.

Here i go with the HTML of my view:

<div class="grid-content overflow" id="docsContainer">
<!--grid area -->
    <!--grid area end -->

    <br />
<div style="clear: both;">
<div class="clearfix">
@if (ViewBag.Refreshed == "YES")
        <input id="lastDoctorID" type="hidden" value="0" />
        <input id="lastDoctorID" type="hidden" />
    <input id="GetFlag" type="hidden" value="true" />

On page load i am getting to 20 records from database, here it is:

$(document).ready(function () {

        if ('@ViewBag.Refreshed' == "YES") {





here is definition of GetDoctors Method which sends Ajax call to a WCF service which returns result as JSON back:

function GetDoctors() {

        if ($('input#lastDoctorID').val() != null) {

            lastID = $('input#lastDoctorID').val();

        else {

            lastID = 0;

        var url = '@Url.Action("GetDoctors", "SearchPathologist")';

        url = url + "?lastDoctorID=" + lastID;
            type: 'POST',
            url: url,

            success: function (response) {
                // your code from above
                if (response == "ok") {


                else {

            error: function (xhr, textStatus, error) {
                //$('span#loader_' + ID).hide();
                $.fallr('show', {
                    content: 'Request Sending Failed! Try Again after few minutes.


In my action i am calling a web-service which return Data-Set and i extract data and create list and pass it to partial view which in rendered on the page.

Here is the action code:

public ActionResult GetDoctors(string lastDoctorID)
            using (OliveCliqService.OliveServiceClient client = new OliveCliqService.OliveServiceClient())

                DataSet result = client.GetDoctorsList(Session["userID"].ToString(),lastDoctorID);

                List doctorsList = new List();

                for (int i = 0; i < result.Tables[0].Rows.Count; i++)

                    CliqDoctor doctor = new CliqDoctor();

                    doctor.DoctorID = int.Parse(result.Tables[0].Rows[i]["DoctorID"].ToString());
                    doctor.Name = result.Tables[0].Rows[i]["FirstName"].ToString() + " " + result.Tables[0].Rows[i]["LastName"].ToString();

                    doctor.Designation = result.Tables[0].Rows[i]["Designation"].ToString();
                    doctor.Speciality = result.Tables[0].Rows[i]["Spaciality_name"].ToString();
                    doctor.Location = result.Tables[0].Rows[i]["Address"].ToString();
                    doctor.ImageName = result.Tables[0].Rows[i]["Image"].ToString();
                    doctor.Friend = result.Tables[0].Rows[i]["Friend"].ToString();



                return PartialView("~/Views/Shared/_DoctorPartial.cshtml", doctorsList);

Here is my web service method definition:

public DataSet GetDoctorsList(string PersonId,string lastDoctorID)

            string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["OliveCliq"].ConnectionString;

            MySqlConnection con = new MySqlConnection(connectionString);
            string cmd = @"SELECT d.DoctorID,d.FirstName,d.LastName,d.Image,de.Designation,d.Address,s.Spaciality_name,
CASE WHEN EXISTS (SELECT id FROM cloud_clinic.doctor_members dm WHERE dm.doctor_id = '" + PersonId + "' AND dm.member_id = d.doctorID) THEN 'YES' ELSE 'NO' END AS Friend FROM cloud_clinic.doctors d LEFT OUTER JOIN cloud_clinic.clinic_doctor_designations cdd on d.doctorid = cdd.doctor_id LEFT OUTER JOIN cloud_clinic.rm_pr_designations de on cdd.designation_id = de.designationid LEFT OUTER JOIN cloud_clinic.doctor_spcialities ds on d.doctorID = ds.doctorid LEFT OUTER JOIN cloud_clinic.spaciality s on ds.spacialityID = s.id where d.DoctorID > '"+lastDoctorID+"' Group by d.DoctorID Order by d.DoctorID LIMIT 30";

            MySqlDataAdapter da = new MySqlDataAdapter(cmd, con);

            DataSet ds = new DataSet();


            return ds;

When user scroll down, new records are fetched Ajax call and appended on the page, here is that JQuery snippet:

 $(document).ready(function () {
        $(window).scroll(function () {
            console.log("document height:" + $(document).height());
            console.log("window height:" + $(window).height());
            console.log("window scroll:" + $(window).scrollTop());
            if ($(window).scrollTop() + $(window).height() == $(document).height()) {

Hope you understood it.


Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more