JQuery com ASP NET MVC

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!!

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.