2

Como utilizar o X.PagedList.Mvc com Core e Bootstrap 4.0, e assim criar uma paginação completa automática.

2 Respostas 2

3

Hoje venho trazer, uma forma de utilizar o X.PagedList.Mvc com Coree Bootstrap 4.0:

Primeiramente temos que baixar o X.PagedList.Mvc.Core via NuGet.

Na VIEW Utilizaremos:

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

E aqui está o truque:

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

Dessa forma o @Html.PagedListPager, criará as novas classes que são necessárias para o Bootstrap 4.0.

E para finalizar, é so retornar o model com todos os dados necessários para View atráves do Controller.

Até mais e um abraço.

2

Extendendo a resposta do @Matheus, para o ASP .NET Framework funcionar corretamente é preciso retornar a liTag em vez da aTag da função FunctionToTransformEachPageLink, pois se não a lista é renderizada em <li>s, somente <a>s, ficando assim:

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

A utilização da model também fica um pouquinho diferente:

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

Tendo um resultado aproximado à este:

Preview dos itens de paginação

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .