ASP.NET MVC - Pagination Example | C# Online Compiler

ASP.NET MVC - Pagination Example by Jason Watmore

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; }
    }
}

Model

​x
 
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; }
    }
}

@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>

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>
​

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);
		}
	}
}

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);
        }
    }
}

View in Full Screen

View IL Code