Principais Características
Com o Asp.Net Razor temos a possibilidade de inserir a lógica da
aplicação diretamente na camada de visualização do projeto (View). Um bom exemplo
é que podemos juntar com códigos HTML. Temos algumas vantagens como: o fácil
aprendizado, pois a
sintaxe é muito identica ao HTML e C#, ou seja, o desenvolvedor que domina
estas linguagens não irá encontrar muitos problemas e consequentemente tornando
um código mais limpo. Outra caracteristica que ajudará nós programadores é o suporte
ao “IntelliSense” do Microsoft Visual Studio, facilitando muito na programação.
Outras funcionalidades
Os
arquivos do tipo “Razor” são
criados na extensão “.cshtml” e são processados pelo motor do ASP.NET.
Durante
o processamento da “View”,
são identificados a codificação do lado do servidor através do
símbolo @ (arroba).
Qualquer código sem este símbolo não é interpretado pelo “Razor” e é entregue no arquivo
final como um HTML puro. Com isto é possível criar páginas com conteúdos
dinâmicos, não equecendo que podemos possuir dois tipos de conteúdos, sendo: o
que são executados do lado do cliente (HTML, CSS, Javascript) e o lado do
servidor, geralmente o conteúdo que utilizamos para acessar informações nas
bases de dados. O Razor permite adicionar código do servidor ao conteúdo do
cliente na camada Visualização (View).
Podemos conferir na tabela 01
os principais comandos e utilizações.
|
Comando
|
Função
|
Exemplo
|
|
@
|
Indica que trata-se
de um comandoserver side, e logo em seguida será escrito o código
Razor
|
|
|
@{
|
Inicio de bloco de
código, sempre termina com }
|
@{
ViewBag.Title = "Home”;
}
|
|
@if
@switch
|
Criação de
condicional
|
@if (idade > 18)
{ ... }
@switch (dia) {
case ...}
|
|
@foreach
@for
@while
|
Criação de laço
para iteração em coleções e Criação de laço para diversos tipos de dados
|
@foreach (var item in Filmes)
@for (var i = 0;
i <= 10; i++)
@while(k>5)
|
|
@*
|
Criação de
comentário, sempre termina com *@
|
@* Isto é um
comentário *@
|
Tabela 01: Principais comandos e utilizações.
Exemplos
Práticos
A partir das informações acima podemos montar
um pequeno exemplo prático, no meu caso estarei utilizando o Visual Studio 2013
para uma aplicação do tipo MVC. Clique em “File/New/Project” e escolha Asp.Net
MVC 4, ou 5. Eu prefiro criar os conteúdos do zero, para isto deveremos criar o
nosso “Controller” e em seguida a “View”. Ver Imagem 01.
Figura 01: Criando um projeto de exemplo.
Para adicionar um “Controller” deveremos clicar
em cima de “Controllers” escolhendo Add/Controller...”. Em Controller name
defina para “TheClubController” Ver Figura 02.
Figura 02: Adicionando o Controller.
Já para utilizarmos a View deveremos seguir os
mesmos passos, apenas alterando para escolher “Add/View”. Em View Name coloque
“Index” para identificá-la.Ver Imagem 03.
Figura 03: Adicionando a View.
Não podemos esquecer de um detalhe importante
que a estrutura de nomes devemos seguir corretamente. Ver Imagem 04.
Figura 04: Estrutura de Pastas em uma aplicação MVC.
·
Utilizando variáveis
Para utilizarmos variáveis, de acordo com a tabela 01 comentada
anteriormente, usaremos o arroba (@) seguido de chaves ( { ). No exemplo abaixo
declaramos duas variáveis para em seguida intercalarmos no próprio código HTML.
Ver Figura 05.
Exemplo:
<div>
<h2>Exemplo 01: Utilizando
variáveis</h2>
@{
var motor = "Razor";
}
@{
var ferramenta = "Visual Studio 2013";
}
<p>Estamos utilizando como ferramenta de desenvolvimento o : @ferramenta </p>
<p>A view utilizada é o : @motor</p>
</div>
Figura 05: Exemplo de utilização de
variáveis.
·
Criação de Estruturas Condicionais
O uso de estruturas condicionais no Razor é
muito parecido com a linguagem C#. No exemplo a seguir estamos realizando um “If/Else“
para comparar um valor inteiro e posteriormente intercalarmos o resultado com
códigos HTML. Ver Figura 06.
Exemplo:
<div>
<h2>Exemplo 02: Estruturas Condicionais - If/Else</h2>
@{
int idade = 19;
}
@{
var nome = "Thiago";
}
@if (idade > 18)
{
<p> O indivíduo @nome tem @idade anos! </p>
}
else
{
<p> O indivíduo ainda não atingiu a maioridade! </p>
}
</div>
Figura 06: Exemplo utilizando If/Else
Achei
interessante demonstrar o uso do “Switch/Case”, com ele poderemos intercalar
diversas informações. No exemplo prático abaixo faremos a comparação com o dia
corrente da semana e de acordo com o resultado daremos uma mensagem diferente
ao usuário. O resultado poderá ser conferido na Imagem 07.
Exemplo:
<div>
<h2>Exemplo 03: Estruturas Condicionais - Switch</h2>
@{
var diadasemana = DateTime.Now.DayOfWeek;
var dia =
diadasemana.ToString();
var mensagem = "";
}
@switch (dia)
{
case "Monday":
mensagem = "Hoje é o Primeiro dia da Semana.";
break;
case "Thursday":
mensagem = "Apenas um dia antes de fim de semana.";
break;
case "Friday":
mensagem = "Amanhã é fim de semana!";
break;
default:
mensagem = "Hoje é " + dia;
break;
}
<p>@mensagem</p>
</div>
Figura 07: Exemplo utilizando Switch/Case.
·
Criação de laço (For, Foreach, While)
O uso de laços também são de
extrema importância. Podemos fazer o uso do For, Foreach e While, dependendo da
necessidade.
No exemplo abaixo estamos
utilizando o “For” para percorrer um determinado intervalo. A cada iteração
imprimimos na tela intercalando com o código “<p>” em HTML para podermos
pular uma linha. Ver Imagem 08.
Exemplo:
<div>
<h2>Exemplo 04: Criação de laço -
For</h2>
@for (var i = 0; i <= 5; i++)
{
<p>Número: @i</p>
}
</div>
Figura
08: Exemplo utilizando o For.
Já o Foreach é utilizado para fazer iterações em coleções de dados. Ver
exemplo e Imagem 09.
Exemplo:
<div>
<h2>Exemplo 05: Criação de laço para iteração em coleções -
Foreach</h2>
@{string[] pessoas = { "Thiago", "João", "Maria", "José" }; }
@foreach (var item in pessoas)
{
<p>@item</p>
}
</div>
Figura
09: Exemplo utilizando o Foreach.
Temos também outra opção com o While, já sabemos que a utilidade é bem
parecida com a do “For”. Ao decorrer do desenvolvimento fica a cargo do
programador fazer a escolha certa do comando conforme a necessidade. O
resultado podemos verificar na Imagem 10.
Exemplo:
<div>
<h2>Exemplo 06: Criação de laço -
While</h2>
@{int k = 0;}
@{
while (k < 5)
{
k += 1;
<p>Linha @k</p>
}
}
</div>
Figura 10: Exemplo utilizando o While.
·
Criação de Comentários
Para criar um comentário referente a um trecho
de código ou apenas desabilitar alguma codificação deveremos usar a (@* - Para
determinar o início) e (*@ - Para o fim).
Exemplo:
@*<h2>Exemplo 04:
Criação de Comentários</h2>
@{
var
motor = "Razor";
}
@{
var
ferramenta = "Visual Studio 2013";
}
<p>Estamos
utilizando como ferramenta de desenvolvimento o : @ferramenta </p>
<p>A view utilizada é o :
@motor</p>*@
Conclusões
A minha intenção neste artigo foi de
dar uma noção, um norte para quem está começando a trabalhar com Asp.Net
MVC junto com o Engine Razor. Abordei
algumas características, sintaxes e exemplos práticos e simples dos principais
comandos, com o intuito de tornar um fácil aprendizado. Fica aí a dica, Um
abraço e até o mês que vem!
Nenhum comentário:
Postar um comentário