Server Side HTML Table Paging using AngularJS and WebMethod in ASP.Net

Last Reply 8 months ago By dharmendr

Posted 8 months ago

How to use angular dirpagination directive for serverside paging in asp.net

The paging is done after all the record binded at client side.

How to call server side code on pager click to load only the record with the clicked index.

 

Posted 8 months ago

Hi rani,

Refering the below article i have created an example.

ASP.Net MVC: Custom Paging in WebGrid using Stored Procedure and Entity Framework

Check this example. Now please take its reference and correct your code.

Database

I am making use of Microsoft's Northwind Database. You can download it from here.

Download and install Northwind Database

SQL

CREATE PROCEDURE [dbo].[Customers_GetCustomersPageWise]  
	@PageIndex INT = 1,
	@PageSize INT = 20,
	@RecordCount INT OUTPUT
AS
BEGIN	
	SET NOCOUNT ON;

	SELECT  (ROW_NUMBER() OVER(Order By CustomerId)) AS RowNumber,
			[CustomerID]
			,[CompanyName]
			,[ContactName]
			,[ContactTitle]
			,[Address]
			,[City]
			,[Region]
			,[PostalCode]
			,[Country]
			,[Phone]
			,[Fax]
	INTO #Results	
	FROM [Customers]	

	SELECT @RecordCount = Count(*) FROM #Results

	SELECT * FROM #Results WHERE 
	ROWNUMBER BETWEEN  (@PageIndex-1)*@PageSize + 1 AND (((@PageIndex-1)*@PageSize + 1)+@PageSize)-1 OR @PageIndex = -1	

	DROP TABLE #Results
END

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
        app.controller('MyController', function ($scope, $http) {
            $scope.Customers = [];
            $scope.PageIndex = 1;
            $scope.RecordCount = 0;
            $scope.PageSize = 10;
            $scope.GetCustomers = function (index) {
                $scope.Customers = [];
                $http.post("Default.aspx/GetCustomers", { PageNo: index, PageSize: $scope.PageSize }, { headers: { 'Content-Type': 'application/json'} })
                .success(function (response) {
                    $scope.Customers = response.d.Customers;
                    $scope.RecordCount = response.d.TotalRecords;
                });
            }
            $scope.GetCustomers($scope.PageIndex);
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="panel panel-primary">
        <div class="panel-body">
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr class="success">
                        <th>Id</th>
                        <th>Name</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="customer in Customers|itemsPerPage:PageSize" total-items="RecordCount">
                        <td>{{customer.CustomerID}}</td>
                        <td>{{customer.ContactName}}</td>
                        <td>{{customer.City}}</td>
                        <td>{{customer.Country}}</td>
                    </tr>
                </tbody>
            </table>
            <dir-pagination-controls max-size="PageSize" direction-links="true" boundary-links="true"
                on-page-change="GetCustomers(newPageNumber)">
            </dir-pagination-controls>
        </div>
    </div>
</body>
</html>

Namespaces

C#

using System.Collections.Generic;
using System.Data.Objects;
using System.Linq;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Data.Objects
Imports System.Linq
Imports System.Web.Services

Code

C#

[WebMethod]
public static CustomerData GetCustomers(int PageNo, int PageSize)
{
    NorthwindEntities entities = new NorthwindEntities();
    CustomerData customer = new CustomerData();
    ObjectParameter recordCount = new ObjectParameter("RecordCount", typeof(int));
    customer.Customers = entities.GetCustomerPager(PageNo, PageSize, recordCount).ToList();
    customer.TotalRecords = Convert.ToInt32(entities.Customers.Count());
    return customer;
}

public class CustomerData
{
    public List<Customer> Customers { get; set; }
    public int TotalRecords { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetCustomers(ByVal PageNo As Integer, ByVal PageSize As Integer) As CustomerData
    Dim entities As NorthwindEntities = New NorthwindEntities()
    Dim customer As CustomerData = New CustomerData()
    Dim recordCount As ObjectParameter = New ObjectParameter("RecordCount", GetType(Integer))
    customer.Customers = entities.GetCustomerPager(PageNo, PageSize, recordCount).ToList()
    customer.TotalRecords = Convert.ToInt32(entities.Customers.Count())
    Return customer
End Function

Public Class CustomerData
    Public Property Customers As List(Of Customer)
    Public Property TotalRecords As Integer
End Class

Screenshot