How to make a pager without a gridview?

Asked

Viewed 108 times

1

I have a system in Asp net mvc, in one of the screens is displayed several items, the select to catch them from the bank is:

Select top 20 from Produtos

As demonstrated, it displays only the first twenty products. The products are rendered within several Ivs, powered by a foreach. Something like that:

foreach(var itens in produtos){
<div class="col-md-12">
<div class="col-md-6" id="produtos">
@itens.nomeProduto
</div>
</div>
}

But I wanted to bring all the products, and display only twenty, and make a kind of pager in the footer.

The question is, after I bring all the products, how can I get the first 20, and then the next 20, and then the next 20 and so on?

  • Wouldn’t it be interesting to do this through your consultation, bringing 20 at a time, rather than bringing everyone and paging 20 out of 20? I think it would relieve your request and also the Handler of this data. I don’t program in Asp, just like to put the idea.

  • The idea is the same. The next button should reload products calling the function and passing the offset to stay TOP 20 OFFSET 20will bring from 21 to 40

1 answer

2

Use the following package:

https://www.nuget.org/packages/PagedList.Mvc/

Use:

public ViewResult Index(int? pagina)
{
    var produtos = contexto.Produtos; //traga todos os produtos aqui

    var numeroDaPagina = pagina ?? 1; // Se for nulo, coloca na primeira.
    var umaPaginaDeProdutos = produtos.ToPagedList(numeroDaPagina, 20); // 20 produtos apenas

    ViewBag.UmaPaginaDeProdutos = umaPaginaDeProdutos;
    return View();
}

View:

@{
    ViewBag.Title = "Lista de Produtos"
}
@using PagedList.Mvc;
@using PagedList;

<h2>Lista de Produtos</h2>
@foreach(var item in ViewBag.UmaPaginaDeProdutos) {
    <div class="col-md-12">
        <div class="col-md-6" id="produtos">
            @item.nomeProduto
        </div>
    </div>
}

@* Navegador de Páginas *@
@Html.PagedListPager( (IPagedList)ViewBag.UmaPaginaDeProdutos, page => Url.Action("Index", new { pagina = page }) )

More example? https://github.com/TroyGoode/PagedList

Browser other questions tagged

You are not signed in. Login or sign up in order to post.