Conceitos fundamentais sobre ASP.NET Razor

 Uma aplicação web atual pode ser subdividida internamente em três camadas essenciais: acesso a dados, regras de negócio e visualização. O pattern MVC (Model-View-Controller) disponibiliza um modelo de programação fortemente baseado neste contexto. Assim, se as responsabilidades são tão separadas dentro de uma aplicação, é perfeitamente possível e natural que, os modelos internos de desenvolvimento em cada camada evoluam.

Por algum tempo no passado, muitas tecnologias e frameworks eram propostos para otimizar não apenas o processo de escrita de códigos nos dois modelos de nível mais baixo (entenda-se: dados e negócios) das aplicações mas também o resultado final gerado. Algo que ocorria frequentemente era: as tecnologias para a camada final de visualização não evoluiam no mesmo ritmo que as demais.

Com a grande evolução sofrida por tecnologias já tradicionais do processo (HTML 5, CSS 3, jQuery, LESS, etc.) e o advento de novas e robustas (como ASP.NET Razor, por exemplo), a camada de visualização de dados de aplicações web dentro da plataforma .NET teve este cenário outrora desfavorável modificado para extremamente favorável.

Este módulo do treinamento tratará apenas da camada de visualização de aplicações web dentro da plataforma .NET, mais especificamente de sua nova tecnologia padrão para este fim – a saber, ASP.NET Razor.

Conhecendo o ASP.NET Razor

Definição: ASP.NET Razor é uma view engine. É uma nova forma de escrever visualizações em aplicações web.

Esta definição é fundamental pois traz consigo duas características muito importantes acopladas, as quais discutimos a seguir. O objetivo principal da tecnologia também está implícito através dela.

• Não é linguagem de programação: esta é uma confusão muito comum realizada por desenvolvedores que iniciam seus estudos sobre Razor. ASP.NET Razor é um novo modelo de programação e não uma nova linguagem. Muito embora possua verbetes próprios, o que de fato ocorre é, no back-end, temos C# ou VB sendo executado. Além disso, é perfeitamente possível construir views utilizando Razor sem utilizar sua sintaxe específica, isto porque o usuário pode utilizar seu expertise de C# ou VB para escrever as views no modelo Razor.
• Linguagens robustas renderizadas na view: com Razor o desenvolvedor web ganha o poder de incorporar códigos escritos em linguagens como C# e VB em um novo ambiente – as views.

O ASP.NET Razor surgiu como parte do projeto do WebMatrix. Na verdade, Razor surgiu para ser a linguagem padrão para a construção de aplicações .NET dentro da ferramenta. Logo, se WebMatrix surgiu com o objetivo de ser uma ferramenta que simplifica o processo de construção de aplicações web robustas, Razor automaticamente carrega a mesma responsabilidade.

Razor agregou tanto valor a ferramenta, que o time de produto do ASP.NET MVC incorporou a view engine como padrão do framework a partir da versão 3.

Características funcionais

O ASP.NET Razor possui uma série de características que a tornam extremamente interessantes. A seguir, apresentamos as principais delas:

• Código limpo e legível: sem dúvida, a principal característica do ASP.NET Razor é a simplicidade na construção dos códigos. É possível construir páginas extremamente elaboradas, ricas em conteúdo com código organizado e limpo, gerando assim, facilidade no processo de manutenção do mesmo.
•  Razor não é uma linguagem: aqui está um motivo de grande confusão daqueles que iniciam os estudos com ASP.NET Razor. Muito embora você seja levado a pensar desta forma, o ASP.NET Razor não é uma nova linguagem de programação e sim, um novo modelo de programação. Para utilizar Razor em suas aplicações, você poderá utilizar seus conhecimentos das linguagens C# (C-Sharp) ou VB (Visual Basic). Caso sua escolha seja pela linguagem C#, o arquivo em que trabalhará terá a extensão "cshtml". Caso a linguagem escolhida seja o Visual Basic, seu arquivo possuirá a extensão "vbhtml".
• Helpers: uma das possibilidades interessantes do ASP.NET Razor é a de utilizar helpers. Helpers são funcionalidades específicas (por exemplo: formulário de busca no Bing, exibição de twits, integração com Facebook, etc.) já implementadas e disponibilizadas gratuitamente para utilização. Para alguns casos, a utilização de helpers diminui em grande escala o tempo gasto no processo de desenvolvimento de algumas tarefas. É possível também criar helpers personalizados.
• Fácil aprendizagem: outra característica importante do ASP.NET Razor é a facilidade na aprendizagem do mesmo, haja vista a simplicidade para escrever códigos proporcionada por ele.

