in ASP.NET

Chamada Ajax com Json e ASP.NET MVC

Um dos melhores formatos para transmitir dados de maneira assíncrona na web é o Json (JavaScript Object Notation),  já que é nativo do JavaScript e possui menor overhead de separadores que em um XML por exemplo, alem disso, é facilmente tratado por funções JS.

A idéia deste post é demonstrar uma maneira simples de trabalhar com requisições assíncronas utilizando Json, jQuery e ASP.NET MVC.

Primeiro passo vamos criar um projeto no Visual Studio do tipo ASP.NET MVC 2

Este tipo de projeto é legal para estudos e demos pois ele já traz Scripts, Views e Controlers criados, entretanto é indicado ao começar um projeto novo usar o MVC 2 Empty Web Aplication.

Nosso exemplo fará um busca atravéz de um termo digitado em um textbox.

Vamos criar um input do tipo text na View Index do projeto, já com um evento chamando a função javascript que fará a chamada assíncrona e um paragrafo onde será retonado o resultado da busca:

ex: Index.aspx

<p>
    <input type="text" id="txtBusca" name="txtBusca"  onblur="buscaAjax();" />
</p>
<p>
<b>Resultado:</b>
</p>
<p id="resultado">
</p>

Agora vamos trabalhar como funcionará a resposta com o Json dos dados, neste exemplo eu nao usei nenhum banco de dados, criarei somente uma lista de contatos como retorno, a fim de exemplo.

No Controller da Home vamos criar a seguinte Action:

[HttpPost]
public ActionResult Busca(string termo)
{
    //Dados
    var pessoas = new List<Pessoa>();
    pessoas.Add(new Pessoa(){Nome = "Rodolfo",Sobrenome = "Fadino"});
    pessoas.Add(new Pessoa() { Nome = "Cleber", Sobrenome = "Dantas" });
    pessoas.Add(new Pessoa() { Nome = "Alexandre", Sobrenome = "Tarifa" });
    pessoas.Add(new Pessoa() { Nome = "Fernanda", Sobrenome = "Sallai" });
    pessoas.Add(new Pessoa() { Nome = "Eduardo", Sobrenome = "Cucharro" });

    //Consulta
    var resultado = (from c in pessoas
                        where c.Nome.ToLower().Contains(termo.ToLower())
                        select c).ToList();

    //Serialização para Json
    return Json(resultado);
}

Agora para finalizar vamos adicionar referência ao arquivo do jQuery, que pode ser feito na View ou na MasterPage (depende da estrutura do seu projeto)

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>

Agora podemos programar a chamada Ajax com jQuery para a Action de busca:

<script type="text/javascript">
function buscaAjax() {
$.ajax({
    url: "/home/busca/",
    data: { termo: $("#txtBusca").val() },
    type: "post",
    dataType: "json",
    beforeSend: function (XMLHttpRequest) {
        $("#resultado").empty();
        $("#resultado").append("inicio");
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#resultado").empty();
        $("#resultado").append("erro");
    },
    success: function (data, textStatus, XMLHttpRequest) {
        $("#resultado").empty();
        $(data).each(function () {
            $("#resultado").append("Nome: " + this.Nome + " Sobrenome:"
            + this.Sobrenome  + " <br/>");
        });
    }
});
}
</script>

Como podemos ver temos diversas opções de cofigurações, as principas são:

url : url da solicitação.
data: defini os parâmetros.
type: define o tipo de solicitação (ex: GET, 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 de enviar a requisição.
error: define a função que será executada caso ocorra erro na requisição.
success: define a função que trata o retorno dos dados da requisição.

A documentação completa do jQuery pode ser encontrada em: http://api.jquery.com/jQuery.ajax/

Com isso, ao digitar um termo e tirar o foco do input a busca será feita e o resultado inserido no paragrafo de resultado.

Bom espero que este post seja útil.

projeto para baixar

Estou a disposição para dúvidas, criticas e sugestões.

Obrigado.

Rodolfo.