Criar paginação em MVC asp.net C#

Olá pessoal!

Sexta-feira “brava” e eu fazendo post! hehehe. Pra terminar a semana, vou passar um tutorial muito útil que me fez quebrar a cabeça anos atrás.

É como criar uma paginação em MVC de maneira simples.

Bom, inicialmente vamos criar uma Model que vai definir os componentes da nossa paginação, veja nossa model :

 
 
 public class PaginacaoModel
    {
        public int PaginaAtual { get; protected set; }
        public int TotalRegistros { get; protected set; }
        public int RegistrosPorPagina { get; protected set; }
        public int TotalPaginas { get; protected set; }
        public int Inicio { get; protected set; }
        public int Final { get; protected set; }
        public string Link { get; protected set; }

        public PaginacaoModel(int paginaAtual, int totalRegistros, int registrosPorPagina, string link)
        {
            this.PaginaAtual = paginaAtual;
            this.TotalRegistros = totalRegistros;
            this.RegistrosPorPagina = registrosPorPagina;
            this.Link = link;

            SetTotalPaginas();
            SetInicioFimPagina();
        }

        #region Metodos Privados
        private void SetTotalPaginas()
        {
            int qtdePaginas;

            if ((this.TotalRegistros % this.RegistrosPorPagina) == 0)
                qtdePaginas = (this.TotalRegistros / this.RegistrosPorPagina);
            else
                qtdePaginas = (this.TotalRegistros / this.RegistrosPorPagina) + 1;

            this.TotalPaginas = qtdePaginas;
        }

        private void SetInicioFimPagina()
        {
            int i = 0;
            int af = 0;
            int f = 0;
            int ai = 0;

            if (this.PaginaAtual - 4 < 1)
            {
                i = 1;
                af = Math.Abs(this.PaginaAtual - 4) + 1;
            }
            else
                i = this.PaginaAtual - 4;

            if (this.PaginaAtual + 4 >= this.TotalPaginas)
            {
                f = this.TotalPaginas;
                ai = Math.Abs(this.TotalPaginas - this.PaginaAtual - 4);
            }
            else
                f = this.PaginaAtual + 4;

            if (af + f >= this.TotalPaginas)
                f = this.TotalPaginas;
            else
                f = f + af;

            this.Final = f;

            if (i - ai <= 0)
                i = 1;
            else
                i = i - ai;

            this.Inicio = i;
        }

        public bool PossuiAnterior
        {
            get
            {
                return (PaginaAtual > 1);
            }
        }

        public bool PossuiProxima
        {
            get
            {
                return (PaginaAtual < this.TotalPaginas);
            }
        }
        #endregion
    }
    
    

 

Com a nossa model criada, vamos criar uma partial view que vai definir nosso html :

@model namespacedoseuprojeto.Models.PaginacaoModel
           
@if (Model.TotalPaginas > 1)
{
<div class="paginacao">
    <ul class="menu-horizontal">
        <li><span class="paginas">Pág @Model.PaginaAtual de  @Model.TotalPaginas</span></li>
        @if (Model.PossuiAnterior)
        {
            <li><a class="static" href="@Model.Link&pagina=@(Model.PaginaAtual - 1)">  ◄ </a></li>
        }
        
        @for (int c = Model.Inicio; c <= Model.Final; c++)
        {
            if (c == Model.PaginaAtual)
            {
                <li><a class="active" href="#">@c.ToString()</a></li>    
            }
            else
            {
                <li><a href="@Model.Link&[email protected]()">@c.ToString()</a></li>    
            }
        }

        @if (Model.PossuiProxima)
        {
            <li><a class="static" href="@Model.Link&pagina=@(Model.PaginaAtual + 1)"> ► </a></li>
        }
    </ul>
</div>
}

 

Claro que não podemos esquecer de criar a chamada na controller:

       public ActionResult Index(int pagina = 1)
        {
            //metodo generico de busca
            Buscar(pagina);
            return View();
        }

        private readonly int _registrosPorPagina = 10;
        private void Buscar(int pagina)
        {
            int totalRegistros;

            //Realizar o seu método de busca com o parametro de paginação
            
            //instanciar sua paginação, colocando a action e controller desejada
            PaginacaoModel paginacao = new PaginacaoModel(pagina, totalRegistros, _registrosPorPagina, Url.Action("Action", "Controller"));
            ViewBag.Paginacao = paginacao;
        }

 

Vamos colocar alguns estilos css :

 
 .paginacao{width:100%;display:inline-block;overflow:hidden;height:25px;font:bold 12px Arial;}
 .paginacao .menu-horizontal {color:#1c69b1;}
 .paginacao .menu-horizontal .paginas {font:normal 14px Arial;display:block;margin:5px 20px 0 5px;}
 .paginacao .menu-horizontal .paginas static {font:normal 14px Arial;display:block;margin:0 20px 0 5px;}
 .paginacao .menu-horizontal a{border:1px solid #D2D2D2;border-radius:4px 4px 4px 4px;color:#333;display:block;box-shadow:0 0 3px #CDCDCFD;margin:0 4px;padding:4px;}
 .paginacao .menu-horizontal .active{color:#1C69B1;}

 

E claro pra terminar a nossa chamada na view :

 
 
 @Html.Partial("_Paginacao", (namespace.Models.PaginacaoModel)ViewBag.Paginacao)
   
   

E pronto!

Seu projeto já funciona com paginação e tudo mais! 😉

Ps: Para criação de métodos de paginação eu utilizei o LinqKit que é uma biblioteca que se encaixa muito bem para Entity, você pode dar uma olhada aqui.

Pessoal, até a próxima!

E não se esqueçam de dar aquela conferida na nossa Fã Page