Question

我刚刚在MVC 5中制作了一个完美的分页列表。在每个PagedListPager上我想添加一个CSS类：

@Html.PagedListPager(Model, page => Url.Action("Toetsstart",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

我该怎么做？

Answer 1

可以在PagedListRenderOptions中添加类，如下所示：

@Html.PagedListPager(
    model,
    page => Url.Action("Index",
    new
    {
        page,
        sortOrder = ViewBag.CurrentSort,
        currentFilter = viewBag.CurrentFilter
    }
    ),
    new PagedListRenderOptions()
    {
        LiElementClasses = new List<string> {"myClass", "yourClass"}
    })

您可以在很多地方放置课程，包括：

LiElementClasses
ClassToApplyToFirstListItemInPager
ClassToApplyToLastListItemInPager
ContainerDivClasses
UlElementClasses

Answer 2

使用PagedListPager（ref https://github.com/troygoode/PagedList/blob/master/src/PagedList.Mvc/HtmlHelper.cs）的重叠：

public static MvcHtmlString PagedListPager(this System.Web.Mvc.HtmlHelper html,
                                               IPagedList list,
                                               Func<int, string> generatePageUrl,
                                               PagedListRenderOptions options)

然后使用PagedListRenderOptions为您需要的任何元素传递类名（参考：https://github.com/TroyGoode/PagedList/blob/master/src/PagedList.Mvc/PagedListRenderOptions.cs）

public PagedListRenderOptions()
{
    ...
    ClassToApplyToFirstListItemInPager = null;
    ClassToApplyToLastListItemInPager = null;
    ContainerDivClasses = new [] { "pagination-container" };
    UlElementClasses = new[] { "pagination" };
    LiElementClasses = Enumerable.Empty<string>();
}

Answer 3

如果您希望X.PagedList 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" }
})

Answer 4

这种方式对我有用：

@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" },
})

并像这样在页面顶部导入：

@using X.PagedList.Mvc.Core.Common;

@ Html.PagedListPager添加一个CSS类

4 个答案: