Comandos Razor
Razor es el motor de plantillas de ASP.NET MVC que permite incrustar código C# dentro de HTML para generar vistas dinámicas. Aquí tienes los comandos más comunes de Razor junto con ejemplos:
1. Imprimir Variables o Expresiones
Para mostrar datos en la vista, Razor utiliza @ para evaluar expresiones de C#.
@{
var nombre = "Juan";
var edad = 30;
}
<p>Nombre: @nombre</p> <!-- Muestra "Nombre: Juan" -->
<p>Edad: @edad</p> <!-- Muestra "Edad: 30" -->
2. Comentarios en Razor
- Comentario de Razor: se usa
@* *@y es ignorado en la salida HTML. - Comentario HTML: se usa
<!-- -->y aparecerá en el HTML generado.
@* Comentario de Razor que no se mostrará en el HTML *@
<!-- Comentario HTML que aparecerá en el HTML generado -->
3. Bloques de Código (@{ })
Permite ejecutar bloques de código C# dentro de una vista Razor.
@{
var mensaje = "Hola, Mundo!";
int numero = 10;
numero *= 2;
}
<p>@mensaje</p> <!-- Muestra "Hola, Mundo!" -->
<p>@numero</p> <!-- Muestra "20" -->
4. Declaraciones Condicionales (if, else, switch)
Razor permite el uso de condiciones para mostrar o ejecutar contenido en función de alguna lógica.
@{
int edad = 20;
}
@if (edad >= 18)
{
<p>Eres mayor de edad.</p>
}
else
{
<p>Eres menor de edad.</p>
}
5. Bucles (for, foreach, while)
Los bucles permiten repetir el contenido HTML con base en condiciones o listas.
@{
var numeros = new List<int> { 1, 2, 3, 4, 5 };
}
<ul>
@foreach (var numero in numeros)
{
<li>@numero</li> <!-- Genera una lista con números del 1 al 5 -->
}
</ul>
6. Helpers HTML (HtmlHelper)
Los Helpers HTML proporcionan métodos para generar elementos HTML de forma tipada, como formularios y enlaces.
Html.TextBoxFor: Crear un cuadro de texto vinculado a una propiedad de modelo.Html.DropDownListFor: Crear una lista desplegable.Html.ActionLink: Crear un enlace a una acción.
@model MiApp.Models.Persona
<p>@Html.TextBoxFor(model => model.Nombre)</p>
<p>@Html.DropDownListFor(model => model.Genero, new SelectList(new[] { "Masculino", "Femenino" }))</p>
<p>@Html.ActionLink("Ir a Inicio", "Index", "Home")</p>
7. Renderizado de Partiales
Permite incluir una vista parcial dentro de otra vista.
@Html.Partial("NombreVistaParcial") <!-- Renderiza una vista parcial -->
@await Html.PartialAsync("NombreVistaParcial") <!-- Asíncrono -->
8. Model en una Vista Tipada
Si la vista tiene un modelo fuertemente tipado, @model se declara al inicio y se usa @Model para acceder a sus propiedades.
Modelo (Persona.cs):
public class Persona
{
public string Nombre { get; set; }
public int Edad { get; set; }
}
Vista (DetallePersona.cshtml):
@model MiApp.Models.Persona
<p>Nombre: @Model.Nombre</p> <!-- Muestra el nombre de la persona -->
<p>Edad: @Model.Edad</p> <!-- Muestra la edad de la persona -->
9. Layouts
Los layouts permiten definir una plantilla base para las vistas y agregar secciones específicas en cada una.
Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<header>
<h1>Sitio Web</h1>
</header>
<main>
@RenderBody() <!-- Donde se renderiza el contenido de cada vista -->
</main>
</body>
</html>
Vista (Index.cshtml):
@{
Layout = "_Layout";
ViewData["Title"] = "Inicio";
}
<h2>Bienvenido a la página de inicio</h2>
10. Renderizar Contenido (RenderSection y RenderBody)
RenderBody: lugar en el layout donde se muestra el contenido de la vista.RenderSection: permite definir secciones opcionales o requeridas.
Layout (_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
</head>
<body>
<header>
<h1>Sitio Web</h1>
</header>
<main>
@RenderBody() <!-- Muestra el contenido principal -->
</main>
@RenderSection("Scripts", required: false) <!-- Sección opcional para scripts -->
</body>
</html>
Vista (Index.cshtml):
@{
Layout = "_Layout";
ViewData["Title"] = "Inicio";
}
<h2>Página de Inicio</h2>
@section Scripts {
<script>
console.log("Script específico de la vista de inicio");
</script>
}
11. Helper para URLs (Url.Action, Url.Content)
Razor permite crear URLs en función de rutas o acciones para evitar enlaces duros.
<!-- URL para una acción específica en un controlador -->
<a href="@Url.Action("Accion", "Controlador")">Ir a Acción</a>
<!-- URL para contenido estático -->
<img src="@Url.Content("~/imagenes/logo.png")" alt="Logo">
12. Ejecutar Funciones en la Vista
Puedes definir y llamar a funciones C# dentro de la vista.
@functions {
public string ObtenerSaludo()
{
return "Hola desde una función!";
}
}
<p>@ObtenerSaludo()</p> <!-- Muestra "Hola desde una función!" -->
13. Condicional Inline (?:)
Para condiciones simples, Razor permite el uso del operador ternario.
@{
bool esAdmin = true;
}
<p>@(esAdmin ? "Administrador" : "Usuario")</p> <!-- Muestra "Administrador" si esAdmin es true -->
14. Forzar Salida Literal HTML (@Html.Raw)
Cuando necesitas renderizar texto HTML almacenado en una cadena, Html.Raw lo muestra sin escape.
@{
string mensaje = "<strong>Mensaje importante</strong>";
}
<p>@Html.Raw(mensaje)</p> <!-- Renderiza el HTML sin escapar -->
15. Incluir Scripts y Estilos de Manera Condicional
Los scripts o estilos pueden incluirse directamente en Razor usando condicionales.
@if (ViewData["Title"].ToString() == "Inicio")
{
<script src="~/scripts/inicio.js"></script>
}
Estos son los comandos y técnicas más comunes que puedes usar en Razor para generar contenido dinámico y aprovechar las capacidades de ASP.NET MVC. Cada uno de estos se puede combinar y personalizar para adaptarse a las necesidades de tu aplicación.