Post
Ask Question

ASP.NET Web API Using MVC And jQuery For Paging - Part Nine

Introduction
 
Web API is the best fit to create a resource-oriented service using HTTP/Restful and it works well with MVC-based applications. For more details, visit this link.Description
 
In this session, I will show you the steps to display data with Paging. This steps can be implemented using AP.NET Web API.
 
Before going through this session, visit my previous sessions,
Steps to be followed.
 
Step 1
 
Right click on project name (here "Entities") > Add > New folder.
 
Step 2
 
Right Click on that folder > add > new class > Enter Name > Add.
 
Code Ref
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6.   
  7. namespace Entities.ViewModels  
  8. {  
  9.     public class EmployeeDataWithPaging  
  10.     {  
  11.         public List<Employee> Employees { get; set; }  
  12.         public int TotalPage { get; set; }  
  13.     }  
  14. } 
Code Description
 
In this class, I have metioned two properties.
  • Employees for fetching data from database in the table.
  • The display of data with paging.
Step 3
 
Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > select Templete "empty MVC Controller"> Add.
 
Add a new Action (Get) for fetching data from the database.
 
Code Ref
  1. using Entities;  
  2. using Entities.ViewModels;  
  3. using System;  
  4. using System.Collections.Generic;  
  5. using System.Linq;  
  6. using System.Net;  
  7. using System.Net.Http;  
  8. using System.Web.Http;  
  9.   
  10. namespace SatyaWebApi.Controllers  
  11. {  
  12.     public class ExamplePagingController : ApiController  
  13.     {  
  14.         public HttpResponseMessage Get(int pageNo = 1)  
  15.         {  
  16.             HttpResponseMessage response = null;  
  17.             int totalPage, totalRecord, pageSize;  
  18.             pageSize = 5;  
  19.             using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
  20.             {  
  21.                 totalRecord = dc.Employees.Count();  
  22.                 totalPage = (totalRecord / pageSize) + ((totalRecord % pageSize) > 0 ? 1 : 0);  
  23.                 var record = (from a in dc.Employees  
  24.                               orderby a.FirstName, a.LastName  
  25.                               select a).Skip((pageNo - 1) * pageSize).Take(pageSize).ToList();  
  26.                 EmployeeDataWithPaging empData = new EmployeeDataWithPaging  
  27.                 {  
  28.                     Employees = record,  
  29.                     TotalPage = totalPage  
  30.                 };  
  31.                 response = Request.CreateResponse(HttpStatusCode.OK, empData);  
  32.             }  
  33.             return response;  
  34.         }  
  35.     }  
  36. } 
Code Description
 
Here, I have added a new action method to fetch data from the database as well as implement paging.
 
Here, I declared some variable and mentioned no. of records per page that is 5.
  1. HttpResponseMessage response = null;  
  2.             int totalPage, totalRecord, pageSize;  
  3.             pageSize = 5; 
