AngularJS, ASP.NET, MVC

ASP.Net MVC Infinite Scrolling With Angularjs

Today we are going to implement infinite/unlimited scrolling using AngularJS in MVC application.

Infinite/unlimited scroll worked while we scroll down the web page it’ll automatically load next paged data. Facebook has this type of News feed loading.

Let’s Get Started:

Let’s create a view with directive ‘when-scrolled’. AngularJS ‘when-scrolled’ directive is to implement infinite scrolling, which is suppose to detect the div scroll.

when-scrolled="loadData(1)"

Here ‘loadData(1)’ callback function will get called while div/page is scrolled. In this method we have passed parameter value ‘1’ to detect, is it default data load or scroll load call.

$scope.loadData = function (IsPaging) {}

This is where we passed the parameter in our ngController method.

Finally the View:


    

        
            

                Office ID
                Office Code
                Office Name
                Is Active
                Create Date
                Create By
                Edit Date
                Edit By
                Status
            

        

        
            

                {{dataModel.OfficeID}}
                {{dataModel.OfficeCode}}
                {{dataModel.OfficeName}}
                {{dataModel.IsActive}}
                {{dataModel.CreateDate|date:"MM/dd/yyyy 'at' h:mma"}}
                {{dataModel.CreateBy}}
                {{dataModel.EditDate|date:"MM/dd/yyyy 'at' h:mma"}}
                {{dataModel.EditBy}}
                
                    
                        
                            
                        
                    
                    
                        
                            
                        
                    
                
            

        
    

    

        

            {{LoadMessage}}
        

        

            {{LoadMessage}}

We have declare directive ‘when-scrolled’ in our view, now we have to add directive in our module. In this app which is:

angular.module('uCRM_App', [])

The directive: This will detect the scroll position of page/div.

.directive('whenScrolled', function () {
    return function (scope, elm, attr) {
        var raw = elm[0];
        elm.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
})

In out controller method we have pushed data into the array in scope to update the view.

for (model in data) {
    $scope.ListOffice.push(data[model]);
}

As we know AngularJS will update the view when scope is changed/update.

Finally the Script:

angular.module('uCRM_App', [])

.directive('whenScrolled', function () {
    return function (scope, elm, attr) {
        var raw = elm[0];
        elm.bind('scroll', function () {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
})

.controller('OfficeController', function ($scope, $http) {

    $scope.loaderMore = false;
    $scope.scrollended = false;

    var IsPaging = 0;
    var UserID = 1;
    var page = 1;
    var PageSize = 20;
    var inCallback = false;
    var totalData = 0;

    //******=========Get All Data with Paging=========******
    $scope.loadData = function (IsPaging) {
        var geturl = '/Crm/api/Office/Get/';
        if (IsPaging === 1) {
            //debugger;
            IsPaging = 1;
            if (page > -1 && !inCallback) {
                inCallback = true;
                page++;

                $scope.loaderMore = true;
                $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';
                $scope.result = "color-green";

                $http({
                    method: 'GET',
                    url: geturl + UserID + '/' + page + '/' + PageSize + '/' + IsPaging,
                })
                .success(function (data) {
                    totalData = data.length;
                    if (totalData === 0) {
                        $scope.loaderMore = false;
                        $scope.scrollended = true;
                        $scope.LoadMessage = 'No more data...!';
                        $scope.result = "color-red";

                        Command: toastr["warning"]("No more data...!");

                        inCallback = false;
                        page = -1;
                    }
                    else {
                        for (model in data) {
                            $scope.ListOffice.push(data[model]);
                        }
                        $scope.loaderMore = false;
                        inCallback = false;
                    }

                }).error(function (error) {
                    alert('Error Loading..');
                })
            }
        }//unlimited load data while scroll
        else {
            //debugger;
            IsPaging = 0; $scope.loaderMore = true;
            $scope.LoadMessage = ' Loading page ' + page + ' of ' + PageSize + ' data...';
            $scope.result = "color-green";

            $http({
                method: 'GET',
                url: geturl + UserID + '/' + page + '/' + PageSize + '/' + IsPaging,
            }).
            success(function (data) {
                $scope.ListOffice = data;
                $scope.loaderMore = false;
            }).
            error(function () {
                $scope.message = 'Unexpected Error while loading data!!';
                console.log($scope.message);
            });
        }//default load data while pageload

    };
    $scope.loadData();
});

Output:

sc

Happy Coding 🙂

Author: Shashangka Shekhar

Since March 2011, have 8+ years of professional experience on software development, currently working as Senior Software Engineer at s3 Innovate Pte Ltd.

Previous post ASP.NET MVC5 Routing with…
Next post Visual Studio Keyboard Shortcuts

7 thoughts on “ASP.Net MVC Infinite Scrolling With Angularjs”

Leave a Reply