Convertendo objetos para o padrão JSON em Views do ASP.NET MVC

Convertendo objetos para o padrão JSON em Views do ASP.NET MVC



O objetivo deste artigo é descrever como objetos podem ser convertidos para o formato JSON, com isto acontecendo a partir de Views do ASP.NET MVC.

Introdução

A construção de Views em projetos ASP.NET MVC implica, quase que invariavelmente, na utilização de instruções em jQuery para a implementação de eventos e efeitos dinâmicos. Muitos plugins e frameworks surgidos a partir desta biblioteca empregam extensivamente o padrão JSON, com isto acontecendo geralmente em operações que envolvem a manipulação de informações sob a forma de objetos. Logo, não é novidade nenhuma que a codificação de Views em aplicações MVC também exige um bom conhecimento no que se refere ao padrão JSON como alternativa para representação de dados.

Manipulando informações no padrão JSON no ASP.NET MVC

Uma das formas mais comuns de utilização de JSON em soluções MVC passa pela implementação de Actions que produzem como retorno instâncias do tipo JsonResult. Os resultados de tais métodos serão então consumidos em trechos de código escritos em jQuery. Para ilustrar este cenário, será tomado como base uma classe que armazena informações de cunho geral a respeito de um país (nome, continente, capital, código telefônico):

using System;
 
namespace TesteMVCxJSON.Models
{
    public class Pais
    {
        public string Nome { get; set; }
        public string Continente { get; set; }
        public string Capital { get; set; }
        public string CodigoTelefonico { get; set; }
    }
}

OBSERVAÇÃO: os exemplos apresentados nesta seção foram implementados utilizando o ASP.NET MVC 5.2.2, a partir do Visual Studio 2013 Update 3.

Quanto à Action que retornará dados no formato JSON, um exemplo deste tipo de construção está detalhado na próxima listagem. Foi especificado no Controller PaisController um método chamado DadosPaisAtual, o qual irá gerar uma nova referência de JsonResult através de uma instância da classe Pais (com esta última sendo obtida por meio de uma chamada ao método Json):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TesteMVCxJSON.Models;
 
namespace TesteMVCxJSON.Controllers
{
    public class PaisController : Controller
    {
        [HttpGet]
        public ActionResult DadosPaisAtual()
        {
            Pais pais = new Pais()
                        {
                            Nome = "Brasil",
                            Continente = "América do Sul",
                            Capital = "Brasília",
                            CodigoTelefonico = "55"
                        };
  
            return this.Json(
                pais, JsonRequestBehavior.AllowGet);
        }
    }
}

A Action DadosPaisAtual (Controller PaisController) será então invocada a partir da View Index.cshtml, que está associada ao Controller HomeController (cuja definição está indicada na listagem seguinte. Analisando o código desta View é possível notar:
  • O método ready, executado durante o carregamento da página HTML. Tal função acionará a Action DadosPaisAtual, por meio da instrução “$.getJSON”.
  • O método $.getJSON recebe como parâmetros uma URL para acessar a Action DadosPaisAtual, além de uma outra função (no caso “exibirInformacoesPais”) criada para o tratamento dos dados obtidos no formato JSON;
  • Assim que a instrução $.getJSON enviar uma requisição HTTP e obter um retorno da Action DadosPaisAtual, o método exibirInformacoesPais será acionado automaticamente. Esta função recebe como parâmetro um objeto no formato JSON contendo informações gerais a respeito de um país, com tais dados sendo exibidos através de uma mensagem de alerta.
<div class="jumbotron">
    <h1>ASP.NET MVC x JSON</h1>
    <p><a href="http://asp.net/mvc"
          class="btn btn-primary btn-lg">Saiba mais »</a></p>
</div>
 
<div style="padding: 80px;">
    <h3>
        Aplicação criada com o objetivo de demonstrar a conversão de
        de objetos para o padrão JSON em Views do ASP.NET MVC.
    </h3>
</div>
 
@section scripts{
 
    <script type="text/javascript">
 
        $(document).ready(function () {
            var urlAction = '@Url.Action("DadosPaisAtual", "Pais")';
            $.getJSON(urlAction, exibirInformacoesPais);
        });
 
        function exibirInformacoesPais(dadosPais) {
            alert("País: " + dadosPais.Nome + "\n" +
                  "Continente: " + dadosPais.Continente + "\n" +
                  "Capital: " + dadosPais.Capital + "\n" +
                  "Código Telefônico: " + dadosPais.CodigoTelefonico);
        }
 
    </script>
 
}

Ao acionar a View Index.cshtml via Internet Explorer, será possível observar a exibição de uma mensagem como indicado na próxima figura:



Algumas ponderações devem ser feitas no que se refere à implementação de Actions que retornem dados no formato JSON. A adoção de tal prática se justifica caso diferentes pontos de uma aplicação precisem acessar uma mesma Action. Se este não for o caso, a criação de Controllers e Actions para tratar pontualmente dados em JSON poderá resultar em um aumento desnecessário na complexidade de um projeto.

Levando em conta tudo o que foi exposto até este ponto, é importante destacar a existência uma alternativa mais simples ao uso de Actions para a manipulação de informações no formato JSON. A solução para isto passa pela utilização do objeto dinâmico View, como demonstrado na implementação do Controller HomeController; uma instância do tipo Pais está senda associada a um novo item (DadosBrasil), com esse último estando vinculado à propriedade ViewBag:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TesteMVCxJSON.Models;
 
namespace TesteMVCxJSON.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.DadosBrasil =
                new Pais()
                {
                    Nome = "Brasil",
                    Continente = "América do Sul",
                    Capital = "Brasília",
                    CodigoTelefonico = "55"
                };
 
            return View();
        }
 
        public ActionResult About()
        {
            return View();
        }
 
        public ActionResult Contact()
        {
            return View();
        }
    }
}

