ASP.NET Core 2.2 - Bootstrap 4 Pagination

Ken Haggerty
Created 08/22/2019 - Updated 08/25/2019 16:05

This article will demonstrate the use of Bootstrap 4 pagination for a table of entities. I will assume you have created a new ASP.NET Core 2.2 Razor Pages project. I won't use Identity or Individual User Accounts.

The research project I used for the articles about table functions is published to tables.kenhaggerty.com. I created a topic, ASP.NET Core 2.2 - Table Functions Project for discussions. Access to the source code may be purchased at Manage > Assets.

I used instructions from Simple Paging In ASP.NET Core Razor Pages by Mike Brind with a couple of modifications.

Edit Index.cshtml.cs, add the paging properties:
private readonly FoodDbContext _context;

public IndexModel(FoodDbContext context)
{
    _context = context;
}

public int CurrentPage { get; set; } = 1;

public int Count { get; set; }

public int PageSize { get; set; } = 10;

public int TotalPages => (int)Math.Ceiling(decimal.Divide(Count, PageSize));

public bool EnablePrevious => CurrentPage > 1;

public bool EnableNext => CurrentPage < TotalPages;

public IList<Food> Foods { get; set; } = new List<Food>();

public void OnGet(int currentPage)
{
    CurrentPage = currentPage == 0 ? 1 : currentPage;
            
    Count = _context.Foods.Count();

    if (CurrentPage > TotalPages)
        CurrentPage = TotalPages;

    Foods = _context.Foods
        .Skip((CurrentPage - 1) * PageSize)
        .Take(PageSize)
        .ToList();
}
Edit Index.cshtml, add the paging elements:
<nav aria-label="Page navigation">
    <ul class="pagination flex-wrap">
        <li class="page-item @@(Model.EnablePrevious ? " " : " disabled" )">
            <a asp-route-currentPage="1"
               class="page-link" aria-label="Frist">
                <span aria-hidden="true">|<</span>
                <span class="sr-only">First</span>
            </a>
        </li>
        <li class="page-item @@(Model.EnablePrevious ? " " : " disabled" )">
            <a asp-route-currentPage="@@(Model.CurrentPage -1)"
               class="page-link" aria-label="Next">
                <span aria-hidden="true"><</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
        @@for (var i = 1; i <= Model.TotalPages; i++)
        {
            <li class="page-item @@(i == Model.CurrentPage ? "active" : "")">
                <a asp-route-currentPage="@@i" class="page-link">@@i</a>
            </li>
        }
        <li class="page-item @@(Model.EnableNext ? " " : " disabled" )">
            <a asp-route-currentpage="@@(Model.CurrentPage + 1)"
               class="page-link" aria-label="Previous">
                <span aria-hidden="true">></span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item @@(Model.EnableNext ? " " : " disabled" )">
            <a asp-route-currentPage="@@Model.TotalPages"
               class="page-link" aria-label="Last">
                <span aria-hidden="true">>|</span>
                <span class="sr-only">Last</span>
            </a>
        </li>
    </ul>
</nav>

Notice the flex-wrap class for the ul element. This will wrap the page number list as needed.

Paginated Table
Update 08/25/2019

Updated articles, asset and topic links.

Article Tags:

Bootstrap EF Core

Comment Count = 0

Please log in to comment.

Login Register
Logged in users receive web notifications.
Web Notifications