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;
  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;
  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. }
  5. <h2>Satyaprakash Fetch data from WEB Api and Display data with paging using jquery</h2>
  6. <div id="updatePanel">
  8. </div>
  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');
  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);
  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. }
  70. <style>

  72. #updatePanel {
  73. width: 95%;
  74. margin: 0 auto;
  75. position: relative;
  76. }
  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. }
  90. table {
  91. font-family: arial, sans-serif;
  92. border-collapse: collapse;
  93. width: 100%;
  94. }
  96. td, th {
  97. border: 1px solid #dddddd;
  98. text-align: left;
  99. padding: 8px;
  100. }
  102. tr:nth-child(even) {
  103. background-color: #dddddd;
  104. }
  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. }
  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. }
  125. td.footerContent span a {
  126. text-decoration: none;
  127. }
  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');
  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);
  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. }
  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. }
  20. table {
  21. font-family: arial, sans-serif;
  22. border-collapse: collapse;
  23. width: 100%;
  24. }
  26. td, th {
  27. border: 1px solid #dddddd;
  28. text-align: left;
  29. padding: 8px;
  30. }
  32. tr:nth-child(even) {
  33. background-color: #dddddd;
  34. }
  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. }
  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. }
  55. td.footerContent span a {
  56. text-decoration: none;
  57. }
  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