How to implement pagination in asp.net core razor pages

Question

I'm learning asp.net core razor pages with ef. I want to implement pagination with my table, I have check this tutorial

https://docs.microsoft.com/en-us/aspnet/core/data/ef-rp/sort-filter-page?view=aspnetcore-2.1

but it only support pre and next, I have researched for a long time, all of the solution are related to asp.net core mvc, but I'm using razor pages, there's no controller in my project, any ideas to implement?

This is the effect what I want to implement

 <form method="get" asp-page="./Index">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        @{
                            var totalPages = Model.Products.Count % 2 == 0 ? Model.Products.Count / 2 : Model.Products.Count / 2 + 1;
                        }
                        @for (int i = 1; i <= totalPages; i++)
                        {
                            <li><a asp-page="./Index" asp-route-id="@i">@i</a></li>
                        }
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </form>

cshtml.cs

  public async Task OnGetAsync(string sortOrder, string searchString, string shopString, string statusString, int page)
        {}

@Epistaxis I checked the code, but it looks like it need a controller, I have found lots of package to support it, but I have no controller, I use razor pages only. Thanks — Allen4Tech

Chris Pratt Chris Pratt · Accepted Answer · 2018-06-19T13:15:25

Pagination is relatively simple. There's libraries available to do it for you, but I've started to find them more trouble than they're worth.

You need three pieces of information from the request (or set to default values):

Page number (default to 1)
Page size (typically defaults to 10, but whatever you want)
Sort (not strictly necessary, but you should at least order by something to keep the results consistent across pages)

The page number and size give you your "skip" and "take" values:

var skip = (page - 1) * size;
var take = size;

You can then fetch the results via:

var pageOfResults = await query.Skip(skip).Take(take).ToListAsync();

Where query is an IQueryable - either your DbSet directly or the DbSet with a Where clause, OrderBy, etc. applied.

Then, you just need to the total number of items to figure the pages:

var count = await query.CountAsync();

Pro Tip, you can parallelize the two queries (results and total count) by doing:

var resultsTask = query.Skip(skip).Take(take).ToListAsync();
var countTask = query.CountAsync();

var results = await resultsTask;
var count = await countTask;

Tasks return hot, or already started. The await keyword simply holds the continuation of the rest of the code until the task completes. As a result, if you await each line, they'll complete in serial, but if you start both, first, and then await each, they'll process in parallel.

Anyways, once you have the count:

var totalPages = (int)Math.Ceil(Decimal.Divide(count, size));
var firstPage = 1;
var lastPage = totalPages;
var prevPage = Math.Max(page - 1, firstPage);
var nextPage = Math.Min(page + 1, lastPage);

Note: you can determine whether to show first/previous and last/next buttons based on whether they equal firstPage or lastPage, respectively.

Then, just build yourself a model with this information, and you can send that to the view to render the results and generate the paging HTML.

How to implement pagination in asp.net core razor pages

4 Answers

[Update]