Then, fetch records from database using Entity Data Model and calculate total no. of pages based on records per page as mentioned before.
  1. using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())  
  2.             {  
  3.                 totalRecord = dc.Employees.Count();  
  4.                 totalPage = (totalRecord / pageSize) + ((totalRecord % pageSize) > 0 ? 1 : 0);  
  5.                 var record = (from a in dc.Employees  
  6.                               orderby a.FirstName, a.LastName  
  7.                               select a).Skip((pageNo - 1) * pageSize).Take(pageSize).ToList(); 
Then, mention the variable data into properties of class  EmployeeDataWithPaging for No. of employee records with paging.
  1. EmployeeDataWithPaging empData = new EmployeeDataWithPaging  
  2.                 {  
  3.                     Employees = record,  
  4.                     TotalPage = totalPage  
  5.                 }; 
Step 4
 
Add a new Action into the home controller for getting View for show data.
 
Code Ref
  1. @{  
  2.     ViewBag.Title = "Satyaprakash-Fetch data from WEB Api and Display data with paging using jquery";  
  3. }  
  4.   
  5. <h2>Satyaprakash Fetch data from WEB Api and Display data with paging using jquery</h2>  
  6. <div id="updatePanel">  
  7.   
  8. </div>  
  9.   
  10. @section Scripts{  
  11.     <script>  
  12.         $(document).ready(function () {  
  13.             var currentPage = 1;
  14.             fetchData(1);  
  15.             $('#updatePanel').on('click', '.footerContent a', function (e) {  
  16.                 e.preventDefault();  
  17.                 var pageNo = parseInt($(this).html());  
  18.                 currentPage = pageNo;  
  19.                 fetchData(currentPage);  
  20.             });  
  21.             function fetchData(pageNo) {       
  22.                 var $loading = "<div class='loading'>Please wait...</div>";  
  23.                 $('#updatePanel').prepend($loading);  
  24.                 $.ajax({  
  25.                     url: 'http://localhost:47250/api/ExamplePaging',  
  26.                     type: 'GET',  
  27.                     data: { pageNo: pageNo },  
  28.                     dataType: 'json',  
  29.                     success: function (data) {  
  30.                         var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');  
  31.                         var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');  
  32.                         $table.append($header);  
  33.                         $.each(data.Employees, function (i, emp) {  
  34.                             var $row = $('<tr/>');  
  35.                             $row.append($('<td/>').html(emp.FirstName + ' ' + emp.LastName));  
  36.                             $row.append($('<td/>').html(emp.EmailID));  
  37.                             $row.append($('<td/>').html(emp.City));  
  38.                             $row.append($('<td/>').html(emp.Country));  
  39.                             $table.append($row);  
  40.                         });  

  42.                         var totalPage = parseInt(data.TotalPage);  
  43.                         var $footer = $('<tr/>');  
  44.                         var $footerTD = $('<td/>').attr('colspan', 4).addClass('footerContent');  
  45.   
  46.                         if (totalPage > 0) {  
  47.                             for (var i = 1; i <= totalPage; i++) {  
  48.                                 var $page = $('<span/>').addClass((i == currentPage) ? "current" : "");  
  49.                                 $page.html((i == currentPage) ? i : "<a href='#'>" + i + "</a>");  
  50.                                 $footerTD.append($page);  
  51.                             }  
  52.                             $footer.append($footerTD);  
  53.                         }  
  54.                         $table.append($footer);  
  55.   
  56.                         $('#updatePanel').html($table);  
  57.                     },  
  58.                     error: function () {  
  59.                         alert('Error! Please try again.');  
  60.                     }  
  61.                 }).done(function () {  

  63.                     $loading.remove();  
  64.                 });  
  65.             }  
  66.         });  
  67.     </script>  
  68. }  
  69.   
  70. <style>

  72.     #updatePanel {  
  73.         width: 95%;  
  74.         margin: 0 auto;  
  75.         position: relative;  
  76.     }  
  77.   
  78.     .loading {  
  79.         float: left;  
  80.         position: absolute;  
  81.         margin-left: 40%;  
  82.         width: 200px;  
  83.         top: 100px;  
  84.         padding: 3px;  
  85.         border: 1px solid rgb(253, 0, 0);  
  86.         background-color: rgb(245, 245, 78);  
  87.         text-align: center;  
  88.     }  
  89.   
  90.     table {  
  91.         font-family: arial, sans-serif;  
  92.         border-collapse: collapse;  
  93.         width: 100%;  
  94.     }  
  95.   
  96.     td, th {  
  97.         border: 1px solid #dddddd;  
  98.         text-align: left;  
  99.         padding: 8px;  
  100.     }  
  101.   
  102.     tr:nth-child(even) {  
  103.         background-color: #dddddd;  
  104.     }  
  105.   
  106.     span.current {  
  107.         cursor: auto !important;  
  108.         background-color: #6E6E6E !important;  
  109.         color: #ffffff;  
  110.         font-weight: bold;  
  111.         padding: 5px 10px;  
  112.         border: 1px solid #000000;  
  113.         margin-right: 4px;  
  114.     }  
  115.   
  116.     td.footerContent span a {  
  117.         display: inline-block;  
  118.         padding: 3px 10px;  
  119.         background-color:chartreuse;  
  120.         margin-right: 4px;  
  121.         border: 1px solid #998787;  
  122.         cursor: pointer;  
  123.     }  
  124.   
  125.     td.footerContent span a {  
  126.         text-decoration: none;  
  127.     }  
  128.   
  129.     td.footerContent {  
  130.         text-align: right;  
  131.     }  
  132. </style> 
Code Description
 
Load the data for page 1 the first time using function implementation.
  1. var currentPage = 1;  
  2.             fetchData(1); 
Then, implement Paging using jQuery.
  1. $('#updatePanel').on('click', '.footerContent a', function (e) {    
  2.                 e.preventDefault();    
  3.                 var pageNo = parseInt($(this).html());    
  4.                 currentPage = pageNo;    
  5.                 fetchData(currentPage);    
  6.             }); 
