Introdução ao ASP.NET Razor

  • Artigo

Alexandre Tadashi Sato
Janeiro 2011

Tecnologias: WebMatrix Beta 3

 

Sumário: Este artigo tem como objetivo apresentar uma introdução ao ASP.NET Razor, uma view engine da Microsoft que permite inserir códigos diretamente na camada de visualização da aplicação, facilitando a codificação do projeto.

Conteúdo

arrow_down.gifIntrodução
arrow_down.gifComo funciona ?
arrow_down.gifConhecendo o caracter @
arrow_down.gifTrabalhando com variaveis
arrow_down.gifTrabalhando com objetos
arrow_down.gifInserindo comandos de decisão e loop
arrow_down.gifConclusão
arrow_down.gifSobre o Autor

Introdução

O ASP.NET Razor é uma view engine que já está incluída no WebMatrix, com ele temos a possibilidade de inserir a lógica da aplicação diretamente na camada de visualização do projeto, por exemplo, é possível inserir a sintax razor junto com os códigos HTML dentro da mesma página, a sintaxe do ASP.NET Razor é extremamente simplificada, baseado na linguagem C# .NET, embora seja possível utilizar a linguagem Visual Basic .NET.

Neste artigo você conhecerá o que é e como funciona a view engine Razor, este artigo não tem como objetivo aprofundar na sintaxe da view engine Razor, mas apresentar um overview técnico com o suficiente para criar páginas dinâmicas usando o ASP.NET Razor. A Sintaxe do Razor é baseada na consagrada tecnologia ASP.NET, que tem como base o Microsoft .Net Framework, possibilitando que o programador tenha todo o poder do ASP.NET utilizando o WebMatrix e o Razor, porém com uma sintaxe simplificada, como resultado o programador ganha produtividade além de ter uma curva de aprendizado menor.

Como funciona?

Com o WebMatrix é possível criar páginas com conteúdo dinâmico, existem dois tipos de conteúdo, o conteúdo que é executado do lado do cliente, ou seja, a marcação HTML, CSS e JavaScript por exemplo, e o conteúdo executado do lado do servidor, esse é o conteúdo que utilizamos por exemplo para acessar informações em base de dados, o Razor permite que você adicione o código do servidor ao conteúdo do cliente, sendo que em uma única pagina criada com o WebMatrix você poderá utilizar marcações HTML em conjunto com código ASP.NET Razor.

As páginas ASP.NET criadas pelo WebMatrix utilizando a view engine Razor possuem uma extensão de arquivo especial, os arquivos que utilizam como base a linguagem C# .NET tem a extensão CSHTML e as que utilizam do Visual Basic .NET tem a extensão VBHTML, sendo que essas extensões especiais são reconhecidas pelo servidor web e executa em primeiro lugar os códigos que são executados pelo servidor e em seguida envia a página para o navegador.

Conhecendo o caractere @

O caractere especial  @ inicia uma expressão, um bloco com uma única instrução ou várias, por exemplo, podemos  inserir um código Razor diretamente na marcação HTML, utilizando o caractere @ para iniciar um expressão de condição ou apresentar o conteúdo de uma variável. Quando você exibe o conteúdo de uma página utilizando o caráter @, o ASP.NET RAZOR codifica a saída, substituindo caracteres reservados do HTML com os códigos que permitem que sejam exibidos como texto em uma página web ao invés de serem interpretados como tag HTML.

Os colchetes são utilizados para agrupar uma ou mais expressões iniciadas pelo caractere @, formando blocos de expressões que são executadas em seqüência, assim como na sintaxe da linguagem C# .NET, você utiliza o ponto e virgula para finalizar uma expressão. No caso de uma expressão inline, ou seja, dentro da marcação HTML utilizando o caracter @, não é necessário utilizar o ponto e vírgula para informar o final da expressão.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Razor</title>
    </head>
    <body>
        
        @{ var engine = "Razor"; }         
        @{ var IDE = "WebMatrix"; }   
        
        <p>A IDE utilizada é o: @IDE </p> 
        <p>A view engine utilizada é o : @engine</p>       
        
        @{      var texto = "O WebMatrix e o Razor são tecnologias  ";      
                var empresa = "Microsoft.";      
                var textoCompleto = texto + " : " + empresa;  
         }  
        
        <p>@textoCompleto</p>
        
    </body>
</html>

Listagem 1 – Utilizando o caractere @

Figura 1 – Utilizando o caractere @
Figura 1 – Utilizando o caractere @

Trabalhando com variáveis

