Pager with Twitter Bootstrap layout

Product name	Category
Product 251	Food
Product 252	Shoes
Product 253	Shoes
Product 254	Electronics
Product 255	Food
Product 256	Shoes
Product 257	Shoes
Product 258	Electronics
Product 259	Food
Product 260	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));
}