Pagination razor pages

by

Pagination in Razor Pages

Razor Pages is a web development framework in ASP.NET that allows developers to easily build dynamic web pages. When working with large sets of data, it is common to implement pagination to display only a subset of the data at a time.

Implementing Pagination in Razor Pages

To implement pagination in Razor Pages, you can follow these steps:

  1. Create a PaginatedList class to handle the pagination logic:
    2.         
public class PaginatedList
{
  public int PageIndex { get; private set; }
  public int TotalPages { get; private set; }
  public List Items { get; private set; }

  public PaginatedList(List items, int count, int pageIndex, int pageSize)
  {
    PageIndex = pageIndex;
    TotalPages = (int)Math.Ceiling(count / (double)pageSize);

    Items = items.Skip((PageIndex - 1) * pageSize).Take(pageSize).ToList();
  }

  public bool HasPreviousPage
  {
    get { return (PageIndex > 1); }
  }

  public bool HasNextPage
  {
    get { return (PageIndex < TotalPages); }
  }
}
  2. In your Razor Page model, retrieve the data and set up the pagination:
    3.         
public class MyPageModel : PageModel
{
  private readonly MyDbContext _context;

  public PaginatedList MyDataModels { get; set; }

  public MyPageModel(MyDbContext context)
  {
    _context = context;
  }

  public async Task OnGetAsync(int pageIndex = 1)
  {
    int pageSize = 10; // Number of items displayed per page

    var query = _context.MyDataModels.AsQueryable(); // Get your data query here

    int count = await query.CountAsync();
    
    var items = await query.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToListAsync();
    
    MyDataModels = new PaginatedList(items, count, pageIndex, pageSize);

    return Page();
  }
}
  3. In your Razor Page, display the paginated data:
    4.         
@page "{pageIndex?}"
@model MyPageModel

@foreach (var item in Model.MyDataModels.Items)
{
  
    @item.Name
    
  
}


@if (Model.MyDataModels.HasPreviousPage)
{
  Previous
}

@if (Model.MyDataModels.HasNextPage)
{
  Next
}



    Page @(Model.MyDataModels.PageIndex) of @(Model.MyDataModels.TotalPages)

Explanation

The above steps demonstrate how to implement pagination in Razor Pages.

  1. An instance of the `PaginatedList` class is created to hold the paginated data and provide pagination-related properties and methods.
  2. In the Razor Page model, the data query is retrieved and paginated using the `Skip` and `Take` methods.
  3. In the Razor Page, the paginated data is displayed using a loop, and pagination links are added based on whether there are previous or next pages. The current page and total pages are also displayed.

Example

Suppose you have a list of products and want to display 5 products per page:

      


@page "{pageIndex?}"
@model ProductPageModel

@foreach (var product in Model.Products.Items)
{
  
@product.Name

  
@product.Price

  
}


@if (Model.Products.HasPreviousPage)
{
  Previous
}

@if (Model.Products.HasNextPage)
{
  Next
}



Page @(Model.Products.PageIndex) of @(Model.Products.TotalPages)

Leave a comment