As variáveis são utilizadas guardar informações como números, textos e datas, na sintaxe Razor você pode criar variáveis utilizando a palavra chave reservada “var” e utilizar o carácter especial @ para inserir ou apresentar valores. A sintaxe do Razor é case sensitive, ou seja, letras maiúsculas e minúsculas fazem a diferença, uma variável chamada anonovo é diferente de outra variável chamada AnoNovo.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Variaveis</title>
    </head>
    <body>
        
        <!-- Armazenando valores em uma variavel -->
        @{ var anonovo = "Feliz " + DateTime.Now.Year ; } 
        <!-- Apresentando o texto em uma variavel -->
        <p>@anonovo</p>           
        
    </body>
</html>

Listagem 2 – Trabalhando com variáveis

Figura 2 – Trabalhando com variáveis
Figura 2 – Trabalhando com variáveis

Trabalhando com objetos

Os objetos são elementos que podem ser acessados ou programados em aplicativos, exemplo, uma imagem ou um arquivo, um objeto contém diversas propriedades, para acessar essas propriedades a engine Razor diponibiliza o objeto Request, com ele, por exemplo,  podemos acessar o valor digitado pelo usuário em um objeto <input> em um formulário HTML.

O Formulário da listagem X solicita ao usuário que digite o nome e o sobrenome, após enviar as informações ao servidor através do botão Enviar, a página é novamente acionada e as informações são recuperadas através do objeto Request, inseridas em variáveis e apresentadas através do caracter espercial @.

@{ 
    var nomeCompleto = ""; 
    
    if(IsPost) { 
  
        // Recupera o valor informado 
        // no formulário
        var nome = Request["txtNome"]; 
        var sobrenome = Request["txtSobrenome"]; 
        
        nomeCompleto = nome +  " " + sobrenome;
        
    } 
}

    
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Objetos</title> 
    <meta charset="utf-8" /> 
    <style type="text/css"> 
      body {background-color: beige; font-family: Verdana, Arial;  
            margin: 50px; } 
      form {padding: 8px; border-style: solid; width: 280px;} 
    </style> 
  </head> 
<body> 
    
  <p>Digite o seu nome e sobrenome:</p> 
    
  <form action="" method="post"> 
    
    <p><label for="text1">Nome:</label> 
      <input type="text" name="txtNome" /> 
    </p> 
    
     <p><label for="text1">Sobrenome:</label> 
      <input type="text" name="txtSobrenome" /> 
    </p> 
          
    
    <p><input type="submit" value="Enviar" /></p> 
    
  </form> 
  
  <p>Nome Completo: <b> @nomeCompleto </b></p> 
  
</body> 
</html>

Listagem 3 – Trabalhando com objetos


Figura 3 – Trabalhando com objetos

Trabalhando com comando de decisões e loop

A view engine Razor tem suporte aos principais comandos de decisões e loop utilizados nas mais populares linguagens de programação, o if é um comando utilizado para decidir qual o código será processado com base em uma condição, na listagem X, temos um código de condição utilizando o comando if para decidir qual o código será processado.

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        @{               
          var nota = 8.5;     
          if(nota == 10)     
           {         
                 <p>Nota Máxima</p>     
           }     
           else if (nota  > 7 && nota < 10)     
           {         
                 <p>Nota dentro do perfil de aprovado.</p>     
           } 
           else     
           {         
                 <p>Reprovado.</p>     
           } 
        } 

        
    </body>
</html>

Listagem 4 – Utilizando if

Comandos de loop são essenciais para percorrer elementos em uma aplicação, o Razor tem suporte ao for next, com este comando você pode criar um loop e percorrer os elementos.

@for(var i = 0; i <= 10; i++) 
{     

   <p>Número: @i</p> 
}

Listagem 5 – Utilizando for next 


Figura 4 – for next

Conclusão

O artigo apresentou um overview básico sobre a view engine Razor e um pouco sobre sua sintaxe, mas a tecnologia pode ir muito além, o engine pode manipular coleções, fazer chamadas a métodos com parâmetros, trabalhar com arquivos entre outras tarefas. Seu poder está justamente na elegância e praticidade de inserir a lógica da aplicação diretamente na camada de visualização,  criando uma forma rápida  e simples de criar aplicativos dinâmicos, com a engine Razor, temos uma forma prática de testar uma rotina, desenvolver um pequeno projeto, manipular formulários e dados ou ainda, juntamente com o WebMatrix Beta 3,  pode ser a porta de entrada para o universo de desenvolvimento web com a plataforma .net.

Sobre o Autor

Alexandre Tadashi Sato

(alexandre@h2sistemas.com.br – www.silverlightexperience.blogspot.com)

Gerente de projetos da H2 Sistemas, trabalha com desenvolvimento de sistemas .NET destacando-se aplicações windows, wpf, asp e silverlight. A H2 Sistemas é uma empresa de tecnologia que trabalha com o desenvolvimento de softwares sob medida.