O JQuery oferece algumas opções para fazer suas solicitações AJAX com retorno JSON, neste post vamos analisar três opções, uma utilizando o método getJSON outra com método post e por fim uma com o método ajax.
Antes de começar os exemplos com JQuery precisamos preparar a aplicação no lado do servidor. Para o modelo vou utilizar o Entity Framework com o banco de dados Northwind , no EF vou manter todas as configurações padrão e vou utilizar a entidade Customers, após as configurações do EF podemos criar o “CustomersController”, conforme o código abaixo.
public class CustomersController : Controller
{
//
// GET: /Customers/
public ActionResult Index()
{
return View();
}
public ActionResult ActionGetJSON(string termo)
{
Entities context = new Entities();
var resultado = from customer in context.Customers
where customer.CompanyName.Contains(termo)
select new { CompanyName = customer.CompanyName, CustomerID = customer.CustomerID };
return Json(resultado, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult ActionPostJSON(string termo)
{
Entities context = new Entities();
var resultado = from customer in context.Customers
where customer.CompanyName.Contains(termo)
select new { CompanyName = customer.CompanyName, CustomerID = customer.CustomerID };
return Json(resultado);
}
}
Para montar os nosso exemplos vou utilizar as Actions “ActionGetJSON ” e “ActionPostJSON”, como você já deve ter percebido uma é acessada via GET e a outra via POST, note que a Action acessada via GET passa dois parâmetros para o método Json que é responsável pela serialização do objeto, se você não passar o segundo parâmetro indicando que o GET é permitido uma execption será lançada.
Agora podemos definir a view Index,veja o código abaixo.
<div>
<%=Html.TextBox("termo") %>
<button id="btnBuscarComGetJson">Buscar com método getJSON</button>
<button id="btnBuscarComPost">Buscar com método post</button>
<button id="btnBuscarComAjax">Buscar com método ajax</button>
</div>
<div id="resultado"></div>
Vamos definir os eventos onclick dos três botões abaixo, em um arquivo JavaScript separado do HTML, esse arquivo será criado no decorrer do post.
Método getJSON
O nome do método define o que ele faz, ele faz uma solicitação get e espera um retorno JSON, ele espera três parâmetros url,data e callback.O parâmetro url: define a url da solicitação,data: define os parâmetros da solicitação e callback: define a função que vai tratar o retorno do servidor, a função de callback será executada somente se a solicitação for executada com sucesso.
function btnBuscarComGetJson_click() {
$.getJSON("/customers/ActionGetJSON/", { termo: $("#termo").val() }, function(data) {
$("#resultado").empty();
$("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");
$(data).each(function() {
$("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
});
$("#resultado").append("</tbody></table>");
});
}
O código acima define o método que trata o evento onclick do botão “btnBuscarComGetJson”, a função de callback que foi definida de forma anônima escreve uma table dentro da DIV “resultado”.
Método post
Esse método também diz o que faz, ele faz uma solicitação post, você pode passar quatro parâmetros para esse método url,data,callback que já conhecemos e dataType.O parâmetro dataType defini o tipo de retorno, ele é um parâmetro opcional caso você não defina o tipo de retorno ele será identificado automaticamente.
function btnBuscarComPost_click() {
$.post("/customers/ActionPostJSON/", { termo: $("#termo").val() }, function(data) {
$("#resultado").empty();
$("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");
$(data).each(function() {
$("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
});
$("#resultado").append("</tbody></table>");
},"json");
}
O método acima define a função que vai tratar o evento onclick do botão “btnBuscarComPost”, ele é muito parecido com o método “getJSON”, a única diferença é o quarto parâmetro que foi definido como JSON.
Método ajax
O método ajax é o mais completo de todos, ele recebe apenas um parâmetro que é um objeto com todas configurações, para esse exemplo eu vou definir um objeto com sete propriedades, você pode ver a lista completa de opção na documentação http://api.jquery.com/jQuery.ajax/
function btnBuscarComAjax_click() {
$.ajax({
url: "/customers/ActionPostJSON/",
data: { termo: $("#termo").val() },
type:"post",
dataType: "json",
beforeSend: function(XMLHttpRequest) {
alert('Inicio....');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('Erro....');
},
success: function(data, textStatus, XMLHttpRequest) {
$("#resultado").empty();
$("#resultado").append("<table><thead><tr><th>Company Name</th><th>Customer ID</th></tr></thead><tbody id='bodyTable'>");
$(data).each(function() {
$("#bodyTable").append("<tr><td>" + this.CompanyName + "</td><td>" + this.CustomerID + "</td></tr>");
});
$("#resultado").append("</tbody></table>");
}
});
}
O método acima define a função que vai tratar o evento onclick do botão “btnBuscarComAjax”, o objeto de configuração passado como parâmetro para a função ajax possui sete propriedades:
url :define a url da solicitação.
data: defini os parâmetros.
type: define o tipo de solicitação os mais comuns são GET ou POST.
dataType: define o tipo de retorno os mais comuns são xml, json, script, ou html.
beforeSend: define a função que será executada antes da solicitação, você pode utilizar esse método para fazer confirmações e validações, essa função pode ser utilizada também para mostrar um modal com uma animação ou um simples “Aguarde…”.
error: define a função que será executada caso ocorra algum erro na solicitação.
success: define a função que vai tratar o resultado quando a função for executada com sucesso.
Para finalizar falta apenas adicionar o código que registra o evento click para os três botões.
$(document).ready(function() {
$("#btnBuscarComGetJson").click(btnBuscarComGetJson_click);
$("#btnBuscarComPost").click(btnBuscarComPost_click);
$("#btnBuscarComAjax").click(btnBuscarComAjax_click);
});
Acho que deu para perceber que o método ajax é o mais flexível de todos, a partir deste método você pode criar rotinas especificas para sua aplicação, por exemplo, você pode criar um método que utiliza o método ajax e colocar um loading padrão para todas solicitações, colocar uma mensagem de erro padrão,tratar o resultado de forma padrão em fim as possibilidades são muitas.
Os método getJSON e post são excelentes opções, mais por padrão eles não tem suporte a métodos auxiliares ,por exemplo, se eu quiser fazer algum tratamento antes das minhas solicitações ou tratar erros eles não possui definições para isso, você poderia utilizar métodos globais que o JQuery disponibiliza para resolver esse problema, mais isso é assunto para outro post.
Baixe aqui o fonte em C# ou VB.NET
Daniel Fonseca Castro
