Imprimir Post

Caminho Rápido – Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript em uma Aplicação do tipo ASP.NET MVC

Resumo:

O objetivo desta publicação é ensinar como utilizar o caractere para exibir marcação Html e/ou código JavaScript em uma Aplicação do tipo ASP.NET MVC à partir da ferramenta de desenvolvimento Microsoft Visual Studio.

O guia será apresentado de maneira a minimizar a parte teórica ao essencial e elevar a parte prática até a concretização do objetivo.

Palavras-chaves:

Visual, Studio, Utilizar, Caractere, @, Marcação.

Texto:

Adendo

Para realização das tarefas referentes ao objetivo do post, foram utilizados os seguintes Programas:

  • Windows 10 Pro;
  • Microsoft Visual Studio Community 2015 Ultimate (Update 3).

A única configuração realizada após a instalação dos programas acima, foi manter o Microsoft Visual Studio sendo executado como usuário Administrador do Sistema Operacional, a fim de evitar maiores problemas.

Mãos à Obra

A sequência será apresentada de maneira a entender que o leitor já possua a estrutura do projeto tipo ASP.NET MVC da postagem: “Caminho Rápido – Determinando uma Aplicação de apoio do tipo ASP.NET MVC“.

Relembre - Aplicação de apoio ASP.NET MVC

Aplicação de apoio ASP.NET MVC:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Aplicação de Apoio

Microsoft Visual Studio Community 2015 – Aplicação de Apoio

Adicionando o Controller ClienteController

À partir do projeto anteriormente criado, adicionar um Controller nomeado como ClienteController:

Controller em uma Aplicação ASP.NET MVC - Relembre - Controller

Tela ao adicionar o Controller ClienteController:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 - Tela após adicionar o Controller

Microsoft Visual Studio Community 2015 – Tela após adicionar o Controller

Adicionando a View Index

À partir do Controller anteriormente criado (ClienteController), adicionar uma View nomeada como Index:

View em uma Aplicação ASP.NET MVC - Relembre - View

Tela ao adicionar a View Index:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 - Tela após adicionar a View

Microsoft Visual Studio Community 2015 – Tela após adicionar a View

Alterando a View Index Cliente

Localizar a pasta Cliente. Na área à direita nomeada como: Solution Explorer, deve-se clicar duas vezes (2x) sobre Index.cshtml, alterando este arquivo para o seguinte código:

Tela ao colar o código:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Por fim, deve-se salvar a View Index e suas alterações clicando no botão Salvar. Tela com a confirmação positiva (ver rodapé da janela) ao clicar no botão Salvar:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Alterando a View Index Default

Localizar a pasta Default. Na área à direita nomeada como: Solution Explorer, deve-se clicar duas vezes (2x) sobre Index.cshtml, alterando este arquivo para o seguinte código:

Tela ao colar o código:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Microsoft Visual Studio Community 2015 – Tela após Alteração do Arquivo

Por fim, deve-se salvar o arquivo Index e suas alterações clicando no botão Salvar. Tela com a confirmação positiva (ver rodapé da janela) ao clicar no botão Salvar:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Microsoft Visual Studio Community 2015 – Tela após Salvar o Projeto

Finalizando o exemplo, resta apenas executar a Aplicação, deve-se então clicar no botão Start Debugging (F5):

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Execução da Aplicação

Microsoft Visual Studio Community 2015 – Execução da Aplicação

Tela ao clicar no botão Start Debugging (F5):

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 - Página Principal (Default)

Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) – Página Principal (Default)

Tela ao clicar no Link Ir para página Cliente:

Utilizando o caractere @ para exibir marcação Html e/ou código JavaScript - Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) - Página Cliente

Microsoft Visual Studio Community 2015 – Execução da Aplicação (Janela do Browser) – Página Cliente

Considerações Finais:

Esta publicação visa utilizar o caractere para exibir marcação Html e/ou código JavaScript em uma Aplicação do tipo ASP.NET MVC.

Vale destacar que:

  • é um caractere tendo como descrição segundo a Microsoft:

Conhecendo o caractere @

O caractere especial  @ inicia uma expressão, um bloco com uma única instrução ou várias, por exemplo, podemos  inserir um código Razor diretamente na marcação HTML, utilizando o caractere @ para iniciar um expressão de condição ou apresentar o conteúdo de uma variável. Quando você exibe o conteúdo de uma página utilizando o caráter @, o ASP.NET RAZOR codifica a saída, substituindo caracteres reservados do HTML com os códigos que permitem que sejam exibidos como texto em uma página web ao invés de serem interpretados como tag HTML.

Os colchetes são utilizados para agrupar uma ou mais expressões iniciadas pelo caractere @, formando blocos de expressões que são executadas em seqüência, assim como na sintaxe da linguagem C# .NET, você utiliza o ponto e virgula para finalizar uma expressão. No caso de uma expressão inline, ou seja, dentro da marcação HTML utilizando o caracter @, não é necessário utilizar o ponto e vírgula para informar o final da expressão.

  • No exemplo, houve a modificação de elementos de texto no Design particular tanto da View Index pertencente a Default, quanto na View Index de Cliente.

Design particular em uma Aplicação ASP.NET MVC - Relembre - Design particular

  • Além disso, é transcrito em código como @(marcação Html e código JavaScript) na View Index de Cliente definindo as marcações Html <div style=’margin: 20px 0 20px 0′></div> e código JavaScript <script>alert(‘Olá mundo’);</script> respectivamente, para serem exibidos e não renderizados. É importante ressaltar que cada exibição foi definida em uma linha, porém o recurso permite a exibição total em apenas uma declaração, exemplo: @(“<div style=’margin: 20px 0 20px 0′><script>alert(‘Olá mundo’);</script></div>”).
  • O elemento ActionLink também está presente como recurso no exemplo, porém apenas como redirecionamento entre as páginas.

ActionLink em uma Aplicação ASP.NET MVC - Relembre - ActionLink

Referências Bibliográficas:

https://msdn.microsoft.com/pt-br/library/gg675215.aspx#arroba

Sobre o autor

Thiago Richard Vanicore

Thiago Richard Vanicore formou-se em análise e desenvolvimento de sistemas, possui certificação ITIL Foundation V2 e entre seus conhecimentos estão: ASP .Net (WebForms/MVC5/Web API) C#, HTML5, Html/XHtml, CSS3, JQuery, JQuey Mobile, JavaScript, Xml, Ajax, Json, Microsoft SqlServer, MySql, Firebird, Azure, Visual Studio Online, Scrum, UML, CRM, Quality Assurance, CTI (Computer Telephony Integration) MPSBR (Melhoria de Processos do Software Brasileiro).

Link permanente para este artigo: http://linksinergia.com.br/2017/04/12/caminho-rapido-utilizando-o-elemento-attributeencode-para-converter-atributos-em-caracteres-de-codificacao-html-em-uma-aplicacao-do-tipo-asp-net-mvc/