如何在 PagedList.MVC 中自定义设计？

Question

谁能帮我在PagedList.MVC

中添加或更新CSS类和HTML

这是我的Index.cshtml

<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 }))

当我在浏览器中检查时，我得到的结果低于 Html

<div class="pagination-container">
    <ul class="pagination">
        <li class="active"><a>1</a></li>
        <li><a href="/abc/?page=2">2</a></li>
        <li class="PagedList-skipToNext"><a href="/abc/?page=2" rel="next">»</a></li>
    </ul>
</div>

而不是上面的 HTML 我需要这个 HTML

<div>
    <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>

Answer 1

如果您使用 X.PagedList（这是 troygoode 的 PagedList 的一个分支），您可以使用 PagedListRenderOptions 中的 PageClasses 选项。

以下是实现 Bootstrap 4 正在寻找的 类 的方法：

@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => 
    Url.Action("Index", new { page = page }), 
    new PagedListRenderOptions {
        LiElementClasses = new string[] { "page-item" },
        PageClasses = new string[] { "page-link" }
})

See documentation here.

Answer 2

这种方式适合我：

首先在页面顶部导入： @使用 X.PagedList.Mvc.Core.Common;

然后像这样使用：

   @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), new PagedListRenderOptions
               {                       
                        DisplayLinkToIndividualPages = true,
                        DisplayPageCountAndCurrentLocation = false,
                        MaximumPageNumbersToDisplay = 10,
                        LiElementClasses = new string[] { "page-item" },
                   PageClasses = new string[] { "page-link" },
                   
                    })