Pager with Twitter Bootstrap layout

Product name Category
Product 131 Food
Product 132 Shoes
Product 133 Shoes
Product 134 Electronics
Product 135 Food
Product 136 Shoes
Product 137 Shoes
Product 138 Electronics
Product 139 Food
Product 140 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));
}