Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
width: 120px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$scope.PageIndex = 1;
$scope.TotalPage = 0;
$scope.Customers = [];
function GetCustomers(index) {
$scope.IsLoading = true;
$http.post('Default.aspx/GetCustomers', { pageIndex: index })
.then(function (response) {
angular.forEach(response.data.d.Customers, function (value) {
$scope.Customers.push(value);
});
$scope.TotalPage = response.data.d.TotalRecord;
$scope.IsLoading = false;
}, function () {
$scope.IsLoading = false;
})
}
GetCustomers($scope.PageIndex);
$scope.LoadCustomers = function () {
if ($scope.PageIndex < $scope.TotalPage) {
$scope.PageIndex += 1;
GetCustomers($scope.PageIndex);
}
}
} ]);
app.directive('infinityscroll', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('scroll', function () {
if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
scope.$apply(attrs.infinityscroll)
}
});
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div ng-app="MyApp" ng-controller="MyController">
<div style="position: relative">
<table style="width: 500px">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
</table>
<div infinityscroll="LoadCustomers()" style="height: 200px; overflow: auto; width: 500px">
<table>
<tr ng-repeat="customer in Customers">
<td>{{customer.CustomerID}}</td>
<td>{{customer.ContactName}}</td>
<td>{{customer.City}}</td>
<td>{{customer.Country}}</td>
</tr>
</table>
</div>
</div>
<img ng-show="IsLoading" src="Images/Loader.gif" />
</div>
</div>
</form>
</body>
</html>
Code
C#
[System.Web.Services.WebMethod]
public static CustomerData GetCustomers(int pageIndex)
{
List<Customer> customerList = new List<Customer>();
using (NorthwindEntities dc = new NorthwindEntities())
{
int totalPage = 0;
int totalRecord = 0;
int pageSize = 10;
var customers = dc.Customers.OrderBy(x => x.CustomerID);
totalRecord = customers.Count();
totalPage = (totalRecord / pageSize) + ((totalRecord % pageSize) > 0 ? 1 : 0);
customerList = customers.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
CustomerData customerData = new CustomerData();
customerData.Customers = customerList;
customerData.TotalRecord = totalPage;
return customerData;
}
}
public class CustomerData
{
public List<Customer> Customers { get; set; }
public int TotalRecord { get; set; }
}
VB.Net
<System.Web.Services.WebMethod()>
Public Shared Function GetCustomers(ByVal pageIndex As Integer) As CustomerData
Dim customerList As List(Of Customer) = New List(Of Customer)()
Using dc As NorthwindEntities = New NorthwindEntities()
Dim totalPage As Integer = 0
Dim totalRecord As Integer = 0
Dim pageSize As Integer = 10
Dim customers = dc.Customers.OrderBy(Function(x) x.CustomerID)
totalRecord = customers.Count()
totalPage = (totalRecord / pageSize) + (If((totalRecord Mod pageSize) > 0, 1, 0))
customerList = customers.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList()
Dim customerData As CustomerData = New CustomerData()
customerData.Customers = customerList
customerData.TotalRecord = totalPage
Return customerData
End Using
End Function
Public Class CustomerData
Public Property Customers As List(Of Customer)
Public Property TotalRecord As Integer
End Class
Screenshot
