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>
<div class="clearfix">
</div>
@if (ViewBag.Refreshed == "YES")
    {
        <input id="lastDoctorID" type="hidden" value="0" />
    }
    else
    {
        <input id="lastDoctorID" type="hidden" />
    }
    <input id="GetFlag" type="hidden" value="true" />
</div>

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

$(document).ready(function () {


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

            $('input#lastDoctorID').val("0");

        }

        GetDoctors();

});

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;
        $('div#divLoading').show();
        $.ajax({
            type: 'POST',
            url: url,

            success: function (response) {
                // your code from above
                $('div#docsContainer').append(response);
                $('div#divLoading').hide();
                if (response == "ok") {


                }

                else {


                }
            },
            error: function (xhr, textStatus, error) {
                //$('span#loader_' + ID).hide();
                console.log(xhr.statusText);
                console.log(textStatus);
                console.log(error);
                $.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();

                    doctorsList.Add(doctor);

                }


                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);
            con.Open();
            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();

            da.Fill(ds);

            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()) {
                GetDoctors();
            }
        });
    });

Hope you understood it.

Cheers!

Thanks