Pager with Twitter Bootstrap layout

Product name	Category
Product 191	Food
Product 192	Shoes
Product 193	Shoes
Product 194	Electronics
Product 195	Food
Product 196	Shoes
Product 197	Shoes
Product 198	Electronics
Product 199	Food
Product 200	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));
}