Na próxima listagem encontra-se o código da View Index.cshtml já alterado. Conforme é possível observar:
  • O método ready foi modificado, de forma a acessar diretamente a função exibirInformacoesPais;
  • Quanto ao método exibirInformacoesPais, esta função recebe como parâmetro o objeto associado ao elemento “DadosBrasil” da propriedade ViewBag. O objeto em questão está sendo convertido através do uso dos métodos Json.Encode (que transforma instâncias em .NET para uma representação string no formato JSON) e Html.Raw (que serializa a string JSON em um formato capaz de ser manipulado por código escrito em jQuery/JavaScript).
<div class="jumbotron">
    <h1>ASP.NET MVC x JSON</h1>
    <p><a href="http://asp.net/mvc"
          class="btn btn-primary btn-lg">Saiba mais »</a></p>
</div>
 
<div style="padding: 80px;">
    <h3>
        Aplicação criada com o objetivo de demonstrar a conversão de
        de objetos para o padrão JSON em Views do ASP.NET MVC.
    </h3>
</div>
 
@section scripts{
 
    <script type="text/javascript">
 
        $(document).ready(function () {
            exibirInformacoesPais(
                @Html.Raw(Json.Encode(ViewBag.DadosBrasil)));
        });
 
        function exibirInformacoesPais(dadosPais) {
            alert("País: " + dadosPais.Nome + "\n" +
                  "Continente: " + dadosPais.Continente + "\n" +
                  "Capital: " + dadosPais.Capital + "\n" +
                  "Código Telefônico: " + dadosPais.CodigoTelefonico);
        }
 
    </script>
 
}

Conclusão

Conforme detalhado ao longo deste artigo, o uso dos HTML Helpers Html.Raw e Json.Encode simplifica em muito a manipulação de informações no padrão JSON. Tomando como base os exemplos aqui apresentados, é importante ressaltar ainda que o conteúdo vinculado à propriedade Model (em uma View fortemente tipada) também poderia ser convertido para JSON sem maiores dificuldades.

Contudo, a opção por essa alternativa deve levar em conta questões como a possibilidade de duplicação de código em um projeto ASP.NET MVC. Se diferentes pontos de uma aplicação dependerem dos mesmos dados no formato JSON, a implementação de Actions baseadas no tipo JsonResult é ainda a solução mais adequada.

Referências

ASP.NET MVC
http://www.asp.net/mvc

HtmlHelper.Raw Method (String)
http://msdn.microsoft.com/en-us/library/gg480740(v=vs.118).aspx

Json.Encode Method
http://msdn.microsoft.com/en-us/library/system.web.helpers.json.encode(v=vs.111).aspx

JsonResult Class
http://msdn.microsoft.com/en-us/library/system.web.mvc.jsonresult(v=vs.118).aspx
Classificar por: Data da Publicação | Mais Recente | Mais Úteis
Comentários
  • Valeu Groff. Era justamente isso que eu estava procurando.

  • Opa Gabriel, fico contente que tenha sido útil!

    Abs

  • Jquery + Json, dá pra fazer muita coisa !

Página 1 de 1 (3 itens)