Skip navigation

Pager with Bootstrap 3 layout

Product name Category
Product 1 Shoes
Product 2 Electronics
Product 3 Food
Product 4 Shoes
Product 5 Shoes
Product 6 Electronics
Product 7 Food
Product 8 Shoes
Product 9 Shoes
Product 10 Electronics

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));
}