How to incorporate jquery lazy loading with ajax call in mvc 4

Question

I have implemented a functionality in which I fetch record by ajax call from database using entity framework in MVC 4.There are more than 2000 records comes from database and taking more time to display then I decided to change approach and now I want to implement Lazy loading approach as per following:

CLICK HERE

I have created a function in controller where i pass pagenumber parameter( and set pagesize to 10) and return result in ajax call.

but I don't understand how to incorporate ajax call with lazy loading. Actually I pass page number parameter in ajax call. So I want as per given below:

1) scroll down pagenumber will be increment by 1

2) make ajax call with incremented page number

3) return result will be displayed in div and so on until last result.

Thanks

Answer 1

Lazy Load delays loading of images in long web pages. In this Images outside of viewport are not loaded until user scrolls to them.

To implement Paging you need to Install the PagedList.MVC NuGet Package

Add this to your controller

using PagedList;

Refer this documentation for complete way to implement paging, searching and sorting.

To achieve dynamic loading of data when you scroll 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>

for complete documentation and demo click here