Pager with Twitter Bootstrap layout

Product name	Category
Product 411	Food
Product 412	Shoes
Product 413	Shoes
Product 414	Electronics
Product 415	Food
Product 416	Shoes
Product 417	Shoes
Product 418	Electronics
Product 419	Food
Product 420	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));
}