Infinite Scroll Paging in Asp.net mvc 4
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:
On page load i am getting to 20 records from database, here it is:
here is definition of GetDoctors Method which sends Ajax call to a WCF service which returns result as JSON back:
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:
Here is my web service method definition:
When user scroll down, new records are fetched Ajax call and appended on the page, here is that JQuery snippet:
Hope you understood it.
Cheers!
Thanks
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
