Razor code
<!-- Bootstrap.cshtml view -->
@using MvcPaging.Demo.Models
@model IPagedList<Product>
@{
Layout = null;
ViewBag.Title = "Pager with Twitter Bootstrap layout";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="@Url.Content("~/Content/Css/bootstrap.min.css")" rel="stylesheet">
<style>
body
{
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</a><a class="brand" href="#">ASP.NET MVC Paging sample</a>
<div class="nav-collapse">
<ul class="nav">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = String.Empty }, null)</li>
<li>@Html.ActionLink("About", "About", "Home", new { area = String.Empty }, null)</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>@ViewBag.Title</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Product name</th>
<th>Category</th>
</tr>
</thead>
<tbody>
@foreach (var product in Model)
{
<tr>
<td>@product.Name</td>
<td>@product.Category</td>
</tr>
}
</tbody>
</table>
@Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount).Options(o => o
.DisplayTemplate("BootstrapPagination")
.MaxNrOfPages(14)
.AlwaysAddFirstPageNumber()
.SetPreviousPageText("←")
.SetNextPageText("→")
)
</div>
</body>
<!-- BootstrapPagination.cshtml DisplayTemplate -->
@model PaginationModel
<div class="pagination">
<ul>
@foreach (var link in Model.PaginationLinks)
{
@BuildLink(link)
}
</ul>
</div>
@helper BuildLink(PaginationLink link)
{
var liBuilder = new TagBuilder("li");
if (link.IsCurrent)
{
liBuilder.MergeAttribute("class", "active");
}
if (! link.Active)
{
liBuilder.MergeAttribute("class", "disabled");
}
var aBuilder = new TagBuilder("a");
if (link.Url == null)
{
aBuilder.MergeAttribute("href", "#");
}
else
{
aBuilder.MergeAttribute("href", link.Url);
}
// Ajax support
if (Model.AjaxOptions != null)
{
foreach (var ajaxOption in Model.AjaxOptions.ToUnobtrusiveHtmlAttributes())
{
aBuilder.MergeAttribute(ajaxOption.Key, ajaxOption.Value.ToString(), true);
}
}
aBuilder.SetInnerText(link.DisplayText);
liBuilder.InnerHtml = aBuilder.ToString();
@Html.Raw(liBuilder.ToString())
}
Controller code
public ActionResult Bootstrap(int? page)
{
int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
return View(this.allProducts.ToPagedList(currentPageIndex, DefaultPageSize));
}