Recursos básicos

A partir daqui apresentaremos uma visão geral acerca dos recursos básicos disponíveis no modelo Razor de programação. Estes conceitos são fundamentais para entender o funcionamento da linguagem e são base para o entendimento das próximas aulas do treinamento neste módulo.

As páginas Razor podem assumir duas extensões, dependendo da linguagem base de programação escolhida. Se a escolha for codificar com C#, a página assume a extensão ".cshtml". Se a escolha for por codificar em Visual Basic, a página assume a extensçao ".vbhtml".

1.      Adicionando código na página com através do caracter '@'

O modelo Razor de programação disponibiliza basicamente três modelos para a codificação no contexto de uma página com código HTML: bloco unitário, incorporado e bloco multi linhas (em inglês: single block, inline e multi-block, respectivamente).

Para que esta ideia fique clara, considere o trecho de código apresentado pela Listagem 1.

<!-- Bloco unitário -->
@{ var Nome = "Fabrício Lopes Sanchez"; }
@{ var Idade = 28; }

<!-- Incorporado -->
<p>O nome do usuário é: @Nome</p>
<p>A idade do usuário é: @Idade</p>

<!-- Multi linhas -->
@{
    var Modelo = "IX35";
    var Tipo = "SUV";
    var Fabricante = "Hyundai";
    var Mensagem = "O modelo é: " + Modelo + ". Este carro é do tipo " + Tipo + " e é fabricado por " + Fabricante + ".";
}
<h1>Informações do carro do cliente "@Nome"</h1>
<p>@Mensagem</p>

Listagem 1. Utilizando os blocos de código do ASP.NET Razor

Analisando-se a Listagem 1 fica fácil evidenciar os três de tipos de modelos de codificação e dispensa maiores comentários. Algumas observações pertinentes neste momento são:

• O interpretador do Razor é inteligente o suficiente para "saber" diferenciar os diferentes contextos. Um exemplo é o modelo incorporado. O interpretador é inteligente o suficiente para diferenciar o contexto do Razor do HTML.
• Razor conserva aspectos dinâmicos disponíveis também nas linguagens da .NET framework, como pode ser observado através da palavra reservada "var".
• A linguagem escolhida para a escrita do exemplo apresentado pela Listagem 1 foi C# e, neste caso, o arquivo deveria possuir a extensão ".cshtml".
• Codificação de elementos HTML. Quando Razor exibe uma saída, ele codifica o conteúdo de elementos HTML por outros códigos por questão de segurança (como pode ser visualizado na Figura 2).
• Com Razor é perfeitamente possível utilizar variáveis. Lembre-se, estamos utilizando C# no back-end.

O resultado produzido pelo código apresentado pela Listagem 1 pode ser visualizado na Figura 1.

 Figura 1. Resultado do processamento do código da Listagem 1

Figura 2. Os caracteres codíficados pelo interpretador Razor

 2.      Trabalhando com objetos

Objetos são elementos que possuem propriedades e métodos. Estes elementos são abstrações do mundo real e as propriedades e métodos descrevem estas abstrações. Com Razor, como trabalhamos com linguagens orientadas a objetos como plano de fundo, temos a possibilidade de utilizar este recurso.

Para entender uma das formas possíveis de se utilizar objetos com a sintaxe Razor, considere o exemplo apresentado pela Listagem 2.

<h1>Trabalhando com o objeto Request</h1>

<table style="border:1px dotted #000;">
    <tr>
        <td>URL Requisitada</td>
        <td>Caminho Relativo</td>
        <td>Tipo de Requisição</td>
    </tr>
    <tr>
        <td>@Request.Url</td>
        <td>@Request.FilePath</td>
        <td>@Request.RequestType</td>
    </tr>
</table>

 Listagem 2. Trabalhando com o objeto "Request"

