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.
MVC4 Project Window.
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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace PageGrid.Controllers
{
public class GridViewModel
{
public IEnumerable<String> NameofMonth { get; set; }
public int PaperNumber { get; set; }
}
public class ValuesController : ApiController
{
public IList<String> NameofMonth
{
get { return new List<String> { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }; }
}
public GridViewModel Get(int paper, int papersize)
{
return new GridViewModel
{
NameofMonth = (0 == paper ? null : NameofMonth.Skip((paper - 1) * papersize).Take(papersize).ToArray())
,
PaperNumber = ((int)Math.Ceiling((double)NameofMonth.Count / papersize))
};
}
}
}

Step 3

Open the "index.cshtml" file then:

In the "Solution Explorer".
Select "Views folder" -> "Home folder" -> "index.cshtml".

And write this code.

Page size:

<select data-bind="options: availablePaperSize, optionsText: $data, value: selectedPaperSize"></select>
<table data-bind="with: GridViewModel">
<thead>
<tr>
<th>Names Of Months
</th>
</tr>
</thead>
<tbody data-bind="foreach: NameofMonth">
<tr>
<td data-bind="text: $data"></td>
</tr>
</tbody>
</table>
<div id="pager"></div>
<script type="text/javascript">
function pageViewModel() {
var self = this;
self.GridViewModel = ko.observable();
self.selectedPaperSize = ko.observable(3); 3
self.availablePaperSize = ko.observableArray([1, 2, 3, 4, 5]);
self.selectedPaper = ko.observable(1);
$("#pager").on("click", ".pageIndex", function (event) {
self.selectedPaper($(this).text());
});
self.navigate = function () {
$.get("/api/values?paper=" + self.selectedPaper() + "&papersize=" + self.selectedPaperSize(), self.GridViewModel);
};
self.SubscribeToEvents = function () {
self.selectedPaperSize.subscribe(function (newValue) {
self.selectedPaper(1);
self.navigate();
});
self.selectedPaper.subscribe(function (newValue) {
self.navigate();
});
self.GridViewModel.subscribe(function (newValue) {
var paperNumber = newValue.PaperNumber;
var $pager = $("#pager");
$pager.html("");
for (var i = 1; i <= paperNumber; i++) {
var link = $('<a class="pageIndex">' + i + '</a>');
$pager.append(link);
}
}, this);
};
self.bind = function () {
self.SubscribeToEvents();
self.navigate();
ko.applyBindings(self);
}
}
$(function () { new pageViewModel().bind(); })
</script>