Para quem ainda não conhece JSON (JavaScript Object Notation) segue o link do site oficial http://www.json.org/ tudo que você precisa saber esta em uma pagina. JSON é mais uma opção para transporta dados na rede similar ao XML com a vantagem de ser muito menor, e com a desvantagem de ser de difícil compreensão aos olhos humanos, mais isso não chega a ser um problema afinal de contas geralmente os dados não são editados diretamente no arquivo XML ou JSON.

Para exemplificar como trabalhar com JSON em uma aplicação ASP.NET MVC vou construir uma aplicação com apenas uma View com recursos AJAX, para manipular o resultado vamos utilizar a framework JQuery e o banco de dados será o Northwnd velho conhecido de todos nós!

Vamos começar pelo Model da aplicação nesse exemplo vou utilizar o Entity Framework e vou trabalhar apenas com a tabela Customers. Crie uma aplicação do tipo ASP.NET MVC Web Application com a aplicação criada clique com direito na pasta Model seleciona a opção add>>new item em “categories” selecione a opção Data e em “tamplete” selecione a opção ADO.NET Entity Data Model, no Wizard selecione a opção Generate from database faça a conexão com o banco de dados e no ultimo passo selecione a tabela Customers.

Se você preferir pode utilizar L2S,ADO.NET,etc...

Vamos agora criar o nosso CustomerController, veja o código completo abaixo.

public class CustomerController : Controller
{
    NorthwndEntities db = new NorthwndEntities();
    //
    // GET: /Customer/

    public ActionResult Index()
    {
        return View();
    }


    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Buscar(string companyName)
    {
        try
        {
            var cutomers = from c in db.Customers
                           where c.CompanyName.Contains(companyName)
                           select new { c.CustomerID, c.CompanyName, c.City };

            return Json(cutomers);
        }
        catch
        {
            return View();
        }
    }
}

O código do CustomerController possui duas Actions Index e Buscar a Index simplesmente exibe a View Index . A action Buscar recebe como parâmetro o nome da companhia e faz um busca na tabela Customers o retorno da Action é do tipo JsonResult, nesse exemplo utilize o método Json da classe abstrata Controller ele simplesmente recebe um objeto e serializa o objeto no formato Json.

Vamos agora montar a view Index, para isso clique com o direito dentro da Action Index e selecione a opção Add View , veja as configurações da view na imagem abaixo.

Imagem 1 - Configurações da View Index.

Veja abaixo o código completo da View Index.

Imagem 2 - Código completo da View Index.

A View Index possui um formulário que foi construído com o Helper Ajax.BeginForm, em outro post expliquei como você pode criar um formulário com recursos AJAX veja aqui , e em outro mostrei todas configurações possíveis com a classe AjaxOptions veja aqui.Os dados do formulário da View Index serão submetidos para a Action Buscar conforme configurado na propriedade Url da classe AjaxOptions, essa View depende de quatro arquivos JavaScript, os arquivos MicrosoftAjax.js e MicrosoftMvcAjax.js são os arquivos da biblioteca da Microsoft necessários para construir o formulário com recurso AJAX , o Jquery-1.3.2.min.js é o arquivo da biblioteca do JQuery que vou utilizar para manipular o resultado da solicitação AJAX e o Customers.js foi adicionado ao projeto para deixar o código mais organizado, veja o código completo do arquivo abaixo.

Imagem 3 - Arquivo Customers.js

O código do arquivo Customers.js posui apenas o método Success, esse método recebe como parâmetro uma instância de classe que possui o método get_data() que foi utilizado para recuperar o retorno do servidor que nesse caso será do tipo JSON. O restante do código simplesmente monta uma tabela com os dados retornados para isso utilizei o JQuery.

O resultado pode ser visto na imagem abaixo.

Imagem 4 - Resultado esperado.

A DIV com o fundo azul exibe o conteúdo no formato JSON é na tabela você pode visualizar o conteúdo formatado.

Conclusão

Esse pequeno exemplo mostra como você pode recuperar dados em JSON e manipular de maneira muito simples com a ajuda do JQuery, no servidor também ficou muito simples retorna objetos serializados no formato JSON, você pode baixo o exemplo completo em C# ou VB.NET aqui.

Daniel Fonseca Castro