如何实现数据库产品列表的分页功能？附现有单页实现代码

嘿，我来帮你搞定这个分页需求！在ASP.NET MVC里实现分页其实挺直观的，我给你拆解成几个实操步骤：

1. 改造Controller的Index方法，支持分页参数 #

首先得让Action接收当前页码和每页条数的参数，然后用LINQ的Skip()和Take()来精准获取对应页的数据，同时计算总条数，这样前端才能生成分页导航控件。

修改后的代码示例：

public ActionResult Index(int page = 1, int pageSize = 10) // 默认第1页，每页10条数据
{
    var allProducts = productsRepository.GetAll();
    // 计算产品总条数
    var totalProductCount = allProducts.Count();
    // 分页截取数据
    var paginatedProducts = allProducts
        .Skip((page - 1) * pageSize)
        .Take(pageSize);
    
    // 映射到视图模型（和你原来的逻辑一致）
    IEnumerable<Models.Product> productsView = paginatedProducts.Select(p => new Models.Product() 
    { 
        Id = p.Id, 
        Category = p.Category.Name, 
        Brand = p.Brand, 
        Name = p.Name, 
        Type = p.Type, 
        IsActive = p.IsActive, 
        SellPrice = p.SellPrice, 
        AddedDate = p.AddedDate 
    });
    
    // 把分页信息传给视图，这里用ViewBag临时存储，复杂项目建议用专门的ViewModel
    ViewBag.TotalPages = (int)Math.Ceiling(totalProductCount / (double)pageSize);
    ViewBag.CurrentPage = page;
    ViewBag.PageSize = pageSize;
    
    return View(productsView);
}

2. 在View中添加分页导航控件 #

在你的Index视图里，完成产品列表渲染后，添加上下页、页码按钮的分页控件：

<!-- 这里是你原来的产品列表循环渲染代码 -->
@foreach (var product in Model)
{
    <!-- 你的产品项展示逻辑 -->
}

<!-- 分页导航区域 -->
<div class="pagination-container">
    <!-- 上一页按钮 -->
    @if (ViewBag.CurrentPage > 1)
    {
        @Html.ActionLink("← 上一页", "Index", new { page = ViewBag.CurrentPage - 1, pageSize = ViewBag.PageSize })
    }
    
    <!-- 页码按钮组 -->
    @for (int i = 1; i <= ViewBag.TotalPages; i++)
    {
        if (i == ViewBag.CurrentPage)
        {
            <span class="current-page-btn">@i</span>
        }
        else
        {
            @Html.ActionLink(i.ToString(), "Index", new { page = i, pageSize = ViewBag.PageSize })
        }
    }
    
    <!-- 下一页按钮 -->
    @if (ViewBag.CurrentPage < ViewBag.TotalPages)
    {
        @Html.ActionLink("下一页 →", "Index", new { page = ViewBag.CurrentPage + 1, pageSize = ViewBag.PageSize })
    }
</div>

3. 进阶优化：使用专门的分页ViewModel（可选） #

如果你的项目复杂度较高，建议创建一个封装了分页信息和产品数据的ViewModel，代码会更规范易维护：

// 新建分页ViewModel类
public class PaginatedProductsViewModel
{
    public IEnumerable<Models.Product> Products { get; set; }
    public int CurrentPage { get; set; }
    public int TotalPages { get; set; }
    public int PageSize { get; set; }
}

然后修改Controller的Index方法：

public ActionResult Index(int page = 1, int pageSize = 10)
{
    var allProducts = productsRepository.GetAll();
    var totalCount = allProducts.Count();
    var paginatedProducts = allProducts
        .Skip((page - 1) * pageSize)
        .Take(pageSize)
        .Select(p => new Models.Product() 
        { 
            // 字段映射和之前一致
            Id = p.Id, 
            Category = p.Category.Name, 
            Brand = p.Brand, 
            Name = p.Name, 
            Type = p.Type, 
            IsActive = p.IsActive, 
            SellPrice = p.SellPrice, 
            AddedDate = p.AddedDate 
        });
    
    var viewModel = new PaginatedProductsViewModel
    {
        Products = paginatedProducts,
        CurrentPage = page,
        TotalPages = (int)Math.Ceiling(totalCount / (double)pageSize),
        PageSize = pageSize
    };
    
    return View(viewModel);
}

对应的View也要改成强类型：

@model YourProjectNamespace.PaginatedProductsViewModel

<!-- 产品列表渲染 -->
@foreach (var product in Model.Products)
{
    <!-- 产品项展示逻辑 -->
}

<!-- 分页导航 -->
<div class="pagination-container">
    @if (Model.CurrentPage > 1)
    {
        @Html.ActionLink("← 上一页", "Index", new { page = Model.CurrentPage - 1, pageSize = Model.PageSize })
    }
    
    @for (int i = 1; i <= Model.TotalPages; i++)
    {
        if (i == Model.CurrentPage)
        {
            <span class="current-page-btn">@i</span>
        }
        else
        {
            @Html.ActionLink(i.ToString(), "Index", new { page = i, pageSize = Model.PageSize })
        }
    }
    
    @if (Model.CurrentPage < Model.TotalPages)
    {
        @Html.ActionLink("下一页 →", "Index", new { page = Model.CurrentPage + 1, pageSize = Model.PageSize })
    }
</div>

几个注意点 #

• 如果你的productsRepository.GetAll()返回的是IQueryable（比如Entity Framework的DbSet），Skip()和Take()会被转换成SQL的分页语句，性能很好；如果是IEnumerable，那就是内存分页，数据量大时要注意性能问题。
• 可以给pageSize加个范围限制（比如最大50条），防止用户传入过大数值导致页面加载缓慢。
• 可以给分页控件加CSS样式，让它更美观易用。

内容的提问来源于stack exchange，提问作者Farcașanu Vasile