Skip navigation

Pager with Bootstrap 3 layout

Product name Category
Product 91 Food
Product 92 Shoes
Product 93 Shoes
Product 94 Electronics
Product 95 Food
Product 96 Shoes
Product 97 Shoes
Product 98 Electronics
Product 99 Food
Product 100 Shoes

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 = "&laquo;";
	}
	else if (link.DisplayText == "»")
	{
		aBuilder.InnerHtml = "&raquo;";
	}
	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));
}