.NET - Razor para iniciantes - Conceitos (revisitado)

Vamos começar com um breve histórico sobre as plataformas de desenvolvimento web da Microsoft.

ASP - foi a primeira resposta da Microsoft para as necessidades de desenvolvimento para web. A Active Server Pages é uma linguagem de scripts na qual o código e as tags de marcação html estão presentes em um único arquivo que corresponde a uma página de um web site. Ela tornou-se muito popular e foi muito difundida.
 
ASP .NET Web Forms - Da mesma forma que os sites da web ASP , os web sites ASP .NET se baseiam em uma abordagem baseada na página, onde cada página do site é representado por um formulário de um único arquivo físico chamado Web Form e acessado pelo nome do arquivo.

Ao contrário de uma página utilizando ASP, uma página Web Forms fornece alguma separação de código e de marcação, dividindo o conteúdo da web em dois arquivos diferentes: um para o código e outro para a marcação. A abordagem ASP.NET e Web Forms serviu às necessidades dos desenvolvedores por anos e continua a ser o framework de desenvolvimento web para muitos
 
ASP .NET MVC - A Microsoft foi rápida em perceber a necessidade crescente na comunidade de desenvolvedores ASP.NET para algo diferente da abordagem de página baseada nos Web Forms, e ,lançou o primeira versão do ASP.NET MVC, em 2008. Representando uma alternativa à abordagem Web Forms, dessa forma a ASP.NET MVC abandona a arquitetura baseada em página completamente, usando uma arquitetura MVC- Model-View-Controller.

Embora ela ainda aproveite uma grande parte do framework anterior, a ASP.NET MVC representa uma abordagem nova pois em vez de arquivos de marcação, as views assumem a responsabilidade pela apresentação do conteúdo HTML para o usuário. ASP.NET MVC deixa para desenvolvedores escolher a sintaxe que eles irão usar criar as suas views: permitindo a sintaxe ASPX e a Razor; a sintaxe Razor emergiu rapidamente e esta se tornando popular entre os desenvolvedores ASP .NET.
 
WebMatrix - Lançada ao mesmo tempo que a ASP.NET MVC 3 no início de 2011, a WebMatrix é um ambiente de desenvolvimento web, simples, direto e livre. A tecnologia WebMatrix é composta por uma ambiente simples de desenvolvimento integrado (IDE) e uma API (chamada de Web Pages), sendo um ajuste natural na evolução das estruturas de desenvolvimento da Microsoft para web. A WebMatrix oferece assim um meio termo para aqueles que véem a ASP como um obstáculo para o desenvolvimento orientado a objetos, a ASP.NET Web Forms como uma abstração do núcleo HTML/CSS/JavaScript e a ASP.NET MVC como um ambiente muito complexo.
   Olá Razor

