Este é outro post de uma série de posts que estou escrevendo, que cobrem alguns dos novos recursos da ASP.NET MVC 3:
No
post de hoje estarei discutindo como o Razor te permite definir
implicitamente e explicitamente trechos de código dentro de seus modelos
de visão, e mostrarei um passo a passo com alguns exemplos de código.
Codificação Fluída com o Razor
A
ASP.NET MVC 3 vem com uma nova opção de motor de visões chamada "Razor"
(além de continuar a suportar/melhorar o motor de visões .aspx
existente). Você pode aprender mais sobre o Razor, por que o estamos
introduzindo, e a sintaxe suportada pelo mesmo a partir do post
Apresentando Razor aqui no meu blog.
O Razor minimiza o número de
caracteres e teclas necessárias ao escrever um modelo de visão, e
permite um fluxo de trabalho de codificação rápido e fluído. Ao
contrário da maioria das sintaxes de modelos, você não precisa
interromper sua codificação para indicar explicitamente o início e o fim
de blocos do servidor dentro do seu código HTML. O analisador do Razor é
inteligente o suficiente para deduzir esses blocos a partir do seu
código. Isto permite uma sintaxe muito compacta e expressiva, que é
limpa, rápida e divertida para digitar.
Por exemplo, o trecho de
código a seguir pode ser usado para iterar uma coleção de produtos e
para gerar uma lista <ul> de nomes de produtos que possuem links
para a página do produto correspondente:
Quando executado, o código acima gera uma saída como a mostrada a seguir:
Observe
acima como fomos capazes de incorporar dois trechos de código dentro do
conteúdo do loop foreach. Um deles retorna o nome do Produto, e os
outro inseri o ProductID dentro de um hiperlink. Repare que nós não
tivemos que envolver explicitamente esses trechos de código - o Razor
foi inteligente o suficiente para identificar implicitamente onde o código começou e terminou em ambas as situações.
Como o Razor Permite Trechos de Código Implícitos
O Razor não
não define sua própria linguagem. Em vez disso, o código que você
escreve dentro de trechos de código do Razor é código padrão C# ou VB. Isso te permite re-usar suas habilidades existentes com linguagens de
programação e evita que você tenha que aprender uma gramática de
linguagem customizada.
O analisador do Razor tem inteligência
nativa de forma que sempre que possível, você não tenha que
explicitamente marcar o fim de trechos de código C#/VB que você
escreve. Isso torna a codificação mais fluída e produtiva, e permite
uma sintaxe de modelo mais agradável, limpa e concisa. A seguir estão
alguns cenários que o Razor suporta onde você pode evitar a marcação
explicita do início/fim de um trecho de código, e ao invés disso você
pode usar o Razor para implicitamente identificar o escopo do trecho de código para você:
Acesso a Propriedades
O
Razor possibilita a saída de um valor de variável, ou uma
sub-propriedade de uma variável que é referenciada através da notação
"dot" (ponto):
Você também pode usar notação "dot" para acessar sub-propriedades que estejam em múltiplos níveis de profundidade:
Indexação de Array/Coleção
O Razor te permite indexar coleções ou arrays:
Chamando Métodos
O Razor também permite que você chame métodos:
Observe em todos os cenários acima, como não tivemos
que finalizar explicitamente o trecho de código. O Razor foi capaz de
identificar implicitamente o fim do bloco de código para nós.
Algoritmo de Análise do Razor para Trechos de Código
O algoritmo a seguir captura o núcleo da análise lógica que usamos para suportar expressões "@" dentro do Razor, e para permitir os cenários de trechos de código implícitos mostrados acima:
- Analisar um identificador -
A partir do momento em que vemos um caractere que não é válido em um
identificador da linguagem C# ou VB, paramos e passamos para o passo 2
- Buscar por parêntesis ou chaves. - Se encontrarmos "(" ou "[", ir para o passo 2.1, caso contrário, ir para o passo 3
- Analisar
até o caractere de fechamento ")" ou "]" (nós rastreamos pares
aninhados "()" e "[]" e ignoramos "()[]" que vemos em strings ou
comentários)
- Voltar ao passo 2
- Verifique
se há um ponto "." - Se vemos um, ir para o passo 3.1, caso contrário,
NÃO ACEITAR O "." como código e ir para o passo 4
- Se o caractere após o "." é um identificador válido, aceitar o "." e voltar para o passo 1, caso contrário, ir para o passo 4
- Concluído!
Diferenciando entre código e conteúdo
O
Passo 3.1 é uma parte particularmente interessante do algoritmo acima, e
permite que o Razor diferencie entre cenários onde um identificador
está sendo usado como parte da instrução do código, e quando ele deve
ser tratado como conteúdo estático:
Observe
como no trecho acima, temos os caracteres ? e ! no final dos nossos
trechos de código. Eles são identificadores válidos na linguagem C# -
mas o Razor é capaz de identificar implicitamente que eles devem ser
tratados como conteúdo string estático ao invés de serem parte da
expressão de código porque não há espaço em branco após eles. Isso é
muito legal e nos salva algumas teclas.
Trechos de Código Explícitos no Razor
O
Razor é inteligente o suficiente para identificar implicitamente uma
série de cenários com trechos de código. Mas ainda há momentos em que
você quer/precisa ser mais explícito na maneira como você abrange a
expressão do trecho de código. A sintaxe @(expressão) permite que você
faça o seguinte:
Você
pode escrever qualquer instrução de código C#/VB que você quiser dentro
da sintaxe @(). O Razor irá tratar os carateres () como o escopo
explícito da expressão do trecho de código. A seguir estão algumas
situações onde poderíamos usar o recurso de trecho de código explícito:
Executar Cálculo/Modificação Aritmética
Você pode executar cálculos aritméticos em um trecho de código explícito:
Adicionar Texto em um Resultado de Expressão de Código
Você
pode usar a sintaxe de expressão explícita para adicionar texto
estático no final de um trecho de código sem ter que se preocupar se
este texto será incorretamente interpretado como código:
Acima
nós incorporamos um trecho de código dentro do atributo src do elemento
img. Este elemento nos permite apontar para imagens com URLs como
"/Images/Beverages.jpg". Sem os parênteses explícitos, o Razor teria
buscado por uma propriedade ".jpg" em CategoryName (e geraria um erro). Ao ser explícito, podemos indicar claramente onde o código termina e
onde começa o texto.
Usando Generics e Lambdas
As
expressões explícitas também nos permitem usar tipos genéricos e métodos
genéricos dentro de expressões de código - e nos permitem evitar que os
caracteres <> em genéricos sejam ambíguos com elementos de
marcação (tags).
Uma Coisa a Mais....Intellisense dentro de Atributos
Usamos
trechos de código dentro de atributos HTML em vários dos exemplos
acima. Um bom recurso suportado pelo editor de código do Razor dentro
do Visual Studio é a possibilidade de ainda termos intellisense para
código VB/C# quando estamos trabalhando com estes trechos de
código.
A seguir está um exemplo de intellisense para código C#
quando usamos um trecho de código implícito dentro do atributo href=""
de um elemento <a>:
A
seguir está um exemplo de intellisense para código C# quando usamos um
trecho de código explícito inserido no meio de um atributo src="" de um
elemento <img>:
Observe
como temos a intellisense para o código em ambos os cenários - apesar
do fato de a expressão de código ser inserida dentro de um atributo HTML
(algo que o atual editor de código .aspx não suporta). Isso torna
escrever código mais fácil, e garante que você pode tirar vantagem da
intellisense em qualquer lugar.
Resumo
O Razor
permite uma sintaxe para modelagem de visões limpa e concisa, o que
permite um fluxo de trabalho de codificação muito fluído. A capacidade que o Razor tem para colocar em escopo implicitamente os trechos de código reduz a quantidade de digitação que você precisa executar, e te deixa com um código realmente limpo.
Quando necessário, você pode também
explicitamente colocar expressões de código em escopo usando a sintaxe
@(expressão) para proporcionar maior clareza sobre sua intenção, bem
como para retirar a ambiguidade das instruções de código em marcação
estática.
Espero que ajude,
Scott
PS Além do blog, eu também estou agora utilizando o Twitter para atualizações rápidas e para compartilhar links. Siga-me em: twitter.com/ScottGu
Texto traduzido do post original por
Leniel Macaferi.
