Pager with Twitter Bootstrap layout

Product name Category
Product 71 Food
Product 72 Shoes
Product 73 Shoes
Product 74 Electronics
Product 75 Food
Product 76 Shoes
Product 77 Shoes
Product 78 Electronics
Product 79 Food
Product 80 Shoes

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