Custom Paging with ASPNET MVC2 and HTML Table

ASP.NET MVC provide many features to generate clean HTML that is search engine friendly and look less cluttered then Web forms. There is no data grid control present in the framework but it helps you build in every possible way to create one on your own with basic HTML table.

Today, we will see how to create Paging along with table footer to navigate through the pages.

Screenshot:

To get started, let's create a new ASP.NET MVC2 web application.

Let's work on setting our route first so open "Global.asax" file and add following code:

routes.MapRoute(

"",

"Process/page{page}",

new { controller = "Process", action = "Index"}

);

 

//catch all route

routes.MapRoute(

"Default",

"{controller}/{action}/{id}",

new { controller = "Process", action = "Index" , id = UrlParameter.Optional }

);

 

What we are doing here?

Basically, we created new route map right before our "Default" route to tell routing engine that this is how our request URL will look like. We also set our catch all route to point to Process controller (which we will create next).

Let's create ProcessController:

(For Demo only) In this application we are querying local machine to get list of all processes currently running on the machine which is why we are calling this controller as ProcessController

Right click on controller folder -> select "Add" -> select "controller" -> name this controller as "ProcessController"

Let's create action method:

In our process controller, we will have one action method with name "Index". This method will return strongly typed view for "System.Diagnostics.Process". As shown below: we will get all running processes using Linq query and pass it in view as Enumerable object.

 

public ActionResult Index()

{

var processes = from p in Process.GetProcesses()

select p;

 

return View(processes.AsEnumerable());

}

 

Adding view:

Now let's add a view for this action method:

Right click anywhere inside Index action method and select "Add View":

Once view is created paste following code:

<h2>

List of processes</h2>

<table>

<thead>

<tr>

<th>

Process Name

</th>

<th>

Responding?

</th>

<th>

StartTime

</th>

<th>

Virtual Memory Size(64)

</th>

</tr>

</thead>

<tbody>

<% foreach (var process in Model)

{%>

<tr>

<td>

<%: process.ProcessName %>

</td>

<td>

<%: process.Responding %>

</td>

<td>

<%: process.BasePriority.ToString() %>

</td>

<td>

<%: process.VirtualMemorySize64.ToString() %>

</td>

</tr>

<% } %>

</tbody>

</table>

 

It's time to run the page and see if it's all working fine.

Now we will add paging to this HTML table.

Let's create a class with common properties that a paging control can have like : total items, items per page, current page, total pages, next page, previous page. We will call this class PagingInfo.

So, right click on your Model folder and create a new class with name PagingInfo.cs and paste following code:

public class PagingInfo

{

public int TotalItems { get; set; }

public int ItemsPerPage { get; set; }

public int CurrentPage { get; set; }

 

 

public int TotalPages

{

get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }

}

public int NextPage

{

get {

int nextpage=CurrentPage;

 

return nextpage >= TotalPages ? nextpage = 1 : nextpage + 1;

}

}

 

public int PrevPage

{

get {

int prevpage = CurrentPage;

return prevpage <= 1 ? prevpage = TotalPages : prevpage - 1;

}

}

 

}

 

 

To add paging support, we will first alter our process controller to include size of the page (number of items to be shown),current page, how many records to be taken etc:

So alter your ProcessController with following code:

public class ProcessController : Controller

{

private int PageSize = 10;

public ActionResult Index(int page=1)

{

var processes = from p in Process.GetProcesses()

select p;

 

 

 

ViewData["pagingInfo"] = new PagingInfo {

CurrentPage=page,

ItemsPerPage=PageSize,

TotalItems=processes.Count()

};

 

return View(processes.Skip(page-1).Take(PageSize).AsEnumerable());

}

 

}

 

Let's add links to navigate through pages:

Add following footer in your view's html table:

<tfoot>

<tr>

<td colspan="4">

<%: Html.ActionLink("<<", "Index", new { page = ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).PrevPage })%>

Page

<%: ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).CurrentPage%>

of

<%: ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).TotalPages%>

 

<%: Html.ActionLink(">>", "Index", new { page = ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).NextPage })%>

</td>

</tr>

</tfoot>

 

So your new table should look like this:

<h2>

List of processes</h2>

<table>

<thead>

<tr>

<th>

Process Name

</th>

<th>

Responding?

</th>

<th>

StartTime

</th>

<th>

Virtual Memory Size(64)

</th>

</tr>

</thead>

<tbody>

<% foreach (var process in Model)

{%>

<tr>

<td>

<%: process.ProcessName %>

</td>

<td>

<%: process.Responding %>

</td>

<td>

<%: process.BasePriority.ToString() %>

</td>

<td>

<%: process.VirtualMemorySize64.ToString() %>

</td>

</tr>

<% } %>

</tbody>

<tfoot>

<tr>

<td colspan="4">

<%: Html.ActionLink("<<", "Index", new { page = ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).PrevPage })%>

Page

<%: ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).CurrentPage%>

of

<%: ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).TotalPages%>

 

<%: Html.ActionLink(">>", "Index", new { page = ((RoutesCongigurationTesting.Models.PagingInfo)ViewData["pagingInfo"]).NextPage })%>

</td>

</tr>

</tfoot>

</table>

 

Now build and run your application.

 

 

 

 

 

 

 

 

 

 

 

Tags: , , ,

ASP.NET | LINQ | MVC