ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Server Side HTML Table Paging using AngularJS and WebMethod in ASP.Net<p>Hi&nbsp;rani,</p> <p>Refering the below article i have created an example.</p> <h1 class="header"><a href="https://www.aspsnippets.com/Articles/ASPNet-MVC-Custom-Paging-in-WebGrid-using-Stored-Procedure-and-Entity-Framework.aspx">ASP.Net MVC: Custom Paging in WebGrid using Stored Procedure and Entity Framework</a></h1> <p>Check this example. Now please take its reference and correct your code.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <p>I am making use of Microsoft's Northwind Database. You can download it from here.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download and install Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">SQL</span></strong></p> <pre class="brush: 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</pre> <p><span style="text-decoration: underline;"><strong>HTML</strong></span></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34;&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;angularUtils.directives.dirPagination&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $http) { $scope.Customers = []; $scope.PageIndex = 1; $scope.RecordCount = 0; $scope.PageSize = 10; $scope.GetCustomers = function (index) { $scope.Customers = []; $http.post(&#34;Default.aspx/GetCustomers&#34;, { PageNo: index, PageSize: $scope.PageSize }, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .success(function (response) { $scope.Customers = response.d.Customers; $scope.RecordCount = response.d.TotalRecords; }); } $scope.GetCustomers($scope.PageIndex); }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div class=&#34;panel panel-primary&#34;&gt; &lt;div class=&#34;panel-body&#34;&gt; &lt;table class=&#34;table table-bordered table-hover table-striped&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;City&lt;/th&gt; &lt;th&gt;Country&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr dir-paginate=&#34;customer in Customers|itemsPerPage:PageSize&#34; total-items=&#34;RecordCount&#34;&gt; &lt;td&gt;{{customer.CustomerID}}&lt;/td&gt; &lt;td&gt;{{customer.ContactName}}&lt;/td&gt; &lt;td&gt;{{customer.City}}&lt;/td&gt; &lt;td&gt;{{customer.Country}}&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;dir-pagination-controls max-size=&#34;PageSize&#34; direction-links=&#34;true&#34; boundary-links=&#34;true&#34; on-page-change=&#34;GetCustomers(newPageNumber)&#34;&gt; &lt;/dir-pagination-controls&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Data.Objects; using System.Linq; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Data.Objects Imports System.Linq Imports System.Web.Services</pre> <p><strong>Code</strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static CustomerData GetCustomers(int PageNo, int PageSize) { NorthwindEntities entities = new NorthwindEntities(); CustomerData customer = new CustomerData(); ObjectParameter recordCount = new ObjectParameter(&#34;RecordCount&#34;, typeof(int)); customer.Customers = entities.GetCustomerPager(PageNo, PageSize, recordCount).ToList(); customer.TotalRecords = Convert.ToInt32(entities.Customers.Count()); return customer; } public class CustomerData { public List&lt;Customer&gt; Customers { get; set; } public int TotalRecords { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; 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(&#34;RecordCount&#34;, 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</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/ruYUphw.gif" alt="" width="405" height="448" /></span></strong></p>https://www.aspforums.net:443/Threads/173977/Server-Side-HTML-Table-Paging-using-AngularJS-and-WebMethod-in-ASPNet/https://www.aspforums.net:443/Threads/173977/Server-Side-HTML-Table-Paging-using-AngularJS-and-WebMethod-in-ASPNet/Fri, 29 Mar 2019 05:21:04 GMT