X.PagedList.Mvc with Core and Bootstrap 4.0

Question

How to use the X.PagedList.Mvc with Core and Bootstrap 4.0, and thus create a full automatic pagination.

Answer 1

Today I bring, a way to use the X.PagedList.Mvc with Coreand Bootstrap 4.0:

First we have to download the X.PagedList.Mvc.Core via Nuget.

In the VIEW We will use:

@using X.PagedList.Mvc.Core
@model X.PagedList.StaticPagedList<"Seu Model">

And here’s the trick:

<div>
    <div style="float: right">
        Página @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
    </div>

    <div class="justify-content-center">
        @Html.PagedListPager(Model, pagina => Url.Action("Index", new { search = ViewBag.Busca, pagina }), new PagedListRenderOptions { FunctionToTransformEachPageLink = (liTag, aTag) => { aTag.Attributes.Add("class", "page-link".ToString()); return aTag; }, LiElementClasses = new[] { "page-item" }, UlElementClasses = new[] { "pagination  justify-content-center" } })
    </div>
</div>

Thus the @Html.PagedListPager, will create the new classes that are required for Bootstrap 4.0.

And finally, just return the model with all the data needed for View through the Controller.

See you later and a hug.

Answer 2

Extending @Matheus' response to ASP . NET Framework To function correctly, you must return to liTag instead of aTag of function FunctionToTransformEachPageLink, because if not the list is rendered in <li>s, only <a>s, getting like this:

<div>Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount</div>

@Html.PagedListPager(
    Model,
    page => Url.Action("Index", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }),
    new PagedListRenderOptions {
        FunctionToTransformEachPageLink = (liTag, aTag) =>
        {
            aTag.Attributes.Add("class", "page-link");
            liTag.InnerHtml = aTag.ToString();
            return liTag;
        },
        LiElementClasses = new[] { "page-item" },
        UlElementClasses = new[] { "pagination justify-content-center" } }
)

The use of the model is also a little different:

@model PagedList.IPagedList<"Seu Model">
@using PagedList.Mvc

Having a result approximate to this: