如何在ASP.NET Core 5的Cinemas控制器Index视图中显示分页？

1. 确认视图模型的分页属性 #

首先确保你的CinemaPageViewModel（注意你写的CinmaPageViewModel可能是笔误，建议修正为标准拼写）包含分页必需的属性：

public class CinemaPageViewModel
{
    // 影院数据列表
    public List<Cinema> Cinemas { get; set; }
    // 当前页码
    public int CurrentPage { get; set; }
    // 总页数
    public int TotalPages { get; set; }
    // 每页条数
    public int PageSize { get; set; }
    // 总记录数
    public int TotalCount { get; set; }
    // 是否有上一页
    public bool HasPreviousPage => CurrentPage > 1;
    // 是否有下一页
    public bool HasNextPage => CurrentPage < TotalPages;
}

2. 修正控制器的分页逻辑 #

确保Index方法正确接收分页参数并计算分页数据，避免整数除法导致总页数计算错误：

private readonly ICinemasService _cinemasService;

public CinemasController(ICinemasService cinemasService)
{
    _cinemasService = cinemasService;
}

public IActionResult Index(int page = 1)
{
    const int pageSize = 10; // 可根据需求调整每页条数
    var allCinemas = _cinemasService.GetAllCinemas();
    var totalCount = allCinemas.Count();
    
    // 计算分页数据
    var paginatedCinemas = allCinemas
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .ToList();
    
    var viewModel = new CinemaPageViewModel
    {
        Cinemas = paginatedCinemas,
        CurrentPage = page,
        PageSize = pageSize,
        TotalCount = totalCount,
        TotalPages = (int)Math.Ceiling(totalCount / (double)pageSize)
    };

    return View(viewModel);
}

3. 在Index视图中实现分页控件 #

在Index.cshtml顶部声明视图模型，先渲染影院列表，再添加分页控件：

@model CinemaPageViewModel

<!-- 影院列表 -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>影院名称</th>
            <th>地址</th>
            <!-- 其他需要显示的列 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var cinema in Model.Cinemas)
        {
            <tr>
                <td>@cinema.Name</td>
                <td>@cinema.Address</td>
                <!-- 其他列数据 -->
            </tr>
        }
    </tbody>
</table>

<!-- 分页控件 -->
<div class="mt-3">
    <ul class="pagination">
        <!-- 上一页按钮 -->
        @if (Model.HasPreviousPage)
        {
            <li class="page-item">
                <a class="page-link" asp-action="Index" asp-route-page="@(Model.CurrentPage - 1)">上一页</a>
            </li>
        }
        else
        {
            <li class="page-item disabled">
                <span class="page-link">上一页</span>
            </li>
        }

        <!-- 页码按钮组 -->
        @for (int pageNum = 1; pageNum <= Model.TotalPages; pageNum++)
        {
            <li class="page-item @(pageNum == Model.CurrentPage ? "active" : "")">
                <a class="page-link" asp-action="Index" asp-route-page="@pageNum">@pageNum</a>
            </li>
        }

        <!-- 下一页按钮 -->
        @if (Model.HasNextPage)
        {
            <li class="page-item">
                <a class="page-link" asp-action="Index" asp-route-page="@(Model.CurrentPage + 1)">下一页</a>
            </li>
        }
        else
        {
            <li class="page-item disabled">
                <span class="page-link">下一页</span>
            </li>
        }
    </ul>
</div>

4. 常见问题排查 #

• 总页数计算错误：必须将总记录数转为double后再做除法，否则整数除法会丢弃小数部分，导致总页数少算。
• 视图模型属性拼写错误：检查视图中引用的Model属性是否与视图模型中的属性名称一致。
• 分页按钮路由失效：确保asp-action="Index"和asp-route-page正确生成URL，可通过浏览器开发者工具查看分页按钮的href属性是否正确。
• 分页控件被隐藏：检查页面CSS样式，避免display: none或其他样式导致分页控件不可见。

内容的提问来源于stack exchange，提问作者ahmed barbary