title: ASP.Net MVC 5 Load list data via ajax
body: <p>I have a list in asp.net mvc 5</p>
  
  <p>I have limited the number of records to be displayed in page.</p>
  
  <p>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</p>
  
  <p>My Controller:</p>
  
  <pre><code>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 = "&amp;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);
  
  }
  </code></pre>
  
  <p>My Model:</p>
  
  <pre><code>     public class Employee
  {
      public int Id { get; set; }
      public string FullName { get; set; }
      public string Email { get; set; }
  }
  </code></pre>
  
  <p>My View and partial view code:</p>
  
  <pre><code> &lt;div id="mypage"&gt;
  @model IEnumerable&lt;MVC5WAuth.Models.Employee&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  
  &lt;h2&gt;Index 1&lt;/h2&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Id)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.FullName)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DisplayNameFor(model =&gt; model.Email)
          &lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      @foreach (var item in Model)
      {
          &lt;tr&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Id)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.FullName)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.DisplayFor(modelItem =&gt; item.Email)
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                  @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                  @Html.ActionLink("Delete", "Delete", new { id = item.Id })
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  
  &lt;/table&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  
      $(window).scroll(function () {
          if ($(window).scrollTop() == $(document).height() - $(window).height()) {
              // ajax call get data from server and append to the div
  
  
  
              var ajax_image = "&lt;img src='../Content/loading.GIF' &gt;";
              $('#mypage').html(ajax_image);
              var params = '&amp;starting=' + @ViewBag.starting + '&amp;takes=' + @ViewBag.takes;
              $.ajax({
                  url:'@Url.Action("Index", "Employees")',
                  type: "POST",
                  data: params,
  
              })
              .done(function (r) {
  
                  $('#mypage').html(r);
              });
  
          }
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p></p>