DataList In ASP.NET MVC With Paging Using PagedList And Bootstrap

Here's an example ASP.NET MVC application that shows information in a DataList layout with pagination using PagedList Pager. The project also integrates Bootstrap for enhancing the UI and display the images from AdventureWorks Products table through an ImageHandler class. The significant files used in this project are:
1. PagingModel.cs/IndexModel.cs - These classes are responsible for defining the page number, size of page, and PagedList property that stores the information that are paged accordingly to it's size.

public class PagingModel
{
 public PagingModel()
 {
  Size = 24;
  Page = 1;
 }

 public int Page { get; set; }
 public int Size { get; set; }
}

public class IndexModel
{
 public PagingModel PageModel { get; set; }

 public IndexModel(PagingModel pageModel)
 {
  Products = new PagedList<ProductViewModel>(new List<ProductViewModel>(), 1, pageModel.Size);
  PageModel = pageModel;
 }

 public IPagedList<ProductViewModel> Products { get; set; }
}

2. ProductRepository.cs - this class is responsible for retrieving the products from the table and it's thumbnail photo.

public class ProductRepository
{
 AdventureWorks2012Entities context;

 public ProductRepository()
 {
  context = new AdventureWorks2012Entities();
 }

 public IEnumerable<ProductViewModel> GetProducts()
 {
  List<ProductViewModel> products = new List<ProductViewModel>();

  products = (from prod in context.Products
       join productProductPhoto in context.ProductProductPhotoes on prod.ProductID equals productProductPhoto.ProductID
       join productPhoto in context.ProductPhotoes on productProductPhoto.ProductPhotoID equals productPhoto.ProductPhotoID
       where prod.ListPrice > 0
       select new ProductViewModel()
       {
      ProductID = prod.ProductID,
      ProductName = prod.Name,
      ProductNumber = prod.ProductNumber,
      ListPrice = prod.ListPrice,
      Image = productPhoto.LargePhoto
       }).ToList();            
  return products;
 }

 public ProductViewModel Product(int productId)
 {
  ProductViewModel product = new ProductViewModel();
  product = (from prod in context.Products
       join productProductPhoto in context.ProductProductPhotoes on prod.ProductID equals productProductPhoto.ProductID
       join productPhoto in context.ProductPhotoes on productProductPhoto.ProductPhotoID equals productPhoto.ProductPhotoID
       where productId == prod.ProductID
       select new ProductViewModel()
       {
        Image = productPhoto.ThumbNailPhoto
       }).FirstOrDefault();

  return product;
 }
}

3. Index.cshtml - This is the page that will display the products information in a tabular format and has a PagedListPager helper that navigates the record through page numbers and other paging options.

@model DataListInASPMVCWithPaging.Models.IndexModel
@using PagedList
@using PagedList.Mvc

<h2>Product Listing</h2>

<div class="row">
    <div class="col-md-12">
        @Html.PagedListPager(Model.Products, page => Url.Action("Index",
                            "Product",
                                new RouteValueDictionary() {
                                { "Page", page }
                                }), PagedListRenderOptions.ClassicPlusFirstAndLast)
    </div>
</div>
<div class="row">
    @if (Model.Products.Count > 0)
    {
        foreach (var item in Model.Products)
        {
            <div class="col-md-2 col-sm-6 col-xs-12" style="text-align:left;">
                <div style="background-color:moccasin; padding:10px; border-radius:15px; margin-bottom:20px;">
                    <img src="~/Helpers/ImageHandler.ashx?ProductID=@item.ProductID" style="width:50%;" />
                    <h3>@item.ProductNumber</h3>
                    <p>@item.ProductName</p>
                    <p>@string.Format("{0:0,0.00}", Convert.ToDouble(item.ListPrice))</p>
                    <div>
                        @Html.ActionLink("Add To Cart", "", "", null, new { @class = "actionButton btn btn-xs btn-primary" })
                    </div>
                </div>
            </div>
        }
    }

</div>

Output

Source Code: DataList In ASP.NET MVC With Paging (Github)