Introduction

This article describes how to create a page grid in the ASP.NET Web API. Here the user allows the page size for a grid. We use the "Knockout.js" script file for the page grid.

Now for the procedure for creating the page grid in ASP.NET Web API.

Step 1

First we create the Web API application name as "PageGrid".

Step 2

Open the "ValuesController.cs".

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  7. namespace PageGrid.Controllers
  8. {
  9. public class GridViewModel
  10. {
  11. public IEnumerable<String> NameofMonth { get; set; }
  12. public int PaperNumber { get; set; }
  13. }
  14. public class ValuesController : ApiController
  15. {
  16. public IList<String> NameofMonth
  17. {
  18. get { return new List<String> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; }
  19. }
  20. public GridViewModel Get(int paper, int papersize)
  21. {
  22. return new GridViewModel
  23. {
  24. NameofMonth = (0 == paper ? null : NameofMonth.Skip((paper - 1) * papersize).Take(papersize).ToArray())
  25. ,
  26. PaperNumber = ((int)Math.Ceiling((double)NameofMonth.Count / papersize))
  27. };
  28. }
  29. }
  30. }

Step 3

Open the "index.cshtml" file then:

And write this code.

Page size:

  1. <select data-bind="options: availablePaperSize, optionsText: $data, value: selectedPaperSize"></select>
  2. <table data-bind="with: GridViewModel">
  3. <thead>
  4. <tr>
  5. <th>Names Of Months
  6. </th>
  7. </tr>
  8. </thead>
  9. <tbody data-bind="foreach: NameofMonth">
  10. <tr>
  11. <td data-bind="text: $data"></td>
  12. </tr>
  13. </tbody>
  14. </table>
  15. <div id="pager"></div>
  16. <script type="text/javascript">
  17. function pageViewModel() {
  18. var self = this;
  19. self.GridViewModel = ko.observable();
  20. self.selectedPaperSize = ko.observable(3); 3
  21. self.availablePaperSize = ko.observableArray([1, 2, 3, 4, 5]);
  22. self.selectedPaper = ko.observable(1);
  23. $("#pager").on("click", ".pageIndex", function (event) {
  24. self.selectedPaper($(this).text());
  25. });
  26. self.navigate = function () {
  27. $.get("/api/values?paper=" + self.selectedPaper() + "&papersize=" + self.selectedPaperSize(), self.GridViewModel);
  28. };
  29. self.SubscribeToEvents = function () {
  30. self.selectedPaperSize.subscribe(function (newValue) {
  31. self.selectedPaper(1);
  32. self.navigate();
  33. });
  34. self.selectedPaper.subscribe(function (newValue) {
  35. self.navigate();
  36. });
  37. self.GridViewModel.subscribe(function (newValue) {
  38. var paperNumber = newValue.PaperNumber;
  39. var $pager = $("#pager");
  40. $pager.html("");
  41. for (var i = 1; i <= paperNumber; i++) {
  42. var link = $('<a class="pageIndex">' + i + '</a>');
  43. $pager.append(link);
  44. }
  45. }, this);
  46. };
  47. self.bind = function () {
  48. self.SubscribeToEvents();
  49. self.navigate();
  50. ko.applyBindings(self);
  51. }
  52. }
  53. $(function () { new pageViewModel().bind(); })
  54. </script>

Step 4

Now open the "_Layout.cshtml" file and add the "Knockout-2.1.0.js" file.

The code looks as in the following:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <title>@ViewBag.Title</title>
  7. @Styles.Render("~/Content/css")
  8. @Scripts.Render("~/bundles/modernizr")
  9. @Scripts.Render("~/bundles/jquery")
  10. </head>
  11. <body>
  12. @RenderBody()
  13. @RenderSection("scripts", required: false)
  14. <script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
  15. </body>
  16. </body>
  17. </html>

Step 5

Now execute the application. It will look as in the following:

grid.jpg

If we select the page size as 2 then there are 2 names of months displayed in one page as in the following:

Grid1.jpg

Select the Second page.

grid2.jpg

Select the Page Size 4.

grid3.jpg