如何自定义PagedList.MVC设计？求助修改CSS类与HTML结构

针对你的需求，我整理了两种实用方案，分别适用于轻度样式调整和深度HTML结构定制：

一、轻度调整：修改默认CSS类（无需重构HTML） #

如果只是想替换或新增默认的CSS类，直接使用PagedListRenderOptions即可快速实现。你可以在视图中定义配置选项，再传给PagedListPager方法：

步骤1：定义分页配置选项 #

在你的Index.cshtml中添加以下代码块：

@{
    var customPagerOptions = new PagedListRenderOptions
    {
        // 修改外层容器div的类（默认是pagination-container）
        ContainerDivClasses = new List<string> { "my-custom-pager-container", "d-flex", "align-items-center" },
        // 修改ul标签的类（默认是pagination）
        UlElementClasses = new List<string> { "my-custom-pagination", "ms-3", "mb-0" },
        // 当前激活页li的类（默认是active）
        ActiveLiElementClasses = new List<string> { "current-page", "bg-primary", "text-white" },
        // 禁用状态li的类（比如上一页/下一页不可点击时）
        DisabledLiElementClasses = new List<string> { "disabled-page", "text-muted" },
        // 普通页码li的类
        PageClasses = new List<string> { "page-item" },
        // 页码链接a标签的类
        LinkClasses = new List<string> { "page-link", "px-3", "py-1" }
    };
}

步骤2：应用配置到分页器 #

把配置传入PagedListPager方法，替换原来的调用：

<span>Page</span> @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) <span>of</span> @Model.PageCount 
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter }), customPagerOptions)

这样生成的HTML就会带上你自定义的CSS类，直接编写对应样式即可生效。

二、深度定制：完全自定义HTML结构 #

如果需要彻底改变分页的HTML布局（比如把页码信息和分页器整合到同一个容器，或添加自定义元素），可以使用自定义模板视图的方式：

步骤1：创建自定义分页模板 #

在Views/Shared文件夹下新建一个部分视图，命名为_CustomPager.cshtml，内容可根据需求随意调整：

@model PagedList.IPagedList
@using PagedList.Mvc;

<div class="custom-pager-wrapper d-flex justify-content-between align-items-center">
    <!-- 自定义页码信息区域 -->
    <div class="page-info text-muted">
        Showing page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount (Total @Model.TotalItemCount items)
    </div>

    <!-- 自定义分页按钮区域 -->
    <ul class="custom-pagination list-unstyled d-flex gap-2 mb-0">
        <!-- 上一页按钮 -->
        @if (Model.HasPreviousPage)
        {
            <li>
                @Html.ActionLink("← Previous", "Index", new { page = Model.PageNumber - 1, currentFilter = ViewBag.CurrentFilter }, new { @class = "page-btn" })
            </li>
        }
        else
        {
            <li class="text-muted">← Previous</li>
        }

        <!-- 页码按钮 -->
        @foreach (var pageNum in Model.GetPageNumbers())
        {
            if (pageNum == Model.PageNumber)
            {
                <li class="active-page px-2 py-1 bg-primary text-white rounded">@pageNum</li>
            }
            else
            {
                <li>
                    @Html.ActionLink(pageNum.ToString(), "Index", new { page = pageNum, currentFilter = ViewBag.CurrentFilter }, new { @class = "page-btn px-2 py-1 rounded" })
                </li>
            }
        }

        <!-- 下一页按钮 -->
        @if (Model.HasNextPage)
        {
            <li>
                @Html.ActionLink("Next →", "Index", new { page = Model.PageNumber + 1, currentFilter = ViewBag.CurrentFilter }, new { @class = "page-btn" })
            </li>
        }
        else
        {
            <li class="text-muted">Next →</li>
        }
    </ul>
</div>

步骤2：调用自定义模板 #

回到Index.cshtml，替换原来的分页器调用，指定模板名称：

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter }), new PagedListRenderOptions { TemplateName = "_CustomPager" })

这样就完全由你控制分页的HTML结构和样式了，想加什么元素、怎么排版都可以自由定义。

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