ASP.NET Razor - Sintaxis de código C# y VB

Razor admite tanto C# (C sharp) como VB (Visual Basic).

Principales reglas de sintaxis de Razor C#

  • Los bloques de código Razor se incluyen en @{ ... }
  • Las expresiones en línea (variables y funciones) comienzan con @
  • Las declaraciones de código terminan con punto y coma
  • Las variables se declaran con la palabra clave var
  • Las cadenas se encierran entre comillas
  • El código C# distingue entre mayúsculas y minúsculas
  • La extensión de archivo de C# es .cshtml

Ejemplo de C#

<!-- Single statement block -->
@{ var myMessage = "Hello World"; }

<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>

<!-- Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

Ejecutar ejemplo »

Principales reglas de sintaxis de Razor VB

  • Los bloques de código Razor se incluyen en @Code ... End Code
  • Las expresiones en línea (variables y funciones) comienzan con @
  • Las variables se declaran con la palabra clave Dim
  • Las cadenas se encierran entre comillas
  • El código VB no distingue entre mayúsculas y minúsculas
  • La extensión de archivo de VB es .vbhtml

Ejemplo

<!-- Single statement block -->
@Code dim myMessage = "Hello World" End Code

<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>

<!-- Multi-statement block -->
@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
End Code

<p>The greeting is: @greetingMessage</p>

Ejecutar ejemplo »

¿Cómo funciona?

Razor es una sintaxis de programación simple que incrusta código de servidor en páginas web.

La sintaxis de Razor se basa en el marco ASP.NET, la parte del marco Microsoft .NET dedicada a la creación de aplicaciones web.

La sintaxis de Razor admite todas las funcionalidades de ASP.NET, pero utiliza una sintaxis simplificada que es más fácil de aprender para los principiantes y más eficiente para los expertos.

Las páginas web Razor se pueden describir como páginas HTML con dos tipos de contenido: contenido HTML y código Razor.

Cuando el servidor lee la página, primero ejecuta el código Razor y luego envía la página HTML al navegador. El código que se ejecuta en el servidor puede realizar tareas que no se pueden completar en el navegador, como acceder a la base de datos del servidor. El código de servidor puede crear contenido HTML dinámico y luego enviarlo al navegador. Desde el navegador, el HTML generado por el código de servidor no difiere del contenido HTML estático.

Las páginas web ASP.NET con sintaxis Razor tienen extensiones de archivo especiales: .cshtml (Razor C#) o .vbhtml (Razor VB).

Uso de objetos

El código de servidor suele implicar objetos.

El objeto 'Date' es un objeto ASP.NET integrado típico, pero los objetos también pueden ser personalizados, como una página web, un cuadro de texto, un archivo, un registro de base de datos, etc.

Los objetos tienen métodos para ejecutar acciones. Un registro de base de datos puede tener un método 'Save', un objeto de imagen puede tener un método 'Rotate', un objeto de correo electrónico puede tener un método 'Send', etc.
Los objetos también tienen propiedades que describen sus características. Un registro de base de datos puede tener propiedades FirstName y LastName.

El objeto Date de ASP.NET tiene una propiedad Now (escrita como Date.Now), y la propiedad Now tiene una propiedad Day (escrita como Date.Now.Day). El siguiente ejemplo muestra cómo acceder a algunas propiedades del objeto Date:

Ejemplo

<table border="1">
<tr>
<th width="100px">Name</th>
<td width="100px">Value</td>
</tr>
<tr>
<td>Day</td><td>@DateTime.Now.Day</td>
</tr>
<tr>
<td>Hour</td><td>@DateTime.Now.Hour</td>
</tr>
<tr>
<td>Minute</td><td>@DateTime.Now.Minute</td>
</tr>
<tr>
<td>Second</td><td>@DateTime.Now.Second</td>
</tr>
</td>
</table>

Ejecutar ejemplo »

Condiciones If y Else

Una característica importante de las páginas web dinámicas es que puede decidir qué hacer según las condiciones.

La forma común de hacer esto es usando una declaración if ... else:

Ejemplo

@{
var txt = "";
if(DateTime.Now.Hour > 12)
{txt = "Good Evening";}
else
{txt = "Good Morning";}
}
 <html>
<body>
<p>The message is @txt</p>
</body>
</html>

Ejecutar ejemplo »

Lectura de entrada del usuario

Otra característica importante de las páginas web dinámicas es que puede leer la entrada del usuario.

La entrada se lee a través de la función Request[], y el envío de los datos de entrada se evalúa con la condición IsPost:

Ejemplo

@{
var totalMessage = "";
if(IsPost)
{
var num1 = Request["text1"];
var num2 = Request["text2"];
var total = num1.AsInt() + num2.AsInt();
totalMessage = "Total = " + total;
}
}
<html>
<body style="background-color: beige; font-family: Verdana, Arial;">
<form action="" method="post">
<p><label for="text1">First Number:</label><br>
<input type="text" name="text1" /></p>
<p><label for="text2">Second Number:</label><br>
<input type="text" name="text2" /></p>
<p><input type="submit" value=" Add " /></p>
</form>
<p>@totalMessage</p>
</body>
</html>

Ejecutar ejemplo »

Otras extensiones