如何使用CSS美化X.PagedList.Mvc.Core分页组件？

要美化X.PagedList的分页样式，我们可以通过自定义渲染选项+CSS样式的方式实现，具体步骤如下：

1. 自定义分页渲染选项 #

修改原有的PagedListPager调用代码，自定义渲染参数，给分页元素添加便于样式控制的CSS类，同时调整显示文本更贴合需求：

<div class="row">
    @Html.PagedListPager(permitPages, page => Url.Action("FindPermitNumber", "Permit", new { page = page }),
        new PagedListRenderOptions
        {
            // 控制分页按钮显示逻辑
            DisplayLinkToFirstPage = PagedListDisplayMode.Never,
            DisplayLinkToLastPage = PagedListDisplayMode.Never,
            DisplayLinkToPreviousPage = PagedListDisplayMode.Always,
            DisplayLinkToNextPage = PagedListDisplayMode.Always,
            // 显示页码计数
            DisplayPageCountAndCurrentLocation = true,
            PageCountAndCurrentLocationFormat = "第 {0} 页，共 {1} 页",
            // 给容器和元素添加自定义类
            UlElementClasses = new List<string> { "custom-pagination" },
            LiElementClasses = new List<string> { "page-item" },
            PageClasses = new List<string> { "page-link" },
            // 自定义按钮文本
            PreviousPageText = "上一页",
            NextPageText = "下一页",
            // 状态类
            ActiveLiElementClass = "active-page",
            DisabledLiElementClass = "disabled-page"
        })
</div>

2. 添加自定义CSS样式 #

根据上面定义的类名，编写CSS样式，实现美观的分页效果（示例为简洁的现代风格）：

/* 分页容器样式 */
.custom-pagination {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 分页项通用样式 */
.page-item {
    display: inline-block;
}

/* 分页链接样式 */
.page-link {
    padding: 8px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

/* 当前页高亮样式 */
.active-page .page-link {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* 禁用状态样式 */
.disabled-page .page-link {
    color: #999;
    pointer-events: none;
    background-color: #fafafa;
    border-color: #eee;
}

/* 页码计数文本样式 */
.page-item.pagination-info {
    padding: 8px 12px;
    color: #666;
    border: none;
}

效果说明 #

通过以上修改，分页会呈现出：

• 居中排列的布局
• 圆角边框的分页按钮
• hover时的背景变化
• 当前页高亮显示
• 禁用按钮的灰化状态
• 清晰的页码计数文本

你可以根据自己的UI设计需求，调整CSS中的颜色、间距、圆角等参数，适配项目的整体风格。

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