ASP.NET MVC 3: Sintaxe @: e <text> do Razor


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:

imagem

Quando executado, ele gera uma saída igual a mostrada a seguir:

imagem 

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:

imagem

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:

imagem

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:

imagem

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:

imagem

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:

imagem

Alternativamente, o Razor também permite que você use um elemento <text> para explicitamente identificar conteúdo:

imagem

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:

imagem

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.

2 Comments

  • Estou impressinado com o razor. To conhecendo só agora, devido ter instalado o Webmatrix.

    Tomara que se firme e se torne padrão. Excelente mesmo.

    Estou mais inclinado a aprender mais rápido ASP.NET por isso.

  • Estou na expectativa de mais tutoriais sobre essa fantástica tecnologia.

    Quem sabe um tuto ensinando fazer um mini portal ou algo do gênero.

Comments have been disabled for this content.