ASP.NET Core MVC 中的分页

Question

我使用 ASP.NET Core 8 进行分页时遇到问题。当类别有一些记录时 (< 2500), the pagination works fine. It shows the pagination 1, 2, 3, 4, etc.

当我有很多行（> 2500）时，分页无法正确显示。分页脱离屏幕，css样式不对齐，分页不是从1开始。我每页显示10条、25条、50条记录（脚本中的页面大小）都没关系，同样的问题发生。

public async Task<IActionResult> Category(int id, int page = 1)
{
    var category = await _context.Categories
                                 .Include(c => c.Subcategories)
                                 .ThenInclude(sc => sc.Recipes)
                                 .FirstOrDefaultAsync(c => c.CategoryId == id);
 
    if (category == null)
    {
        return NotFound();
    }

    var subcategories = category.Subcategories
                                .Select(sc => sc.SubcategoryName)
                                .Distinct()
                                .ToList();

    var recipes = category.Subcategories
                          .SelectMany(sc => sc.Recipes)
                          .Skip((page - 1) * PageSize)
                          .Take(PageSize)
                          .ToList();

    int totalRecipes = category.Subcategories
                               .SelectMany(sc => sc.Recipes)
                               .Count();

    ViewBag.CategoryID = id;
    ViewBag.CategoryName = category.CategoryName;
    ViewBag.Subcategories = subcategories;
    ViewBag.CurrentPage = page;
    ViewBag.TotalPages = (int)Math.Ceiling((double)totalRecipes / PageSize);

    return View(recipes);
}  

<!-- Pagination Controls -->
<div class="row justify-content-center mt-4">
    <div class="col-12 text-center">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-lg">
               @if (ViewBag.CurrentPage > 1)
               {
                   <li class="page-item">
                       <a class="page-link" asp-action="Category" asp-route-id="@ViewBag.CategoryID" asp-route-page="@(ViewBag.CurrentPage - 1)">
                       &laquo;
                       </a>
                   </li>
               }

               @for (int i = 1; i <= ViewBag.TotalPages; i++)
               {
                   <li class="page-item @(i == ViewBag.CurrentPage ? "active" : "")">
                       <a class="page-link" asp-action="Category" asp-route-id="@ViewBag.CategoryID" asp-route-page="@i">@i</a>
                   </li>
               }

               @if (ViewBag.CurrentPage < ViewBag.TotalPages)
               {
                   <li class="page-item">
                       <a class="page-link" asp-action="Category" asp-route-id="@ViewBag.CategoryID" asp-route-page="@(ViewBag.CurrentPage + 1)">
                       &raquo;
                       </a>
                   </li>
               }
           </ul>
       </nav>
   </div>
</div>

Answer 1

我不确定这是否能回答您的问题，但可能值得一看，我还没有遇到任何问题，但话又说回来，我目前没有使用 2500 条记录。

我正在使用剃须刀 Page

<div class="card mb-3">
<div class="card-header d-flex flex-row">
    <h5 class="flex-fill">Users</h5>
    <div class="px-1">
        <select class="form-select form-select-sm" onchange="OnPageSizeChanged">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>      
</div>

以及以下

private const int DefaultPageSize = 10;
private PaginationState _paginationState = new PaginationState { ItemsPerPage = DefaultPageSize };

这里是OnInitialized

    protected override void OnInitialized()
{
    
    _usersProvider = async request =>
    {
        AppState.ShowLoader("Fetching users, please standby.");
        var pagedResult = await UserAPI.GetUsersAsync(_filter, request.StartIndex, request.Count ?? DefaultPageSize);
       
        AppState.HideLoader();
        return GridItemsProviderResult.From(pagedResult.Records, pagedResult.TotalCount);
    };
}

这是分页界面

[Get("/api/users")]
Task<PagedResult<UserDTO>> GetUsersAsync(UserApprovedFilter approveType, 
int startIndex, int pageSize);

这里有一些例子 引导分页