How to enable jquery lazy loading using ajax call in mvc 4

Question

I implemented a function in which I get an ajax call record from a database using an entity structure in MVC 4. There are more than 2000 records from the database and it takes more time to display, after which I decided to change the approach, and now I want to implement the Lazy boot approach:

PRESS HERE

I created a function in the controller where I pass the pagenumber parameter (and set the page size to 10) and return the result in an ajax call.

but i don't understand how to enable ajax call with lazy loading. In fact, I am passing the page number parameter in an ajax call. So I want as below:

1) scroll down pagenumber will increase by 1

2) make an ajax call with added page number

3) the result of the return will be displayed in a div, etc. until the last result.

thank

Answer 1

Lazy Load delays the loading of images on long web pages. In this image, outside the viewport are not loaded until the user scrolls through them.

To implement paging, you need to install the PagedList.MVC NuGet package

Add this to your controller

using PagedList;

See the this documentation for a complete way to implement paging, search, and sorting.

To achieve dynamic data loading while scrolling, see this example.

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