ASP.NET MVC, jQuery e JSON – Carregando dados assíncronamente

Requisições assíncronas já não são mais um diferencial nas aplicações Web, são uma necessidade. O ASP.NET MVC junto ao jQuery tem algumas facilidades para se trabalhar com este tipo de requisição.

por André Baltieri

Introdução

Requisições assíncronas já não são mais um diferencial nas aplicações Web, são uma necessidade. O ASP.NET MVC junto ao jQuery tem algumas facilidades para se trabalhar com este tipo de requisição.

Como o intuito dos próximos artigos sobre ASP.NET MVC 3 é abordar o que há de novo sobre JSON, este artigo exemplifica duas situações básicas que enfrentamos no dia-a-dia e que necessitamos de requisições assíncronas para resolvê-la.

Preenchendo um Drop Down List com JSON

Nesta primeira parte, vou mostrar como preencher um combo box utilizando uma chamada à um método do controller assincronamente. Coloquei esta parte em primeiro lugar, por que não vamos precisar dela posteriormente.

Para que a action seja invocada utilizando JSON, precisamos fazer alguns ajustes na mesma, como definir seu ActionResult para JsonResult, e colocar o atributo HttpGet, já que faremos este tipo de requisição à ação.

O código para esta action ficou assim:

   1: [HttpGet]

   2: public JsonResult GetCategories()

   3: {

   4:     JsonEntityDataModelContainer _db = new JsonEntityDataModelContainer();

   5:     List<Category> categories = _db.Categories.ToList<Category>();

   6:

   7:     return this.Json(new { Result = categories }, JsonRequestBehavior.AllowGet);

   8: }

Note que no retorno (return) temos o tipo como Json, e após informar os dados que serão retornados, temos a opção JsonRequestBehavior.AllowGet, que informa que esta action pode ser requisitada via GET.

Por fim, temos o jQuery, cujo eu separei a função que carrega o Drop Down List pois a mesma pode ser chamada outras vezes.

   1: $(document).ready(function () {

   2:     LoadCategories();

   3: })

   4:

   5: // Listar categorias

   6: function LoadCategories() {

   7:     $("#CategoriesDropDownList").html("");     

   8:     // /<CONTOLLER>/<ACTION>     

   9:     $.getJSON("/Product/GetCategories", null, function (data) {               

  10:         $.each(data.Result, function (index, category) {                   

  11:             $("#CategoriesDropDownList").append("<option value="" + category.Id + "">" + category.Titlle + "</option>");

  12:         });

  13:     })

  14: }

O método é simples, temos a chamada do objeto $.getJSON e passamos os seguintes parâmetros:

• URL – Caminho de onde os dados serão inseridos ou recuperados
• Dados – Dados a serem enviados (Neste caso não vamos enviar dados)
• Function – Função onde poderemos manipular o retorno da URL.

Após isto, na função utilizamos o $each para percorrer todos os dados retornados pelo método GetCategories() e adicioná-lós ao combo box.

Então temos o combo box preenchido.

Situação real de uso do JSON

Bom, vamos ao que interessa… Onde vamos utilizar isto? Vamos imaginar uma situação básica, onde temos um catalogo de jogos (Sim, jogos para XBOX) e cada jogo possui uma categoria.

Ao incluir um jogo, devemos selecionar a categoria do mesmo, porém, em alguns casos, a categoria não estará cadastrada, e haverá a necessidade de cadastra-lá antes de proceder com o cadastramento do jogo.

Neste caso, o que podemos fazer é redirecionar o usuário para página de cadastro de categorias, adicionar esta categoria e retorna-ló para página de cadastro de jogos, fazendo-o perder todos os dados que havia digitado sobre o jogo antes. BRINCADEIRA!!!!

O que iremos fazer é mostrar um popup utilizando jQuery UI com os dados para inserir uma nova categoria, e então, de forma assíncrona (Sem recarregar a página) esta categoria será inserida e a lista de categorias atualizadas.

O modelo da aplicação ficará assim.

São duas entidades simples, apenas Id e Title (Fiquem à vontade em adicionar novos campos).

O segundo passo será criar a ViewModel, para isto, adicionei uma nova pasta na raiz da aplicação chamada de ViewModels e adicionei o arquivo (Listado abaixo) GameCreateViewModel.cs.

   1: using System.Collections.Generic;

   2: using MyGamesCatalog.Models;

   3:

   4: namespace MyGamesCatalog.ViewModels

   5: {

   6:     public class GameCreateViewModel

   7:     {

   8:         public Game Game { get; set; }

   9:         public List<Category> Categories { get; set; }

  10:     }

  11: }

