RSS feed
ASP.NET MVC 3: Trechos de Código Implícitos e Explícitos com o Razor - ScottGu's Blog em Português

ASP.NET MVC 3: Trechos de Código Implícitos e Explícitos com o 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 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:

imagem

Quando executado, o código acima gera uma saída como a mostrada a seguir:

imagem

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):

imagem

Você também pode usar notação "dot" para acessar sub-propriedades que estejam em múltiplos níveis de profundidade:

imagem

Indexação de Array/Coleção

O Razor te permite indexar coleções ou arrays:

imagem

Chamando Métodos

O Razor também permite que você chame métodos:

imagem

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:

  1. 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
  2. Buscar por parêntesis ou chaves. - Se encontrarmos "(" ou "[", ir para o passo 2.1, caso contrário, ir para o passo 3 
    1. Analisar até o caractere de fechamento ")" ou "]" (nós rastreamos pares aninhados "()" e "[]" e ignoramos "()[]" que vemos em strings ou comentários)
    2. Voltar ao passo 2
  3. 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
    1. 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
  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:

imagem

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:

imagem

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:

imagem

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:

imagem

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>:

imagem

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>:

imagem

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.

Published Friday, December 17, 2010 1:23 AM by Leniel Macaferi
Filed under: , , ,

Comments

No Comments