ASP.NET MVC C#内置SQL数据库实现排序与分页求助

一、先搞定排序功能 #

1. 后端Controller处理排序逻辑 #

在你的CustomerController的Index方法里，添加排序参数，用LINQ根据参数调整排序规则，同时把当前排序状态传给前端：

public ActionResult Index(string sortOrder)
{
    // 用ViewBag存当前排序状态和下一次切换的参数
    ViewBag.CurrentSort = sortOrder;
    ViewBag.NameSortParam = string.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
    ViewBag.PhoneSortParam = sortOrder == "phone_asc" ? "phone_desc" : "phone_asc";

    var customers = from c in db.Customers
                   select c;

    // 根据sortOrder参数排序
    switch (sortOrder)
    {
        case "name_desc":
            customers = customers.OrderByDescending(c => c.CustomerName);
            break;
        case "phone_asc":
            customers = customers.OrderBy(c => c.PhoneNumber);
            break;
        case "phone_desc":
            customers = customers.OrderByDescending(c => c.PhoneNumber);
            break;
        default: // 默认按姓名升序
            customers = customers.OrderBy(c => c.CustomerName);
            break;
    }

    return View(customers.ToList());
}

2. 前端Index.cshtml加排序表头链接 #

把表格的表头改成可点击的链接，点击时传递排序参数：

<table class="table">
    <thead>
        <tr>
            <th>
                <a asp-action="Index" asp-route-sortOrder="@ViewBag.NameSortParam">客户姓名</a>
                <!-- 可选：加小图标显示当前排序方向 -->
                @if(ViewBag.CurrentSort == "" || ViewBag.CurrentSort == "name_desc")
                {
                    @(ViewBag.CurrentSort == "" ? " ↑" : " ↓")
                }
            </th>
            <th>
                <a asp-action="Index" asp-route-sortOrder="@ViewBag.PhoneSortParam">联系电话</a>
                @if(ViewBag.CurrentSort == "phone_asc" || ViewBag.CurrentSort == "phone_desc")
                {
                    @(ViewBag.CurrentSort == "phone_asc" ? " ↑" : " ↓")
                }
            </th>
            <!-- 其他字段同理 -->
            <th>操作</th>
        </tr>
    </thead>
    <!-- 表格内容部分保持原有逻辑不变 -->
</table>

二、再实现分页（每页10条） #

咱们用PagedList组件，新手友好，不用自己写复杂的分页逻辑：

1. 安装NuGet包 #

打开NuGet包管理器控制台，运行两个命令：

Install-Package PagedList
Install-Package PagedList.Mvc

2. 修改Controller的Index方法，加入分页逻辑 #

把之前的返回结果改成IPagedList，同时接收页码参数：

using PagedList; // 别忘了添加这个命名空间

public ActionResult Index(string sortOrder, int? page)
{
    // 复制之前的排序逻辑
    ViewBag.CurrentSort = sortOrder;
    ViewBag.NameSortParam = string.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
    ViewBag.PhoneSortParam = sortOrder == "phone_asc" ? "phone_desc" : "phone_asc";

    var customers = from c in db.Customers
                   select c;

    switch (sortOrder)
    {
        case "name_desc":
            customers = customers.OrderByDescending(c => c.CustomerName);
            break;
        case "phone_asc":
            customers = customers.OrderBy(c => c.PhoneNumber);
            break;
        case "phone_desc":
            customers = customers.OrderByDescending(c => c.PhoneNumber);
            break;
        default:
            customers = customers.OrderBy(c => c.CustomerName);
            break;
    }

    // 分页逻辑：默认第1页，每页10条
    int pageSize = 10;
    int pageNumber = (page ?? 1);
    return View(customers.ToPagedList(pageNumber, pageSize));
}

3. 修改Index.cshtml适配分页 #

首先在页面顶部加命名空间引用，然后把模型改成IPagedList<YourCustomerModel>，最后在表格下面加分页控件：

@model PagedList.IPagedList<YourProjectName.Models.Customer> <!-- 替换成你的客户模型路径 -->
@using PagedList.Mvc; <!-- 添加这个命名空间 -->

<!-- 表格部分和之前的排序代码保持一致 -->

<!-- 分页控件，放在表格下方 -->
<div class="pagination">
    @Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort }))
</div>

常见坑提醒 #

• 分页必须先排序，再分页：如果先分页再排序，只会对当前页的数据排序，结果不符合预期。
• 分页时要带上排序参数：不然点下一页会丢失当前的排序状态，上面的代码已经通过new { page, sortOrder = ViewBag.CurrentSort }处理了这个问题。
• 模型要改成IPagedList：不然前端会报错，记得替换成你自己的客户模型类。

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