Vamos então criar o controller para os Games.

   1: public ActionResult Create(Game game)

   2: {

   3:     GameCreateViewModel gameCreateViewModel = new GameCreateViewModel();

   4:     gameCreateViewModel.Categories = _db.Categories.ToList<Category>();

   5:

   6:     return View(gameCreateViewModel);

   7: }

   1: public JsonResult SaveCategory(Category category)

   2: {

   3:     _db.AddToCategories(category);

   4:     _db.SaveChanges();

   5:

   6:     return Json(

   7:         new {

   8:             Result = (from cat in _db.Categories where cat.Title == category.Title select cat).First<Category>()

   9:         });

  10: }

Por hora, vamos nos atentar ao método SaveCategory, que será chamado assíncronamente e tem a função de inserir uma categoria no banco e em seguida retornar a mesma. E o método Create onde passamos o GameCreateViewModel com as categorias preenchidas.

Vamos então à View, que será criada a partir do ViewModel GameCreateViewModel (Strongly-Typed).

Agora começam os desafios.
Primeiro, vamos criar os campos, sem nos preocupar com jQuery e jSON.

O código HTML fica assim

Somente devemos nos atentar aos nomes (Id) do link que abrirá a janela de inclusão de categoria, o nome da div onde a resposta do JSON será mostrada e o nome do combo box das categorias.

Ao rodar a aplicação termos o seguinte layout

Copie então o jQuery UI (Eu também aproveitei e baixei a versão 1.4.2 do jQuery) para dentro da pasta scripts, e referencie os mesmos na página Site.Master, como mostrado abaixo.

Abrindo um modal popup com jQuery UI

Voltamos então para página Create.aspx, e vamos criar o script para abrir um formulário para cadastro de categorias utilizando o Modal Dialog do jQuery UI.

O que temos que fazer aqui é criar uma DIV com um formulário, e depois via jQuery requisitar utilizando o jQUery UI que esta DIV seja mostrada como um dialog.

O código HTML fica assim:

Note que temos um botão, cujo evento OnClick chama uma função chamada SaveCategory() que iremos criar daqui a pouco.

Deste modo, já estamos prontos para fazer com que esta div seja mostrada como um modal dialog, adicionando o seguinte script à página.

   1: <script type="text/javascript">

   2:     // Modal popup

   3:     $(function () {

   4:         $("#dialog").dialog("destroy");

   5:

   6:         $("#categories-dialog-modal").dialog({

   7:             autoOpen: false,

   8:             height: 140,

   9:             modal: true,

  10:             hide: "blind",

  11:             draggable: true

  12:         });

  13:         $("#catopener").click(function () {

  14:             $("#categories-dialog-modal").dialog("open");

  15:             return false;

  16:         });

  17:     });

  18: </script>

Importante ressaltar o quão fácil é configurar este pop up, vejam pelas propriedades.

Assim, quando executarmos a página e clicarmos sobre o link “Adicionar uma categoria” teremos o modal sendo exibido na tela.

Invocando o método Save do Controller Game via JSON

Agora vem a parte principal, que é invocar o método Save() do controller Game via JSON, atualizar a lista de categorias e fechar o pop up de categorias, e tudo isso de forma assíncrona.

O $.post se encarregará de enviar o objeto para URL que informarmos, e funcionará de forma parecida ao $getJSON. Como no retorno do método SaveCategory() retornávamos a categoria recém adicionada, também utilizaremos este retorno para adicioná-la (Append) ao combo box.

A listagem abaixo mostra a função SaveCategory().

   1: // Salvar categoria

   2: function SaveCategory() {

   3:     var formData = $("#frmCategory").serializeArray();

   4:

   5:     $.post("/Game/SaveCategory",

   6:         formData,

   7:         function (data) {

   8:             $("#category-response").html("Categoria " + data.Result.Titlle + " adicionada com sucesso!");

   9:             $("#CategoriesDropDownList").append("<option value="" + data.Result.Id + "" selected>" + data.Result.Title + "</option>");

  10:         }, "json");

  11:

  12:     $("#categories-dialog-modal").dialog("close");

  13: };

Deste modo, quando rodarmos a aplicação, teremos o seguinte.

Desta forma, resolvemos o problema da adíção assíncrona de categorias.
Agora salve o jogo (Save Game) e seja feliz =)

Conclusão

Podemos utilizar a práticidade do jQuery, jSON e ASP.NET MVC para resolver problemas que enfrantamos no dia-a-dia de forma simples e com grande ganho de usabilidade ao usuário.

Podemos fazer requisições via POST e GET com JSON via jQuery e obter retorno do mesmo. Tudo isso de forma assíncrona.

Até o próximo artigo!