.NEXT FRAMEWORK
Programación
3julio 16, 2025

Introducción a la sintaxis Razor en ASP.NET Core MVC

Razor es una sintaxis de marcado para incrustar código C# del lado del servidor en páginas web. Se utiliza en aplicaciones ASP.NET Core para crear contenido web dinámico. Esta lección le presentará los conceptos fundamentales y la sintaxis de Razor, ayudándole a comprender cómo combinar HTML con código C# para generar páginas web.

1. El Símbolo @: Su Punto de Entrada

El símbolo @ es el núcleo de la sintaxis Razor. Significa la transición de HTML a código C#.

1.1. Expresiones Implícitas

Cuando desea mostrar el valor de una variable C# o una expresión simple directamente en su HTML, utiliza una expresión implícita. Razor escapa automáticamente la salida para prevenir ataques de secuencias de comandos entre sitios (XSS).

Sintaxis: @nombreDeVariable o @expresión

Ejemplo:

<p>¡Hola, @Model.UserName!</p>
<p>El año actual es @DateTime.Now.Year.</p>

1.2. Expresiones Explícitas

Para expresiones C# más complejas que podrían ser ambiguas para Razor, o cuando necesita especificar los límites exactos de una expresión, utiliza expresiones explícitas.

Sintaxis: @(expresión)

Ejemplo:

<p>La suma de 5 y 3 es @(5 + 3).</p>
<p>El nombre completo es @(Model.FirstName + " " + Model.LastName).</p>

Nota: Si el contenido después de @ pudiera interpretarse como parte de la etiqueta HTML, es necesaria una expresión explícita. Por ejemplo, @("Hello")World mostraría “HelloWorld”, pero @Html.Raw("<b>Hello</b>")World requiere sintaxis explícita si Html.Raw no es seguido inmediatamente por un espacio.

2. Bloques de Código

Para una lógica C# más extensa, puede usar bloques de código. Estos bloques le permiten escribir múltiples líneas de código C# dentro de su vista Razor.

Sintaxis: @ { ... }

Ejemplo:

@{
    var saludo = "¡Bienvenido a nuestra página!";
    var hora = DateTime.Now.Hour;
    string parteDelDia;

    if (hora < 12)
    {
        parteDelDia = "mañana";
    }
    else if (hora < 18)
    {
        parteDelDia = "tarde";
    }
    else
    {
        parteDelDia = "noche";
    }
}

<h1>@saludo</h1>
<p>¡Buenas @parteDelDia!</p>

2.1. Mezclando C# y HTML dentro de Bloques de Código

Dentro de un bloque de código C#, puede volver a HTML prefijando el contenido HTML con el operador @:, o envolviéndolo en una etiqueta HTML.

Usando @::

@{
    var items = new List<string> { "Manzana", "Plátano", "Cereza" };

    foreach (var item in items)
    {
        @:<li>@item</li>
    }
}

Usando Etiquetas HTML:

@{
    var mostrarMensaje = true;

    if (mostrarMensaje)
    {
        <p>Este mensaje se muestra porque `mostrarMensaje` es verdadero.</p>
    }
}

Nota: Si el contenido HTML es una sola línea, @: a menudo es preferible. Para múltiples líneas o bloques más grandes, envolverlo en una etiqueta HTML padre es más común.

3. Directivas Razor

Las directivas son instrucciones especiales que comienzan con @ seguido de una palabra clave de Razor. Se utilizan para configurar la vista, importar espacios de nombres o definir tipos de modelos.

3.1. Directiva @model

La directiva @model especifica el tipo de datos que espera la vista. Esto permite un tipado fuerte para los datos de su vista.

Sintaxis: @model Espacio.DeNombres.Completo.De.Su.Modelo

Ejemplo:

@model MyWebApp.Models.Product

<h1>Detalles del Producto</h1>
<p>Nombre: @Model.Name</p>
<p>Precio: @Model.Price.ToString("C")</p>

3.2. Directiva @using

