Você está na página 1de 8

Introduo ao ASP.

NET Razor
Alexandre Tadashi Sato Janeiro 2011 Tecnologias: WebMatrix Beta 3

Sumrio: Este artigo tem como objetivo apresentar uma introduo ao ASP.NET Razor, uma view engine da Microsoft que permite inserir cdigos diretamente na camada de visualizao da aplicao, facilitando a codificao do projeto.

Contedo
Introduo Como funciona ? Conhecendo o caracter @ Trabalhando com variaveis Trabalhando com objetos Inserindo comandos de deciso e loop Concluso Sobre o Autor

Introduo
O ASP.NET Razor uma view engine que j est includa no WebMatrix, com ele temos a possibilidade de inserir a lgica da aplicao diretamente na camada de visualizao do projeto, por exemplo, possvel inserir a sintax razor junto com os cdigos HTML dentro da mesma pgina, a sintaxe do ASP.NET Razor extremamente simplificada, baseado na linguagem C# .NET, embora seja possvel utilizar a linguagem Visual Basic .NET. Neste artigo voc conhecer o que e como funciona a view engine Razor, este artigo no tem como objetivo aprofundar na sintaxe da view engine Razor, mas apresentar um overview tcnico com o suficiente para criar pginas dinmicas 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, porm com uma sintaxe simplificada, como resultado o programador ganha produtividade alm de ter uma curva de aprendizado menor.

Como funciona?
Com o WebMatrix possvel criar pginas com contedo dinmico, existem dois tipos de contedo, o contedo que executado do lado do cliente, ou seja, a marcao HTML, CSS e JavaScript por exemplo, e o contedo executado do lado do servidor, esse o contedo que utilizamos por exemplo para acessar informaes em base de dados, o Razor permite que voc adicione o cdigo do servidor ao contedo do cliente, sendo que em uma nica pagina criada com o WebMatrix voc poder utilizar marcaes HTML em conjunto com cdigo ASP.NET Razor.

As pginas ASP.NET criadas pelo WebMatrix utilizando a view engine Razor possuem uma extenso de arquivo especial, os arquivos que utilizam como base a linguagem C# .NET tem a extenso CSHTML e as que utilizam do Visual Basic .NET tem a extenso VBHTML, sendo que essas extenses especiais so reconhecidas pelo servidor web e executa em primeiro lugar os cdigos que so executados pelo servidor e em seguida envia a pgina para o navegador.

Conhecendo o caractere @
O caractere especial @ inicia uma expresso, um bloco com uma nica instruo ou vrias, por exemplo, podemos inserir um cdigo Razor diretamente na marcao HTML, utilizando o caractere @ para iniciar um expresso de condio ou apresentar o contedo de uma varivel. Quando voc exibe o contedo de uma pgina utilizando o carter @, o ASP.NET RAZOR codifica a sada, substituindo caracteres reservados do HTML com os cdigos que permitem que sejam exibidos como texto em uma pgina web ao invs de serem interpretados como tag HTML. Os colchetes so utilizados para agrupar uma ou mais expresses iniciadas pelo caractere @, formando blocos de expresses que so executadas em seqncia, assim como na sintaxe da linguagem C# .NET, voc utiliza o ponto e virgula para finalizar uma expresso. No caso de uma expresso inline, ou seja, dentro da marcao HTML utilizando o caracter @, no necessrio utilizar o ponto e vrgula para informar o final da expresso. <!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 so tecnologias var empresa = "Microsoft."; var textoCompleto = texto + " : " + empresa; ";

} <p>@textoCompleto</p> </body> </html> Listagem 1 Utilizando o caractere @

Figura 1 Utilizando o caractere @

Trabalhando com variveis


As variveis so utilizadas guardar informaes como nmeros, textos e datas, na sintaxe Razor voc pode criar variveis utilizando a palavra chave reservada var e utilizar o carcter especial @ para inserir ou apresentar valores. A sintaxe do Razor case sensitive, ou seja, letras maisculas e minsculas fazem a diferena, uma varivel chamada anonovo diferente de outra varivel 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 variveis

Figura 2 Trabalhando com variveis

Trabalhando com objetos


Os objetos so elementos que podem ser acessados ou programados em aplicativos, exemplo, uma imagem ou um arquivo, um objeto contm diversas propriedades, para acessar essas propriedades a engine Razor diponibiliza o objeto Request, com ele, por exemplo, podemos acessar o valor digitado pelo usurio em um objeto <input> em um formulrio HTML. O Formulrio da listagem X solicita ao usurio que digite o nome e o sobrenome, aps enviar as informaes ao servidor atravs do boto Enviar, a pgina novamente acionada e as informaes so recuperadas atravs do objeto Request, inseridas em variveis e apresentadas atravs do caracter espercial @. @{ var nomeCompleto = ""; if(IsPost) { // Recupera o valor informado // no formulrio 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 decises e loop


A view engine Razor tem suporte aos principais comandos de decises e loop utilizados nas mais populares linguagens de programao, o if um comando utilizado para decidir qual o cdigo ser processado com base em uma condio, na listagem X, temos um cdigo de condio utilizando o comando if para decidir qual o cdigo 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 Mxima</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 so essenciais para percorrer elementos em uma aplicao, 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>Nmero: @i</p> } Listagem 5 Utilizando for next

Figura 4 for next

Concluso
O artigo apresentou um overview bsico sobre a view engine Razor e um pouco sobre sua sintaxe, mas a tecnologia pode ir muito alm, o engine pode manipular colees, fazer chamadas a mtodos com parmetros, trabalhar com arquivos entre outras tarefas. Seu poder est justamente na elegncia e praticidade de inserir a lgica da aplicao diretamente na camada de visualizao, criando uma forma rpida e simples de criar aplicativos dinmicos, com a engine Razor, temos uma forma prtica de testar uma rotina, desenvolver um pequeno projeto, manipular formulrios 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.

Você também pode gostar