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!