使用mvc和jquery显示有关click的更多数据？

Question

我在页面上没有分页的500个数据列表，我想使用滚动或按钮单击在同一页面上显示加载数据而不回发。

第一次加载页面时，它将需要500个数据，但只显示100个数据，当用户点击按钮时，它将显示下一个100，依此类推。

我在mvc 4上的项目

Answer 1

以下示例一次显示3个项目。如果您想将其更改为其他值，例如100只需将视图中的pageSize变量设置为所需的值。我希望下面的示例可以帮助您，请记住标记为已回答：

<强>控制器：

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

查看：

<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" />