No código apresentado pela Listagem 2 basicamente o que temos é: um objeto "Request" e a exibição dos valores armazendas em cada propriedade. Este texto não irá apresentar os conceitos de orientação objetos pois não é o foco do mesmo. Você pode encontrar um bom texto de referência sobre orientação a objetos seguindo este link.

Razor oferece ainda a possibilidade de criar suas próprias classes e instanciar seus próprios objetos.

O resultado do processamento do código apresentado pela Listagem 2 pode ser visualizado na Figura 3.

 Figura 3. Resultado do processamento do código da Listagem 2

 3.      Estruturas condicionais

Com Razor o desenvolvedor pode construir trechos de códigos que "tome decisões" com base em situações específicas. A tomada de decisão pode ser realizada utilizando-se dois recursos básicos: "if/else" e/ou "switch/case". Como exemplo de utilização, considere o trecho de código apresentado pela Listagem 3.

@{
    var Valor = 5;

    if(Valor > 3)
    {
        Valor = Valor *= 3;
    }
}
<p>O valor da operação é: @Valor</p>

Listagem 3. Utilizando uma estrutura condicional 

 O resultado natural da execução do trecho de código apresentado pela Listagem 3 pode ser visualizado na Figura 4.

 Listagem 4. Tomada de decisão em execução

 4.      Conversão de tipos

Razor também oferece métodos que possibilitam a conversão entre tipos de dados. Estes métodos são especialmente úteis quando os valores estão chegando de um "ambiente externo" e não se tem certeza quanto ao formato de entrada sendo que, para a realização de determinados tipos de operações posteriores, são requeridos tipos específicos

A Tabela 1 a seguir, apresenta os métodos para conversão de tipos disponíveis no vocabulário Razor com breve descrição e exemplos de como utilizar cada um deles.

var NumeroInteiro = 0;
var NumeroString = "256";
if(NumeroString.IsInt() == true)
    {
        NumeroInteiro = NumeroString.AsInt();
    }

var ValorString = "True";
var NovoBooleano = ValorString.AsBool();

var ValorFloatString = "10,23";
var ValorFloat = ValorFloatString.AsFloat();

var ValorDecimalString = "25485,548";
var ValorDecimal = ValorDecimalString.AsDecimal();

var DataString = "08/12/1983";
var Data = DataString.AsDateTime();

int Valor1 = 20;
int Valor2 = 28;
int Soma = Valor1 + Valor2;
var Concatenacao = Valor1.ToString() + Valor2.ToString();
Response.Write(Soma);
Response.Write(Concatenacao);

Tabela 1. Conversão de tipos utilizando Razor

1. Operadores

Razor incorpora todas as características do C#, logo, os operadores a serem utilizados na construção das expressões lógicas e/ou aritméticas são os mesmos. A Tabela 2 apresenta os operadores da linguagem e suas formas de utilização.

//Adição
var Soma = 12 + 52;

//Subtracao
int Subtracao = 1245852 - Soma;
    
//Multiplicacao
var Multiplicacao = 12;
Multiplicacao = Multiplicacao * Subtracao;

//Divisão
var Divisao = Multiplicacao / 2;

var Multiplicacao = 12;

var A = 12;
if(A == 12)
{
   Response.Write("Iguais!");       
}

if(A != 12)
{
     Response.Write("Diferentes!");
}

var Valor = 134;
if(Valor > 100)
{
     Valor++;
}
else if(Valor < 100)
{
     Valor--;
}

var Concatenacao = Valor1.ToString() + Valor2.ToString();

var Valor = 134;
if(Valor > 100)
{
    Valor *= 20;
    Response.Write(Valor);
}

Response.Write(Valor);

if(!Valor == 143)
{
    Response.Write("O valor é diferente de 143!");
}

if(Valor > 100 && Valor < 200)
{
    Response.Write("O valor está entre 100 e 200.");
}

Conclusão

ASP.NET Razor renova o conceito de web pages dentro da plataforma .NET. Razor apresenta um novo modelo de programação na camada de visualização que permite adicionar lógica de forma robusta sem perder a simplicidade. Esta característica faz com que a curva de aprendizado de desenvolvedores web de forma geral seja minimizada.

Razor incrementa produtividade no processo de construção de páginas web pois, diminui a quantidade de código escrito e facilita a manutenção do mesmo.