4

我已经实现了一个功能，其中我使用 MVC 4 中的实体框架通过 ajax 调用从数据库中获取记录。有超过 2000 条记录来自数据库并且需要更多时间来显示然后我决定改变方法，现在我想实现 Lazy加载方法如下：

点击这里

我在控制器中创建了一个函数，我在其中传递 pagenumber 参数（并将 pagesize 设置为 10）并在 ajax 调用中返回结果。

但我不明白如何将 ajax 调用与延迟加载结合起来。实际上我在 ajax 调用中传递页码参数。所以我想要如下所示：

1) 向下滚动页码将增加 1

2) 使用递增的页码进行 ajax 调用

3）返回结果将显示在div中，依此类推，直到最后一个结果。

谢谢

4

1 回答 1

6

延迟加载延迟了长网页中图像的加载。在此视口之外的图像在用户滚动到它们之前不会加载。

要实现分页，您需要安装PagedList.MVC NuGet 包

将此添加到您的控制器

using PagedList;

有关实现分页、搜索和排序的完整方法，请参阅此文档。

要在滚动时实现数据的动态加载，请参见此示例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            GetRecords();
        }
    });
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            $("#loader").show();
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        customers.each(function () {
            var customer = $(this);
            var table = $("#dvCustomers table").eq(0).clone(true);
            $(".name", table).html(customer.find("ContactName").text());
            $(".city", table).html(customer.find("City").text());
            $(".postal", table).html(customer.find("PostalCode").text());
            $(".country", table).html(customer.find("Country").text());
            $(".phone", table).html(customer.find("Phone").text());
            $(".fax", table).html(customer.find("Fax").text());
            $("#dvCustomers").append(table).append("<br />");
        });
        $("#loader").hide();
    }
</script>

有关完整的文档和演示，请单击此处

于 2014-04-25T13:46:18.063 回答