Razor code
<!-- Bootstrap3.cshtml view -->
@using MvcPaging.Demo.Models
@model IPagedList<Product>
@{
Layout = null;
ViewBag.Title = "Pager with Bootstrap 3 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/bootstrap3.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>
</head>
<body>
<a class="sr-only" href="#content">Skip navigation</a>
<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-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>s
</ul>
</nav>
</div>
</header>
<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("Bootstrap3Pagination")
.MaxNrOfPages(14)
.AlwaysAddFirstPageNumber()
)
</div>
</body>
<!-- Bootstrap3Pagination.cshtml DisplayTemplate -->
@model PaginationModel
<ul class="pagination">
@foreach (var link in Model.PaginationLinks)
{
@BuildLink(link)
}
</ul>
@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);
}
}
if (link.DisplayText == "«")
{
aBuilder.InnerHtml = "«";
}
else if (link.DisplayText == "»")
{
aBuilder.InnerHtml = "»";
}
else
{
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));
}