La directiva @using es similar a la declaración using en C# y se utiliza para importar espacios de nombres en la vista, haciendo que los tipos de esos espacios de nombres estén disponibles sin calificación completa.

Sintaxis: @using Espacio.DeNombres.Completo.A.Importar

Ejemplo:

@using System.Collections.Generic
@using MyWebApp.Models

@{
    var listaProductos = new List<Product>();
    // ... añadir productos a la lista
}

3.3. Directiva @inject

La directiva @inject le permite inyectar un servicio desde el contenedor de inyección de dependencias directamente en su vista.

Sintaxis: @inject TipoDeServicio NombreDeServicio

Ejemplo:

@inject MyWebApp.Services.IGreetingService Saludador

<h1>@Saludador.GetGreeting()</h1>

4. Estructuras de Control

Razor soporta declaraciones de flujo de control estándar de C# dentro de bloques de código.

4.1. Lógica Condicional (if, else if, else)

@{
    var rolUsuario = "Admin";
}

@if (rolUsuario == "Admin")
{
    <p>¡Bienvenido, Administrador!</p>
}
else if (rolUsuario == "User")
{
    <p>¡Bienvenido, Usuario!</p>
}
else
{
    <p>¡Bienvenido, Invitado!</p>
}

4.2. Bucles (for, foreach, while)

Bucle for:

@for (int i = 0; i < 5; i++)
{
    <p>Elemento @i</p>
}

Bucle foreach:

@{
    var nombres = new List<string> { "Alicia", "Roberto", "Carlos" };
}

<ul>
    @foreach (var nombre in nombres)
    {
        <li>@nombre</li>
    }
</ul>

Bucle while:

@{
    var contador = 0;
}

@while (contador < 3)
{
    <p>Contador: @contador</p>
    contador++;
}

5. Comentarios

Razor soporta tanto comentarios de C# como comentarios específicos de Razor.

5.1. Comentarios de C#

Estos son comentarios estándar de C# (// para una sola línea, /* ... */ para varias líneas) y se procesan en el lado del servidor, lo que significa que no se renderizan en la salida HTML final.

Ejemplo:

@{
    // Este es un comentario C# de una sola línea
    /*
     * Este es un comentario C#
     * de varias líneas
     */
    var datos = "Datos Importantes";
}

5.2. Comentarios Razor

Estos comentarios son específicos de Razor y tampoco se renderizan en la salida HTML final. Son útiles para comentar la propia sintaxis de Razor.

Sintaxis: @* ... *@

Ejemplo:

@* Este es un comentario Razor que no aparecerá en el código fuente HTML. *@
<p>Algún contenido.</p>

6. Diseños (Layouts) y Secciones (Breve Resumen)

Las vistas Razor a menudo trabajan con Diseños (Layouts) para proporcionar una estructura consistente (como encabezados, pies de página, navegación) en varias páginas. Un diseño es un archivo Razor especial (por ejemplo, _Layout.cshtml).

Las Secciones le permiten definir áreas de contenido específicas dentro de un diseño que las vistas secundarias pueden rellenar.

Ejemplo en un Diseño (_Layout.cshtml):

<!DOCTYPE html>
<html>
<head>
    <title>Mi Aplicación - @ViewBag.Title</title>
</head>
<body>
    <header>
        <h1>Mi Aplicación</h1>
    </header>

    <main>
        @RenderBody() 
@* Aquí es donde se renderizará el contenido de la vista secundaria *@
    </main>

    <footer>
        @RenderSection("Scripts", required: false) 
@* Sección opcional para scripts *@
    </footer>
</body>
</html>

Ejemplo en una Vista Secundaria (Index.cshtml):

@{
    ViewBag.Title = "Página de Inicio";
    Layout = "_Layout"; // Especifica el diseño a usar
}

<h2>¡Bienvenido a la Página de Inicio!</h2>
<p>Este es el contenido principal de la vista Index.</p>

@section Scripts {
    <script>
        console.log(@"Este script es de la vista Index y
 se renderizará en la sección 'Scripts' del diseño.");
    </script>
}

Comments

Post a Comment