Zeigen Sie mehr Daten beim Klicken mit mvc und jquery?

Question

Ich habe eine Liste von 500 Daten auf der Seite ohne Paging, ich möchte scrollen oder klicken Sie auf die Schaltfläche, um Ladedaten auf der gleichen Seite ohne Postback anzuzeigen.

Wenn die Seite zum ersten Mal geladen wird, werden 500 Daten benötigt, aber nur 100 Daten angezeigt. Wenn der Benutzer auf die Schaltfläche klickt, werden die nächsten 100 usw. angezeigt.

Mein Projekt auf mvc 4

Answer 1

Das folgende Beispiel zeigt drei Elemente zu einem time.If möchten Sie es auf einen anderen Wert ändern z.B. 100 setzen nur die pageSize Variable im Hinblick auf die gewünschte value.I hoffen das folgende Beispiel hilft Ihnen und bitte denken Sie daran, wie beantwortet zu markieren:

Controller:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public JsonResult GetAlotOfUsers() 
    { 
     var employees = new List<object>(); 

     employees.Add(new { Name = "Name 1", Surname = "Surname 1" }); 
     employees.Add(new { Name = "Name 2", Surname = "Surname 2" }); 
     employees.Add(new { Name = "Name 3", Surname = "Surname 3" }); 
     employees.Add(new { Name = "Name 4", Surname = "Surname 4" }); 
     employees.Add(new { Name = "Name 5", Surname = "Surname 5" }); 
     employees.Add(new { Name = "Name 6", Surname = "Surname 6" }); 
     employees.Add(new { Name = "Name 7", Surname = "Surname 7" }); 
     employees.Add(new { Name = "Name 8", Surname = "Surname 8" }); 
     employees.Add(new { Name = "Name 9", Surname = "Surname 9" }); 
     employees.Add(new { Name = "Name 10", Surname = "Surname 10" }); 

     return Json(employees, JsonRequestBehavior.AllowGet); 
    } 
} 

Ausblick:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 

     var employees = null; 
     var page = 1; 
     var pageSize = 3; 

     $("#getEmployees").click(function() { 
      $("#results").empty(); 

      $.getJSON("/Home/GetAlotOfUsers", function (data) { 
       employees = data; 

       for (var i = 0; i < employees.length; i++) { 
        if (i < pageSize) { 
         $("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>"); 
        } 
        else 
         break; 
       } 
      }); 
     }); 

     $("#previous").click(function() { 
      if (employees != null && page > 1) { 
       $("#results").empty(); 

       for (var i = ((page - 2) * pageSize) ; i < employees.length; i++) { 
        if (i < ((page - 1) * pageSize)) { 
         $("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>"); 
        } 
       } 
       page--; 
      } 
     }); 

     $("#next").click(function() { 
      if (employees != null && (page * pageSize) < employees.length) { 
       $("#results").empty(); 

       for (var i = 0; i < employees.length; i++) { 
        if (i >= (page * pageSize) && i < ((page + 1) * pageSize)) { 
         $("#results").append("<div>" + employees[i].Name + " " + employees[i].Surname + "</div>"); 
        } 
       } 
       page++; 
      } 
     }); 
    }) 
</script> 

<input type="button" value="GetEmployees" id="getEmployees" /> 

<div id="results"> 

</div> 
<input type="button" id="previous" value="Previous" /> 
<input type="button" id="next" value="Next" />