Esses dias atrás tive que implementar uma grid com JQuery e ASP NET MVC, fazendo uma breve pesquisa no “pai dos burros” encontrei algumas soluções interessantes com o o MVC Contrib, DataTables , porém as minhas grids js estavam todas prontas em HTML não queria ter o trabalho de refazer todas elas com um novo componente. Foi aí que surgiu a idéia de fazer uma requisição AJAX usando JQuery e retornar o resultado em JSON e renderizar uma grid em HTML.
1) Criando o controller
Primeiro de tudo temos que criar uma action que vai retornar um JSON, veja abaixo o código.
[sourcecode language=”csharp”]
[HttpPost]
public JsonResult GetAll()
{
try
{
List<PessoaModel> retorno = this.CriarLista();
return Json(retorno, JsonRequestBehavior.AllowGet);
}
catch (Exception exception)
{
return Json(new { msg = exception.Message });
}
}
[/sourcecode]
Linha 2: Veja que o retorno da action é um JsonResult
Linha 6: Recuperamos nossa lista de contatos, aqui estou criando a lista fixa, mas podemos consultar um BD, arquivo XML etc..
Linha 7: Retornamos a lista via JSON
Linha 11: Se ocorrer algum erro criamos uma tag msg para mostar na view
2) Criando a função JQuery
Agora vamos criar a função usando o JQuery para chamar nossa action e renderizar a nossa grid.
[sourcecode language=”js”]
$(document).ready(function () {
carregarGrid();
});
function carregarGrid(pagina) {
$.ajax({
url: ‘<%=Url.Content("~/Pessoa/GetAll/") %>’,
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).each(function () {
if (this.Id > 0) {
$("#bodyTable").append("<tr><td><a href=’Banco/Edit/" + this.Id + "’>Editar</a> | <a href=’Banco/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 2: Quando iniciar a página chamamos nossa função carregarGrid
Linha 6: Função ajax do JQuery
Linha 7: Chamamos nossa action GetAll
Linha 9: Especificamos que nosso retorno será JSON
Linha 15: Criamdo uma tabela com o header
Linha 17: Recuperamos o retorno e faço um laço para recuperar cada registro
Linha 19: Adicionando os dados na tabela
Veja o retorno em JSON
3) View – HTML
No HTML apenas adicionamos uma div onde o JQuery vai renderizar a grid
[sourcecode language=”html”]
<h2>Resgistros da Pessoa</h2>
<div id="resultado"></div>
[/sourcecode]
4) Resultado
Veja o resultado abaixo:
No próximo post vou explicar como fazer uma paginação nessa grid usando JQuery, não percam!!
Qualquer dúvida, opinião, reclamação mande seu comentário!
Um Abraço!
Bom dia Leandro ! Muito bom este post.
Valeu Thiago!!!
att,
Leandro Prado
Muito bom, está de parabééns !!!
Já até coloquei a página nos favoritos, vi que vai ser muito util !!
Obrigado
valeu Marcelo!!!
fico feliz que os posts estão sendo útil para o pessoal!!
att,
Leandro Prado
Ótimo post, foi direto ao assunto de forma clean. Parabéns!
Dica pra quem usa razor na view (MVC 3), na função js carregarGrid da view o parâmetro url fica assim: url: ‘@Url.Content(“~/Pessoa/GetAll/”)’,
abs