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

I have list of 500 of data on page without paging, i want to use scrolling or button click to show load data on the same page without a postback.

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

when page loads for the first time it will take 500 data but show only 100 data and when user click on button it will show next 100 and so on.

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

My project on mvc 4

我在mvc 4上的项目

1 个解决方案

#1

The example below displays 3 items at a time.If you would like to change it to another value e.g. 100 just set the pageSize variable in the view to the desired value.I hope the example below helps you and please remember to mark as answered:

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

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

View:

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