ASP.Net MVC 5 Load list data via ajax - asp.net

Question

I have a list in asp.net mvc 5
I have limited the number of records to be displayed in page.
now on scroll I do ajax call, the first call works fine but when I scroll down more it recall the function repeatedly 5 to 10 times and lost it again display the data, it was really strange, I could not find solution
My Controller:
public ActionResult Index()
{
int starting = 0;
if (Request.Form["starting"] != null)
{
starting = Convert.ToInt32(Request.Form["starting"]);
}
int takes = 15;
if (Request.Form["takes"] != null)
{
takes = Convert.ToInt32(Request.Form["takes"]);
}
//string strpost = "&ajax=1";
var query = db.MyEmployee.ToList().Skip(starting).Take(takes);
if (Request.IsAjaxRequest())
{
starting = starting+15;
query = db.MyEmployee.ToList().Skip(starting).Take(takes);
ViewData["starting"] = starting;
ViewBag.takes = takes;
return PartialView("_PartialIndex",query);
}
ViewBag.starting = starting;
ViewBag.takes = takes;
return View(query);
}
My Model:
public class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
public string Email { get; set; }
}
My View and partial view code:
<div id="mypage">
#model IEnumerable<MVC5WAuth.Models.Employee>
#{
ViewBag.Title = "Index";
}
<h2>Index 1</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Id)
</th>
<th>
#Html.DisplayNameFor(model => model.FullName)
</th>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Email)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Details", "Details", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</table>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
var ajax_image = "<img src='../Content/loading.GIF' >";
$('#mypage').html(ajax_image);
var params = '&starting=' + #ViewBag.starting + '&takes=' + #ViewBag.takes;
$.ajax({
url:'#Url.Action("Index", "Employees")',
type: "POST",
data: params,
})
.done(function (r) {
$('#mypage').html(r);
});
}
});
</script>

Answer 1

You current code is just replacing the existing view each time you scroll and make a ajax call, not updating the existing view with the next set of rows you want. You code also has some inefficiencies such as materializing all your records to an in-memory set before calling .Skip() and .Take().
You need to break this into 2 separate methods and views, one to generate the initial view, and one to return a partial of just the records you want to append to the main view.
Controller
public ActionResult Index()
{
return View();
}
public ActionResult Fetch(int startIndex)
{
query = db.MyEmployee.OrderBy(x => x.ID).Skip(startIndex).Take(15);
return PartialView(query);
}
Index.cshtml
#model IEnumerable<MVC5WAuth.Models.Employee>
....
<table class="table">
<thead>
<tr>
<th>#Html.DisplayNameFor(model => model.Id)</th>
....
</tr>
</thead>
<tbody id="tbody">
#{ Html.RenderAction("Fetch", new { startIndex = 0 }); } // generate the 1st 15 rows
</tbody>
</table>
<script type="text/javascript">
var start = 15;
var url = '#Url.Action("Fetch")';
var tbody = $('#tbody');
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
....
$.get(url, { startIndex: start }, function(response) {
tbody.append(response);
start += 15; // increment for next call
});
}
});
</script>
Fetch.cshtml
#model IEnumerable<MVC5WAuth.Models.Employee>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(m => item.Id)</td>
....
</tr>
}