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 eu vou discutir sobre dois recursos sintáticos úteis do
novo motor de visões Razor - o suporte às sintaxes @: e <text>.
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 do Razor a seguir pode ser usado para iterar uma lista de produtos:
Quando executado, ele gera uma saída igual a mostrada a seguir:
Uma
das técnicas que o Razor usa para implicitamente identificar quando um
bloco de código termina é procurar por tag/elemento de conteúdo para
indicar o início de uma região de conteúdo. Por exemplo, no trecho de
código acima, o Razor automaticamente tratou o bloco interno
<li></li> dentro do nosso loop foreach como um bloco de
conteúdo HTML, porque ele observou a tag de abertura <li> e
inferiu que este conteúdo não poderia ser código C# válido.
Esta
técnica especial - que usa tags para identificar blocos de conteúdo
dentro do código - é um dos principais ingredientes que torna o Razor
tão limpo e produtivo em cenários que envolvem a criação de código HTML.
Usando @: para explicitamente indicar o início do conteúdo
Nem
todos os blocos recipientes de conteúdo começam com uma tag de
elemento, e há situações em que o analisador do Razor não pode detectar implicitamente um bloco de conteúdo.
O Razor aborda este cenário permitindo que você indique explicitamente
o início de uma linha de conteúdo usando a sequencia de caracteres @:
dentro de um bloco de código. A seqüência @: indica que a linha de
conteúdo que segue deve ser tratada como um bloco de conteúdo:
Como
um exemplo mais prático, o trecho a seguir demonstra como nós
poderíamos mostrar uma mensagem "(Out of Stock!) - em falta" ao lado do
nosso nome do produto se o produto estiver esgotado:
Em
virtude de eu não estar envolvendo a mensagem (Out of Stock!) em um
elemento de tag HTML, o Razor não pode implicitamente determinar que o
conteúdo dentro do bloco @if é o começo de um bloco de conteúdo. Estamos usando a sequência de caracteres @: para indicar explicitamente
que essa linha dentro do nosso bloco de código deve ser tratada como
conteúdo.
Usando Trechos/Pedaços de Código (Code Nuggets) dentro de blocos de conteúdo @:
Além
da gerar conteúdo estático, você também pode ter trechos de código
embutidos dentro de um bloco de conteúdo que é iniciado com uma
seqüência de caracteres @:.
Por exemplo, temos duas sequências @: no código mostrado a seguir:
Observe
que na segunda sequência @: estamos emitindo o número de unidades do
produto que restam no interior do bloco de conteúdo - por exemplo:
"(Faltam apenas 3 unidades!"). Estamos fazendo isso através da
incorporação de um trecho de código @p.UnitsInStock dentro da linha de
conteúdo.
Múltiplas Linhas de Conteúdo
O Razor
torna fácil ter várias linhas de conteúdo envolvidas em um elemento
HTML. Por exemplo, a seguir, o conteúdo interno do nosso recipiente @if é envolvido em um elemento HTML <p> - o que fará
com que o Razor o trate como conteúdo:
Em
cenários onde as várias linhas de conteúdo não são envolvidas por um
elemento HTML exterior, você pode usar várias sequências @: como
mostrado a seguir:
Alternativamente, o Razor também permite que você use um elemento <text> para explicitamente identificar conteúdo:
A
tag <text> é um elemento que é tratado de uma maneira especial
pelo Razor. Ela faz com que o Razor interprete o conteúdo interno do
bloco <text> como conteúdo, e sinaliza ao Razor para que ele não renderize/mostre
a tag do elemento <text> (o que significa que apenas o conteúdo
interno do elemento <text> será mostrado - a tag em si não será
exibida). Isto se torna conveniente quando você deseja processar blocos
de conteúdo que possuem múltiplas linhas que não são envolvidos por um
elemento HTML.
O elemento <text> também pode,
opcionalmente, ser utilizado para designar uma única linha de conteúdo,
se você o preferir sobre a sequência @: mais concisa:
O
código acima irá mostrar a mesma saída da sequencia @: que vimos
anteriormente. O Razor omitirá automaticamente da saída o elemento
<text> que envolve o conteúdo e mostrará somente o contéudo que
reside dentro da tag <text>.
Resumo
O
Razor permite uma sintaxe para modelagem de visões limpa e concisa, que
permite um fluxo de trabalho de codificação muito fluído. A detecção
inteligente do Razor no que diz respeito a elementos de <tag> para
identificar o início de regiões de conteúdo é uma das razões que fazem
com que a abordagem do Razor funcione tão bem com os cenários de geração
de HTML. Isso te permite evitar a marcação explicita do início/fim das
regiões de conteúdo em aproximadamente 95% dos cenários de if/else e
foreach.
A sintaxe @: e <text> do Razor pode então ser
usada para cenários onde você quer evitar o uso de um elemento HTML
dentro de um bloco recipiente de código, e precisa denotar mais
explicitamente uma região de conteúdo.
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.
