(332) 331-8677

ASP.NET Core 3.1 Razor Pages Pagination Bootstrap Example Models

Pager.cs

using System;

namespace Empire.Models.Pagination
{
    public class Pager
    {
        public Pager(int totalItems, int? page, int pageSize = 16)
        {
            // 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; }
    }
}

IndexViewModel.cs

using System.Collections.Generic;

namespace Empire.Models.Pagination
{
    public class IndexViewModel
    {
        public IEnumerable<Article> Items { get; set; }
        public Pager Pager { get; set; }
    }
}

Controller

public async Task<IActionResult> Index(int? page)
        {
            var articles = await _context.Articles.OrderByDescending(a => a.Id).ToListAsync();
            var pager = new Pager(articles.Count(), page);
            var viewModel = new IndexViewModel
            {
                Items = articles.Skip((pager.CurrentPage - 1) * pager.PageSize).Take(pager.PageSize),
                Pager = pager
            };
            ViewBag.onePageOfArticles = viewModel;
            return View();
        }

View

@model IEnumerable<Empire.Models.Article>

@{
    ViewData["Title"] = "";
    ViewData["BrowserTitle"] = "";
    ViewData["Description"] = "";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@if (User.Identity.IsAuthenticated)
{
    <p><a asp-action="Create">Add</a></p>
}

<div class="articles">
    @foreach (var item in ViewBag.OnePageOfArticles.Items)
    {
    <div class="article">
        <a asp-controller="Articles" asp-action="Details" asp-route-slug="@item.Slug">
            <img src="~/uploads/article/@item.Img" alt="@item.Title">
        </a>
        <h2 class="list-header-16"><a asp-controller="Articles" asp-action="Details" asp-route-slug="@item.Slug">@item.Title</a></h2>
        @if (@item.Updated != null)
        {
            <div class="article-date">@item.Updated.ToString("dd.MM.yyyy")</div>
        }
        @if (User.Identity.IsAuthenticated)
        {
            <div>
                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
            </div>
        }
    </div>
    }
</div>
<div class="pagination-center">
    @if (ViewBag.onePageOfArticles.Pager.EndPage > 1)
    {
        <ul class="pagination">
            @if (ViewBag.onePageOfArticles.Pager.CurrentPage > 1)
            {
                <li>
                    <a asp-action="Index">First</a>
                </li>
                <li>
                    <a href="~/articles?page=@(ViewBag.onePageOfArticles.Pager.CurrentPage - 1)">Previous</a>
                </li>
            }

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

            @if (ViewBag.onePageOfArticles.Pager.CurrentPage < ViewBag.onePageOfArticles.Pager.TotalPages)
            {
                <li>
                    <a href="~/articles?page=@(ViewBag.onePageOfArticles.Pager.CurrentPage + 1)">Next</a>
                </li>
                <li>
                    <a href="~/articles?page=@(ViewBag.onePageOfArticles.Pager.TotalPages)">Last</a>
                </li>
            }
        </ul>
    }
</div>