ASP.NET MVC - Pagination Example

CSharp · Mvc

Model

using System;
using System.Collections.Generic;

namespace PaginationExample
{
	public class IndexViewModel
	{
        public IEnumerable<string> Items { get; set; }
        public Pager Pager { get; set; }	
	}
	
    public class Pager
    {
        public Pager(int totalItems, int? page, int pageSize = 10)
        {
            // calculate total, start and end pages
            var totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
            var currentPage = page != null ? (int)page : 1;
            var startPage = currentPage - 5;
            var endPage = currentPage + 4;
            if (startPage <= 0)
            {
                endPage -= (startPage - 1);
                startPage = 1;
            }
            if (endPage > totalPages)
            {
                endPage = totalPages;
                if (endPage > 10)
                {
                    startPage = endPage - 9;
                }
            }

            TotalItems = totalItems;
            CurrentPage = currentPage;
            PageSize = pageSize;
            TotalPages = totalPages;
            StartPage = startPage;
            EndPage = endPage;
        }

        public int TotalItems { get; private set; }
        public int CurrentPage { get; private set; }
        public int PageSize { get; private set; }
        public int TotalPages { get; private set; }
        public int StartPage { get; private set; }
        public int EndPage { get; private set; }
    }
}

View

@model PaginationExample.IndexViewModel

<html>
	<head>
		<title>ASP.NET MVC - Pagination Example</title>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<div class="col-md-6 col-md-offset-3">
				<h1>ASP.NET MVC - Pagination Example</h1>

				<!-- items being paged -->
				<ul>
					@foreach (var item in Model.Items)
					{
						<li>@item</li>
					}
				</ul>				
				
				<!-- pager -->
				@if (Model.Pager.EndPage > 1)
				{
					<ul class="pagination">
						@if (Model.Pager.CurrentPage > 1)
						{
							<li>
								<a href="~/Home/Index">First</a>
							</li>
							<li>
								<a href="~/Home/Index?page=@(Model.Pager.CurrentPage - 1)">Previous</a>
							</li>
						}

						@for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
						{
							<li class="@(page == Model.Pager.CurrentPage ? "active" : "")">
								<a href="~/Home/Index?page=@page">@page</a>
							</li>
						}

						@if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
						{
							<li>
								<a href="~/Home/Index?page=@(Model.Pager.CurrentPage + 1)">Next</a>
							</li>
							<li>
								<a href="~/Home/Index?page=@(Model.Pager.TotalPages)">Last</a>
							</li>
						}
					</ul>
				}				
			</div>
		</div>
		<hr />
		<div class="credits text-center">
		  <p>
			  <a href="http://jasonwatmore.com/post/2015/10/30/ASPNET-MVC-Pagination-Example-with-Logic-like-Google.aspx">ASP.NET MVC - Pagination Example with Logic like Google</a>
		  </p>
		  <p>
			<a href="http://jasonwatmore.com">JasonWatmore.com</a>
		  </p>
		</div>
	</body>
</html>

Controller

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;

namespace PaginationExample
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index(int? page)
		{
			var dummyItems = Enumerable.Range(1, 150).Select(x => "Item " + x);
			var pager = new Pager(dummyItems.Count(), page);
			
			var viewModel = new IndexViewModel
			{
				Items = dummyItems.Skip((pager.CurrentPage - 1) * pager.PageSize).Take(pager.PageSize),
				Pager = pager
			};
			
			return View(viewModel);
		}
	}
}