Page Grid in ASP.Net Web API

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".

  • Start Visual Studio 2010 and select "New Project" from the Start Page.
  • In the Template window, select "Installed template" -> "Visual C#" -> "Web".
  • Choose "ASP. NET MVC 4 Web Application" then change its name.
  • Click on the "OK" button.

    grid6.jpg

  • MVC4 Project Window.

    grid7.jpg

  • Select "Web API" and click on the "OK" button.

Step 2

Open the "ValuesController.cs".

  • In the "Solution Explorer".
  • Select the "Controller Folder" -> "ValuesControllre.cs".
  • Write this code: 

  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 { getset; }  
  12.         public int PaperNumber { getset; }  
  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:

  • In the "Solution Explorer".

  • Select "Views folder" -> "Home folder" -> "index.cshtml".
    grid4.jpg

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.

  • In the "Solution Explorer".
  • Select "Views" -> "Shared" -> "_Layout.cshtml".
  • Now drag and drop the "Knockout-2.1.0.js" file from the "Script" folder.
    grid5.jpg

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


Similar Articles