ASP.NET MVC - Acessando o conteúdo de um ViewBag de dentro da tag script
Pode parecer simples, na verdade é muito simples mesmo, mas me perguntaram como fazer isso e resolvi escrever. Estou falando do assunto do título desse post, como usar um ViewBag de dentro de uma tag <script>, afinal, para acessar um ViewBag a partir de uma View usamos Razor. É possível utilizar o Razor em conjunto com o javascript desde que você esteja dentro de uma View (arquivo com extensão .cshtml, .vbhtml) e não de um arquivo .js (isso é bem óbvio, certo?). O razor trabalha no servidor e, nesse caso, o javascript no client, ou seja, quando o javascript "for trabalhar" o ViewBag já vai ter sido "transformado" em texto pelo razor. Vamos ver alguns exemplos para entender isso.
[caption id="attachment_383" align="alignnone" width="646"] Figura 1 - View Home/Index[/caption]
[caption id="attachment_388" align="alignnone" width="646"] Figura 2 -Erro de sintaxe no JavaScript[/caption]
[caption id="attachment_389" align="alignnone" width="646"] Figura 3 - Local onde aconteceu o erro de sintaxe.[/caption]
Na figura 3, podemos analisar também que não temos mais o "ViewBag.Message", mas somente o seu conteúdo, isso porque antes da view ser enviada para o browser o razor faz sua renderização (transforma tudo em html/texto). Nesse momento, ao executarmos a aplicação teremos o retorno esperado, um alerta com o conteúdo do ViewBag.Message. Veja isso na Figura 4:
[caption id="attachment_391" align="alignnone" width="646"] Figura 4 - Retorno esperado do exemplo 1.[/caption]
[caption id="attachment_398" align="aligncenter" width="646"] Figura 5 - Abrindo o package manager console[/caption]
Não podemos esquecer de alterar também o javaScript que está acessando o ViewBag na View /Home/Index. Devemos trocar o "@ViewBag.Message" por "@ViewBag.obj", veja como ficou após a alteração no Snippet 5.
[caption id="attachment_400" align="aligncenter" width="646"] Figura 6 - Alert com o conteúdo do ViewBag.obj no formato html encode[/caption]
Isso acontece porque o método Index do controller Home é do tipo ActionResult e usa o método View() para fazer o retorno para quem o "chama", o método View() renderiza e retorna um html. No caso do ViewBag.obj, para não gerar confusão com tag's html alguns caracteres são substituídos por pequeno "códigos". Conseguimos ver isso de outra forma também, através do DevTools. Abra-o teclando F12, navegue até a aba Network e clique na requisição localhost, feito isso clique na aba Response, conforme mostra a Figura 7.
[caption id="attachment_401" align="aligncenter" width="646"] Figura 7 - Requisições da página /Home/Index[/caption]
[caption id="attachment_404" align="aligncenter" width="646"] Figura 8 - Erro de sintaxe provado por conflito de aspas[/caption]
Resolveremos isso de forma simples, basta trocar as aspas duplas, que "envelopam" o ViewBag.obj, por aspas simples. Veja essa alteração no snippet 7:
Agora sim temos uma cadeia de caracteres no formato json, se rodarmos a aplicação já teremos um alert mostrando o objeto criado no controller no formato json. Vamos fazer uma ultima alteração para mostrarmos uma propriedade por linha. Para fazer isso, teremos que "falar" para o javaScript que o ViewBag.obj é um objeto, fazemos isso com o JSON.parse. Veja essa alteração no snippet 8.
No alert estou concatenando o nome da propriedade com o seu valor e alguns "n" para quebra de linha. Veja o resultado na Figura 9:
[caption id="attachment_406" align="aligncenter" width="646"] Figura 9 - Exibindo valores do objeto anônimo criado no controller[/caption]