Como utilizar o X.PagedList.Mvc
com Core
e Bootstrap 4.0
, e assim criar uma paginação completa automática.
2 Respostas
Hoje venho trazer, uma forma de utilizar o X.PagedList.Mvc
com Core
e 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.
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: