Paginação de GRID com ASP NET MVC e JQuery

Por muito tempo os programadores web, que usam o framework .NET, foram condicionados a usar os componentes criados pela Microsoft (GridView, TreeView, Validators, etc…) abrem a ToolBox pegam o mouse e arrastam o componente para o form, ligam alguns DataSources, DataSets e tudo sai funcionando como uma mágica, realmente essa metodologia foi uma revolução para os programadores que eram acostumados a trabalhar com Delphi, Visual Basic e queriam migrar para a Web, mas um dos problemas é que a maioria desses programadores não sabem o que realmente acontece por debaixo dos panos.

Um belo dia a Microsoft lança um framework chamado ASP NET MVC onde a view é puramente HTML, JS e JSON, aí a primeira pergunta dos programdores WebForm sempre fazem é:

Mas cade a GridView?? Como vou fazer a paginação dos meus registros??

A resposta é simples… no ASP NET MVC não existe GridView….PAM!!!!! ai começa o desespero….

Nesse post exemplifiquei como criar  uma Grid usando JQuery + JSON, hoje vou continuar esse mesmo exemplo adicionando paginação.

Primeiramente vamos criar uma procedure que será responsável por realizar a paginação no SQL Server

[sourcecode language=”sql”]
CREATE PROCEDURE [dbo].[USP_PESQUISAR_PESSOA]
(
@PAGINA INT,
@QTDE_REGISTROS_PAGINA INT,
@TOTAL_REGISTRO INT OUTPUT
)
AS
BEGIN

— OUTPUT
SET @TOTAL_REGISTRO=(SELECT COUNT(ID) FROM Pessoa);
WITH PAGING AS
(
SELECT ID, NOME, ENDERECO, CEP,
ROW_NUMBER() OVER (ORDER BY ID)AS ROWNUMBER
FROM PESSOA
)

SELECT ID, NOME, ENDERECO, CEP
FROM PAGING
WHERE ROWNUMBER BETWEEN (@PAGINA -1) * @QTDE_REGISTROS_PAGINA + 1
AND @PAGINA*@QTDE_REGISTROS_PAGINA;

END
[/sourcecode]

Agora vamos alterar nosso método CriarLista que está no controller PessoaController para chamar essa procedure passando os parametros

[sourcecode language=”csharp”]
private List<PessoaModel> CriarLista(int Pagina, int QtdePorPagina, ref int TotalPaginas)
{
List<PessoaModel> lstPessoa = new List<PessoaModel>();

SqlConnection _conn = new SqlConnection(STRING_CONEXAO);
_conn.Open();

SqlCommand StoredProcedureCommand = new SqlCommand("USP_PESQUISAR_PESSOA", _conn);
StoredProcedureCommand.CommandType = CommandType.StoredProcedure;

SqlParameter myParm1 = new SqlParameter();
myParm1.ParameterName = "@PAGINA";
myParm1.SqlDbType = SqlDbType.Int;
myParm1.Direction = ParameterDirection.Input;
myParm1.Value = Pagina;
StoredProcedureCommand.Parameters.Add(myParm1);

SqlParameter myParm2 = new SqlParameter();
myParm2.ParameterName = "@QTDE_REGISTROS_PAGINA";
myParm2.SqlDbType = SqlDbType.Int;
myParm2.Direction = ParameterDirection.Input;
myParm2.Value = QtdePorPagina;
StoredProcedureCommand.Parameters.Add(myParm2);

SqlParameter myParm3 = new SqlParameter();
myParm3.ParameterName = "@TOTAL_REGISTRO";
myParm3.SqlDbType = SqlDbType.Int;
myParm3.Direction = ParameterDirection.Output;
StoredProcedureCommand.Parameters.Add(myParm3);

SqlDataReader dr = StoredProcedureCommand.ExecuteReader();

while (dr.Read())
{
PessoaModel _obj = new PessoaModel();
_obj.Id = int.Parse(dr["id"].ToString());
_obj.Nome = dr["nome"].ToString();
_obj.Endereco = dr["endereco"].ToString();
_obj.CEP = int.Parse(dr["cep"].ToString());
lstPessoa.Add(_obj);
}
dr.Close();

_conn.Close();

TotalPaginas = (int)Math.Ceiling(int.Parse(myParm3.Value.ToString()) / (double)QtdePorPagina);
return lstPessoa;
}
[/sourcecode]

OBS: não estou preocupado com as melhores práticas de codificação, é apenas um exemplo!

Agora vamos alterar nosso método GetAll

[sourcecode language=”csharp”]
[HttpPost]
public JsonResult GetAll(string page)
{
try
{
int pagina = (String.IsNullOrEmpty(page)) ? 1 : int.Parse(page);
int TotalPaginas = 0;
List<PessoaModel> retorno = this.CriarLista(pagina, 2, ref TotalPaginas);
return Json(new { dados = retorno, totalPagina = TotalPaginas }, JsonRequestBehavior.AllowGet);
}
catch (Exception exception)
{
return Json(new { msg = exception.Message });
}
}
[/sourcecode]

Linha 6: Verificamos se a variável page é null ou vazia, se verdadeiro atribuimos 1 senão deixamos o valor original

Linha 7: Criamos uma varável para passar como referência, ela vai conter a quantidade de páginas

Linha 8: Chamamos o método passando os parametros

Linha 9: Retornamos via JSON a lista de registros mais a quantidade de páginas

Para realizar a paginação vamos usar um plugin do JQuery chamado JQuery Pager Plugin que pode ser baixado aqui, adicione os arquivos Pager.css e jquery.pager.js no projeto e adicione as referências na página.

Em nossa página Index temos que alterar o método carregaGrid adicionando a função que será responsável por criar a paginação

[sourcecode language=”js”]
function carregarGrid(pagina) {
$.ajax({
url: ‘<%=Url.Content("~/Pessoa/GetAll/") %>’,
data: { page: pagina },
type: "post",
dataType: "json",
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(‘Erro….’);
},
success: function (data, textStatus, XMLHttpRequest) {
$("#resultado").empty();
$("#resultado").append("<table class=\"tabela\" cellspacing=\"1\"><thead><tr><th style=\"width:190px;\">Opção</th><th>Id</th><th>Nome</th><th>Endereço</th><th>CEP</th></tr></thead><tbody id=’bodyTable’>");

$(data.dados).each(function () {
if (this.Id > 0) {
$("#pager").pager({ pagenumber: (pagina == undefined) ? 1 : pagina, pagecount: data.totalPagina, buttonClickCallback: PageClick });
$("#bodyTable").append("<tr><td><a href=’Pessoa/Edit/" + this.Id + "’>Editar</a> | <a href=’Pessoa/Details/" + this.Id + "’>Detalhes</a> | <a href=’#’ onclick=’Confirmar(" + this.Id + ");’>Deletar</a></td><td>" + this.Id + "</td><td>" + this.Nome + "</td><td>" + this.Endereco + "</td><td>" + this.CEP + "</td></tr>");
}
else {
$("#bodyTable").append(this.msg);
}
});

$("#resultado").append("</tbody></table>");
}
});
}
[/sourcecode]

Linha 15: Adicionamos a função responsável por exibir a paginação em uma div

  • pagenumber: é a página visivel, ou seja, a página atual
  • pagecount: é o total de páginas ser visualizada
  • buttonClickCallback: é o método que será chamado quando mudar de página

[sourcecode language=”js”]
PageClick = function (pageclickednumber) {
carregarGrid(pageclickednumber);
}
[/sourcecode]

Linha 2: Quando clicar na paginação chamamos a função carregaGrid passando a página que foi clicada.

Veja o resultado


Download do Projeto

Qualquer dúvida, opinião, reclamação mande seu comentário!

Um Abraço!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.