Razor é uma sintaxe de marcação que lhe permite inserir código baseado em servidor (Visual Basic e C#) em páginas da web.

O código baseado em servidor pode criar conteúdo web dinâmico em tempo real, enquanto uma página web é escrita para o navegador. Quando uma página web é chamada, o servidor executa o código baseado no servidor dentro da página antes que ele retorne a página para o navegador. Ao executar no servidor, o código pode executar tarefas complexas, como acessar bancos de dados, acessar arquivos, etc.

Razor é baseada em ASP.NET, e projetada para a criação de aplicações web. Ela tem o poder de marcação ASP .NET tradicional mas é mais fácil de usar e de aprender.

Assim Razor é uma sintaxe de templates que permite que você combine código e conteúdo de uma forma expressiva e fluída. Embora ele introduza alguns símbolos e palavras-chaves, o Razor não é uma nova linguagem; ele apenas permite que você escreva código usando linguagens que você já conhece como VB .NET E C#.

A curva de aprendizado Razor é bem curta e permite que você trabalhe com as suas habilidades e conhecimentos já existentes; então se você já sabe como escrever HTML e fazer chamadas a API na plataforma .NET não será novidade para você escrever o seguinte código:

<div>Esta página foi rendereizada às @DateTime.Now</div>

que produz o seguinte resultado :

Esta página foi renderizada às 30/03/2013 7:38:00

Este exemplo inicia com uma tag padrão HTML, a tag <div>, seguida por um trecho de texto estático, mesclado como um texto dinâmico que é renderizado pela chamada a classe System.Datetime da plataforma .NET e finalizado pela tag </div>.

O parser Razor permite que os desenvolvedores sejam mais expressivos com sua lógica e permite uma transição suave entre o código e as tags de marcação HTML. Assim quanto mais avançada a marcação html mais fácil é enxergar como a sintaxe Razor é mais clara e expressiva que a sintaxe Web Forms.

Veja os exemplos abaixo comparando a sintaxe Razor com a Web Forms requerida para produzir o mesmo HTML:

1- Usando uma instrução if/else

<% if(User.IsAuthenticated) { %>
<span>Ola, <%= User.Username %>!</span>
<% } %>
<% else { %>
<span>Por Favor <%= Html.ActionLink("log in") %></span>
<% } %>		 @if(User.IsAuthenticated) {
<span>Olá, @User.Username!</span>
} else {
<span>Por Favor @Html.ActionLink("log in")</span>
}
Web Forms Razor

2- Usando um laço for/each

<ul>
<% foreach( var post in blogPosts) { %>
<li><a href="<%= post.Href %>"><%= post.Titulo %></a></li>
<% } %>
</ul>
<ul>
@foreach( var post in blogPosts) {
<li><a href="@post.Href">@post.Titulo</a></li>
}
</ul>
Web Forms Razor

Embora a diferença entre a sintaxe Web Forms a sintaxe Razor seja de apenas de alguns caracteres, eles fazem uma grande diferença na legibilidade da marcação.

Uma das maiores reclamações dos desenvolvedores que tentam usar Web Forms para criar uma marcação dinâmica é que sua sintaxe é tão detalhada que pode tirar o foco da lógica da página e de seu conteúdo. Além disso, como a sintaxe Web Forms se assemelha muito com a marcação HTML, muitas vezes é difícil determinar rapidamente quais as partes são código e quais são marcação.

Em contraste direto, Razor usa uma marcação mínima para realizar as mesmas tarefas. E além disso, a sintaxe Razor foi deliberadamente concebida para se misturar com HTML sem conflitos.

O Razor permite duas formas de diferenciar o código das tags de marcação html : code nuggets e code blocks.

Os code nuggets são expressões simples que são avaliadas e processadas inline. Eles podem ser misturados com texto. Exemplo:

Você não está logado: @Html.ActionLink ("Login", "Login")

A expressão começa imediatamente após o símbolo @, e Razor é inteligente o suficiente para saber que o fechamento do parêntese indica o fim desta declaração particular. O código irá gerar a seguinte saída:

Você não está logado: Login <a href="/Login"> </ a>

Observe que o code nuggets deve sempre retornar a marcação para view renderizar. Se você escrever uma código que não retorna nada (ou seja, retorna void), você vai receber um erro quando a view for executada.

Um code block ou bloco de código é uma seção da view que contém estritamente código em vez de uma combinação de marcação e código. O Razor define um bloco de código como qualquer modelo Razor envolto em caracteres @{}.

Os caracteres {@ marcam o início do bloco, seguido por qualquer número de linhas de código. O caractere } fecha o bloco de código. Tenha em mente que o código dentro de um bloco de código não é como o código usado nos code nuggets.

Ele é completamente formado e deve seguir as regras da linguagem atual, por exemplo, cada linha de código escrito em C# deve incluir um ponto e vírgula(;) no final, como geralmente usamos dentro de uma classe em um arquivo de .cs.

Abaixo temos um exemplo de um bloco de código típico:

@ {
    LayoutPage = "~/Views/Shared/_Layout.cshtml";
    View.Title = "Detalhes do produto para" + Model.NomeProduto;
}

Os blocos de código não renderizam qualquer coisa para a página, em vez disso, eles permitem que você escreva código que não requer nenhum valor de retorno. Variáveis definidas dentro de blocos de código podem ser usadas pelos code nuggets no mesmo escopo. Isto é, variáveis definidas no escopo de um laço foreach ou recipiente similar só será acessível dentro desse recipiente.

Variáveis que são definidas no nível da página (não em qualquer tipo de recipiente) será acessível para qualquer bloco de código ou code nuggets na página. Para esclarecer isso, vamos usar uma view com algumas variáveis definidas em diferentes escopos:

@ {
// As variáveis cliente e pedido estão
// Disponíveis na página inteira
var cliente = Model.Customer;
var pedido = Model.Order;
}
<h1> @ customer.Name Ordem <h1> Detalhes
<div class="items">
<-! Percorre a propriedade itens na variavel pedido ->
@ Foreach (item var in order.Items) {
   <-! A variável item só está disponível dentro do loop foreach ->
<div>
<-! Um hiperlink constrói uma URL para a pagina Order Item usando o ID do pedido e o ID do item ->
<a href="/orders/@order.ID/@item.ID"> item.Name @ </ a>
</ div>
}
<- Isto irá lançar um erro:! a variável item não existe neste escopo! ->
<div> último item: @ item.Name </ div>
</div>

Assim os blocos de código são um meio para executar código dentro de um template e não renderizar nada para a view. Em contraste os code nuggets fornecem um valor de retorno para view renderizar, ou seja, a view vai ignorar completamente os valores que um bloco de código retorna.

Razor para VB .NET

A seguir um pequeno resumo da sintaxe Razor realizando as tarefas mais comuns usando a linguagem VB .NET :

1- Declarar variáveis - É basicamente igual à linguagem VB  .NET

// Usando a palavra chave Dim :
Dim site = "Macoratti .net"
Dim numero = 103
Dim hoje = DateTime.Today

// Usando tipos de dados:
Dim site As String = "Macoratti .net"
Dim numero As Integer  = 103
Dim hoje As DateTime = DateTime.Today

2- Laços - For

<html>
<body>
@For i=10 To 21
    @<p>Line #@i</p>
Next i
</body>
</html>

3 - Laços - For/Each

<html>
<body>
<ul>
@For Each x In Request.ServerVariables
    @<li>@x</li>
Next x
</ul>
</body>
</html>

4 - Laços While

<html>
<body>
@Code
Dim i=0
Do While i<5
    i += 1
    @<p>Line #@i</p>
Loop
End Code
</body>
</html>

5 - Arrays

@Code
Dim membros As String()={"Jani","Mac","Jeff","Jess"}
i=Array.IndexOf(membros,"Jeff")+1
len=membros.Length
x=membros(2-1)
end Code
<html>
<body>
<h3>Membros</h3>
@For Each pessoa In membros
   @<p>@pessoa</p>
Next pessoa
<p> O numero de nomes em Membros são @len</p>
<p>A pessoa na posição 2 eh @x</p>
<p>Jeff esta agora na posição @i</p>
</body>
</html>

6 - Condição If/Else

@Code
Dim preco=20
End Code
<html>
<body>
@if preco>30 then
    @<p>O preço é muito alto.</p>
Else
    @<p>O preço esta bom.</p>
End If
</body>
</htmlV>

7 - Condição if/ElseIf

@Code
Dim preco=25
End Code
<html>
<body>
@If preco>=30 Then
    @<p>O preço esta alto.</p>
   ElseIf preco>20 And preco<30
    @<p>O preço esta bom.</p>
   Else
    @<p>O preco esta baixo.</p>
  End If   
</body>
</html>

8 - Select Case

@Code
Dim weekday=DateTime.Now.DayOfWeek
Dim dia=weekday.ToString()
Dim mensagem=""
End Code
<html>
<body>
@Select Case dia
Case "Monday"
    mensagem="Primeiro dia da semana."
Case "Thursday"
    mensagem="Um dia antes do fim de semana."
Case "Friday"
    mensagem="Amanha eh sabado"
Case Else
    mensagem="Hoje é " & dia
End Select
<p>@mensagem</p>
</body>
</html>

João 6:37 Todo o que o Pai me dá virá a mim; e o que vem a mim de maneira nenhuma o lançarei fora.

João 6:38 Porque eu desci do céu, não para fazer a minha vontade, mas a vontade daquele que me enviou.

João 6:39 E a vontade do que me enviou é esta: Que eu não perca nenhum de todos aqueles que me deu, mas que eu o ressuscite no último dia.

Referências:

José Carlos Macoratti