ASP.Net MVC 5 Legen Sie Listendaten über Ajax

Question

Ich habe eine Liste in asp.net Mvc 5

ich nur über begrenzte die Anzahl der Datensätze in Seite angezeigt werden.

jetzt auf Scroll Ich mache Ajax Anruf, der erste Anruf funktioniert gut, aber wenn ich mehr scrollen, rufen Sie die Funktion wiederholt 5 bis 10 Mal und verlor es wieder anzeigen die Daten, es war wirklich seltsam, ich konnte keine Lösung finden

Mein 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; } 
} 

Meine Ansicht und Teilansicht 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

Sie aktuelle Code ersetzt nur die bestehende Ansicht jedes Mal, wenn Sie blättern und einen Ajax-Aufruf machen, nicht mit dem nächsten Satz von Zeilen, die Sie wollen die vorhandene Ansicht zu aktualisieren. Ihr Code weist außerdem einige Ineffizienzen auf, z. B. das Einbringen aller Ihrer Datensätze in ein In-Memory-Set, bevor Sie .Skip() und .Take() aufrufen.

Sie müssen dies in 2 separate Methoden und Ansichten brechen, eine die Startansicht zu erzeugen, und eine eine Teil nur die Datensätze kehren Sie in der Hauptansicht angehängt werden soll.

-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> 
}