Then, create a function for fetching Data.
  1. function fetchData(pageNo) {  
  2. } 
Then, create a loading panel.
  1. var $loading = "<div class='loading'>Please wait...</div>";    
  2.                $('#updatePanel').prepend($loading);  
AJAX call for fetch data from WEB API.
  1.  $.ajax({    
  2.                     url: 'http://localhost:47250/api/ExamplePaging',    
  3.                     type: 'GET',    
  4.                     data: { pageNo: pageNo },    
  5.                     dataType: 'json',    
  6.                     success: function (data) { 
Generate HTML and load data in table body.
  1. success: function (data) {    
  2.                         var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');    
  3.                         var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');    
  4.                         $table.append($header);    
  5.                         $.each(data.Employees, function (i, emp) {    
  6.                             var $row = $('<tr/>');    
  7.                             $row.append($('<td/>').html(emp.FirstName + ' ' + emp.LastName));    
  8.                             $row.append($('<td/>').html(emp.EmailID));    
  9.                             $row.append($('<td/>').html(emp.City));    
  10.                             $row.append($('<td/>').html(emp.Country));    
  11.                             $table.append($row);    
  12.                         }); 
Table footer (for paging content).
  1. var totalPage = parseInt(data.TotalPage);    
  2.                         var $footer = $('<tr/>');    
  3.                         var $footerTD = $('<td/>').attr('colspan', 4).addClass('footerContent');    
  4.     
  5.                         if (totalPage > 0) {    
  6.                             for (var i = 1; i <= totalPage; i++) {    
  7.                                 var $page = $('<span/>').addClass((i == currentPage) ? "current" : "");    
  8.                                 $page.html((i == currentPage) ? i : "<a href='#'>" + i + "</a>");    
  9.                                 $footerTD.append($page);    
  10.                             }    
  11.                             $footer.append($footerTD);    
  12.                         }    
  13.                         $table.append($footer);    
  14.     
  15.                         $('#updatePanel').html($table);    
  16.                     },   
Remove loading panel after AJAX call complete.
  1. .done(function () {    
  2.                     $loading.remove();    
  3.                 });  
I have added some css fora good  table and paging appearance.
  1. <style>  
  2.     #updatePanel {    
  3.         width: 95%;    
  4.         margin: 0 auto;    
  5.         position: relative;    
  6.     }    
  7.     
  8.     .loading {    
  9.         float: left;    
  10.         position: absolute;    
  11.         margin-left: 40%;    
  12.         width: 200px;    
  13.         top: 100px;    
  14.         padding: 3px;    
  15.         border: 1px solid rgb(253, 0, 0);    
  16.         background-color: rgb(245, 245, 78);    
  17.         text-align: center;    
  18.     }    
  19.     
  20.     table {    
  21.         font-family: arial, sans-serif;    
  22.         border-collapse: collapse;    
  23.         width: 100%;    
  24.     }    
  25.     
  26.     td, th {    
  27.         border: 1px solid #dddddd;    
  28.         text-align: left;    
  29.         padding: 8px;    
  30.     }    
  31.     
  32.     tr:nth-child(even) {    
  33.         background-color: #dddddd;    
  34.     }    
  35.     
  36.     span.current {    
  37.         cursor: auto !important;    
  38.         background-color: #6E6E6E !important;    
  39.         color: #ffffff;    
  40.         font-weight: bold;    
  41.         padding: 5px 10px;    
  42.         border: 1px solid #000000;    
  43.         margin-right: 4px;    
  44.     }    
  45.     
  46.     td.footerContent span a {    
  47.         display: inline-block;    
  48.         padding: 3px 10px;    
  49.         background-color:chartreuse;    
  50.         margin-right: 4px;    
  51.         border: 1px solid #998787;    
  52.         cursor: pointer;    
  53.     }    
  54.     
  55.     td.footerContent span a {    
  56.         text-decoration: none;    
  57.     }    
  58.     
  59.     td.footerContent {    
  60.         text-align: right;    
  61.     }    
  62. </style>    
OUTPUT
 
The number of records per page. That is 5 and paging feature.
 
For loading panel.
 
 
Added style sheet for a good look in table and paging.
 
 
 
 
 
SUMMARY
  • Paging using AP.NET Web API.
  • Paging with  loading panel.


Similar Articles