Aprenderemos as melhores práticas de desenvolvimento com o Razor, a fim de facilitar a manutenção futura de nossas páginas. Será apresentado o recurso de HTML Helper e mostrada a grande vantagem de utilizá-lo no lugar de páginas desenvolvidas com HTML puro.
Além disso, veremos os erros cometidos pelos desenvolvedores ao trafegar objetos via ViewBag e ViewData e como melhorar esta maneira de trafegar os objetos através de Strongly Typed Views na nossa camada de apresentação.
Uma aplicação Web pode ser dividida em três camadas básicas: acesso a dados, regras de negócio e visualização. O padrão MVC (Model-View-Controller) foca bastante nesta divisão, separando as responsabilidades dentro da aplicação Web.
Existem diversos estudos, padrões e boas práticas de desenvolvimento no padrão MVC. A maioria dos esforços para uma boa codificação de software se concentra na camada de controle e modelo. Por muito tempo foi assim, a camada de visualização não evoluía tanto quanto as demais.
Com o advento de tecnologias novas e robustas como o ASP.NET Razor, a camada de visualização de dados de aplicações Web dentro da plataforma .NET mudou de um cenário não tão satisfatório para um novo cenário muito bom.
Porém, existem boas práticas que devemos seguir também no desenvolvimento de nossas páginas da camada de apresentação que nos ajudarão em futuras manutenções das aplicações desenvolvidas.
Camada de Apresentação
A camada de apresentação é a responsável por apresentar as páginas de uma aplicação Web. Os dados que devem ser apresentados na camada de apresentação são providos pela camada de modelo que envia informações para a camada de apresentação.
Em resumo, o que esta camada deve definir é como estes dados serão apresentados para o usuário da aplicação.
O contrário também é válido, onde a camada de apresentação coleta os dados que são informados pelos usuários e os envia para a camada de controle, que os usa para alterar a camada de modelo, caracterizando o padrão MVC.
Páginas Estáticas e Dinâmicas
Na camada de apresentação de uma aplicação Web podemos desenvolver dois tipos de páginas: Estáticas e Dinâmicas.
Uma página estática é desenvolvida via HTML e não permite muita interação e funcionalidades, com exceção de links. Estas páginas são muito fáceis de serem desenvolvidas, porém não apresentam grande utilidade tanto para os desenvolvedores quanto para os visitantes, já que somente pode-se apresentar textos corridos, imagens e alguns conteúdos multimídia como áudios e vídeos.
Já as páginas dinâmicas servem para adicionar funcionalidades e efeitos especiais, para isso é necessário utilizar junto do HTML alguma outra linguagem de programação que possa prover estas funcionalidades extras, como PHP, JSP e ASP.NET. Essas páginas podem oferecer diversos recursos e efeitos, tornando-se muito mais complexas do que simples páginas estáticas com HTML.
Razor
Até a segunda versão do ASP.NET MVC as páginas de uma aplicação poderiam ser desenvolvidas apenas em ASPX. A partir da terceira versão do framework, foi incluída uma nova tecnologia chamada Razor para desenvolvermos estas páginas.
O Razor é uma View Engine, uma forma de escrever visualizações em aplicações Web. Esta tecnologia se caracteriza por ser simples, concisa e de fácil aprendizado, onde diferentemente do ASPX, precisamos de muito menos tags e scripts.
O Razor contribuiu tanto para a ferramenta Visual Studio que esta View Engine passou a ser padrão do framework a partir da versão três.
A sintaxe ajuda a todos os desenvolvedores, tanto os sem experiência que conseguem aprender rapidamente e desenvolver as páginas, quanto os desenvolvedores experientes, tornando-os mais produtivos.
Quando trabalhamos com a View Engine Razor, o que acontece na prática é um misto de códigos HTML com a sintaxe Razor. O servidor em primeira instância lê o código escrito e interpreta primeiramente o código Razor para depois enviar a página HTML para o navegador.
Páginas Web escritas utilizando a View Engine Razor têm a extensão (CSHTML), onde são misturadas tags HTML com scripts de servidor escritos em C# ou qualquer outra linguagem de programação suportada pelo .NET.
Sintaxe e Declaração de Variáveis Razor
Todas as expressões Razor devem obrigatoriamente iniciar com o caractere @. Toda a codificação Razor irá ficar dentro de um bloco {}. Ao utilizarmos o C#, a extensão do arquivo será ”.cshtml”.
Existem duas maneiras de declararmos variáveis em Razor, como veremos na Listagem 1. A primeira é num bloco de declaração único de variável, onde desejamos declarar apenas uma variável, conforme a linha 7. Neste caso declaramos e já inicializamos a variável site, para usá-la posteriormente na linha 11.
Já quando desejamos criar várias variáveis, podemos criar um bloco de comando múltiplo Razor, através do @ e {}, desta forma simplificamos a declaração e podemos declarar quantas variáveis desejarmos dentro das chaves, conforme linhas 15 a 19. O acesso a elas se dá da mesma maneira que o bloco único, conforme linhas 24 a 27.
Para acessar as variáveis criadas é muito simples, basta adicionar o caractere @ seguido do nome da variável quando estamos fora de um bloco Razor. Estando dentro do bloco (@{...}) o acesso é direto e não precisamos do @, conforme podemos ver na Listagem 1.
Listagem 1. Declaração e acesso a Variáveis em Razor
01 @{
02 ViewBag.Title = "Variáveis";
03 }
04
05 <h2>Declaração e uso de Variáveis</h2>
06
07 @{ var site = "www.devmedia.com.br"; }
08
09 <fieldset>
10 <legend>Bloco de declaração único</legend>
11 <p>Empresa: @site</p>
12 </fieldset>
13
14 @{
15 int id = 1;
16 string nome = "João Paulo";
17 double valor = 12.75;
18 string sobrenome;
19 sobrenome = "da Silva";
20 }
21
22 <fieldset>
23 <legend>Bloco de declaração múltiplo</legend>
24 <p>Identificador: @id</p>
25 <p>Nome: @nome</p>
26 <p>Sobrenome: @sobrenome</p>
27 <p>Valor: @valor</p>
28 </fieldset>
29 @*Final do Código*@Se desejarmos adicionar comentários, basta contornarmos o texto com @* e * ...
