#Html.PagedListPager add a CSS class - asp.net-mvc

Question

I have just made a perfect paged list in MVC 5.
On each PagedListPager I want to add a CSS class:
#Html.PagedListPager(Model, page => Url.Action("Toetsstart",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
How can I do this?

Answer 1

Adding classes can be done in the PagedListRenderOptions like so:
#Html.PagedListPager(
model,
page => Url.Action("Index",
new
{
page,
sortOrder = ViewBag.CurrentSort,
currentFilter = viewBag.CurrentFilter
}
),
new PagedListRenderOptions()
{
LiElementClasses = new List<string> {"myClass", "yourClass"}
})
There are a number of places you can put classes, including:
LiElementClasses
ClassToApplyToFirstListItemInPager
ClassToApplyToLastListItemInPager
ContainerDivClasses
UlElementClasses

Answer 2

Use this overload of 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)
Then use the PagedListRenderOptions to pass in a class name for whatever element you need (ref: 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

If you would like X.PagedList Bootstrap 4 compatible just use:
#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

This way works for me:
#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" },
})
And also import on top of the page like this:
#using X.PagedList.Mvc.Core.Common;