Using Razor Views in Asp.net Mvc for Dynamic Web Page Rendering

Introducción a las vistas de Razor en ASP.NET MVC

ASP.NET MVC sigue siendo una piedra angular del desarrollo web en la pila de Microsoft, ofreciendo una separación limpia de preocupaciones y control fino sobre las respuestas HTTP. En el corazón de su motor de visión se encuentra Razor, una potente sintaxis de templanzamiento que le permite mezclar código C# con HTML sin problemas.

Esta guía ampliada se sumerge en las vistas de Razor, cubriendo sintaxis, características avanzadas como diseños y parciales, unión modelo, integración de validación y mejores prácticas de rendimiento. Ya sea que usted está construyendo una pequeña aplicación intranet o un sitio web público a gran escala, dominar Razor le ayudará a entregar páginas mantenibles, performant y amigables con SEO.

¿Qué son las vistas de Razor?

Las vistas de Razor son plantillas lado servidor que combinan el marcado HTML con el código C# integrado. Cuando un usuario solicita una URL, el oleoducto MVC recorre la solicitud a una acción del controlador. Esa acción generalmente devuelve un llamando . El marco entonces localiza el archivo correspondiente, ejecuta el código Razor para producir una cadena HTML, y envía al cliente

El beneficio clave es que Razor compila opiniones en clases .NET en tiempo de ejecución o compilar (dependiendo de la configuración del proyecto), permitiendo que usted utilice el pleno poder del tiempo de ejecución .NET, incluyendo bucles, condicionales, expresiones complejas, e incluso manejo de la excepción, directamente dentro de su marcación.

Por ejemplo, una simple vista Razor podría parecerse a esto:

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

Todo prefijado con indica una transición de HTML a C#. El carácter es el núcleo de la sintaxis de Razor, y el motor es lo suficientemente inteligente para inferir donde el código C# termina y se reanuda HTML, incluso a través de espacios, paréntesis o límites de etiquetas HTML.

Razor Sintaxis profunda Dive

Para escribir puntos de vista Razor eficaces, debe entender los diversos estilos de bloques de código y modos de expresión disponibles.

Expresiones en línea

La forma más simple es una expresión en línea, donde un solo seguido de una expresión C# produce el resultado como texto. Por ejemplo:

<p>Your account balance is @balance.ToString("C2")</p>

Si la expresión devuelve un o implementa , Razor no codificará la salida en HTML. Para todos los demás tipos, Razor codifica automáticamente el valor para prevenir las vulnerabilidades de scripts cruzados (XSS).

Bloqueos de código

Use seguido de un par de frenos rizados para escribir bloques C# de multi-estadoimiento:

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

En bloques de código, puede declarar variables, llamar métodos y realizar lógica. El HTML fuera de los aparatos de sujeción sigue siendo en secuencia.

Estructuras de control

Razor apoya las palabras clave de flujo de control C# como , ], , , , , y . Cada uno debe ser prefijado con y seguido de un bloque de código o una sola afirmación.

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

De manera similar, los bucles se integran naturalmente:

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

Observe que el sólo es requerido en la palabra clave de apertura. El sujetador de cierre es C# y Razor correctamente retoma HTML cuando se encuentra con la etiqueta .

Comentarios

Razor ofrece su propia sintaxis de comentarios que raya el contenido del HTML renderizado enteramente:

@* This is a Razor comment. It will not appear in the output. *@

Los comentarios HTML () todavía se envían al navegador y son visibles en la fuente. Use los comentarios de Razor para las notas del desarrollador o para desactivar temporalmente bloques de código.

Características especiales

Para mostrar un símbolo literal , utilice . Para direcciones de correo electrónico, Razor los reconoce automáticamente y no requiere escapar. Por ejemplo, se trata como texto llano.

Vistas y ajuste de modelo de forma fuerte

Uno de los patrones más poderosos de ASP.NET MVC está utilizando puntos de vista fuertemente definidos. En lugar de confiar en o , usted declara el tipo de modelo en la parte superior de la vista utilizando la directiva ] (bajo la opción 'm'). Esto le da la comprobación compilación y el soporte IntelliSense para las propiedades del modelo.

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

El controlador pasa el modelo a través del método :

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

Las vistas de tipo fuerte también simplifican las presentaciones de formulario con el modelo de unión. Cuando se publica un formulario, el marco MVC automáticamente mapas solicitan datos a las propiedades del parámetro modelo en la acción del controlador, siempre que los nombres de entrada coincidan con los nombres de propiedad del modelo.

ViewBag, ViewData y TempData

Aunque se prefieren modelos de tipo fuerte, el marco también ofrece contenedores no tipográficos para pasar datos entre controladores y vistas:

• ViewBag:] Un objeto dinámico que permite establecer propiedades arbitrarias. Es un envoltorio sobre . Ejemplo: . Accede a él en la vista con .
• ViewData:] Un diccionario de pares de valor clave (). Accede a él como . Los valores deben ser emitidos al tipo apropiado si necesita una escritura fuerte.
• TempData:] Similar a ViewData pero persiste en una sola redireccion. Se almacena en sesión y se aclara después de ser leído. Útil para mostrar mensajes únicos como "Record guardado con éxito".

Utilizar estos mecanismos espaciosamente. Sobreutilizar ViewBag puede llevar a errores de tiempo de ejecución y hace que las vistas sean más difíciles de mantener. Reserve para los datos auxiliares que rara vez se necesitan que no encajan en el modelo principal.

Diseños y ViewStart

Los diseños le dan a su aplicación un aspecto y una sensación consistentes al definir una página principal común. Un diseño es un archivo que contiene la estructura exterior de una página (cabeza, navegación, pie) y una llamada donde se inserta el contenido de las vistas individuales.

Por ejemplo, un típico podría parecer:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

Las vistas individuales pueden especificar qué diseño utilizar. Por convención, el archivo ] en la carpeta establece el diseño predeterminado para todas las vistas en esa carpeta:

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

Puede anular el diseño en cualquier vista específica relacionando la propiedad . Esto es especialmente útil para páginas que necesitan un diseño completamente diferente, como páginas de inicio de sesión o páginas de error.

Vistos parciales y componentes de vista

Las vistas parciales son fragmentos reutilizables de la interfaz de usuario que pueden ser incrustados dentro de otras vistas. Son especialmente útiles para formas complejas, elementos de lista, o cualquier componente que aparece en múltiples lugares. Para crear una vista parcial, simplemente crear un archivo llamado convencionalmente con un destacado (por ejemplo, ).

Usted hace una vista parcial desde otra vista usando o :

@Html.Partial("_ProductCard", item)

La diferencia es que devuelve una cadena HTML, mientras escribe directamente al flujo de respuesta (sólo más rápido para grandes parciales, pero no se puede utilizar dentro de un bloque de código).

Para componentes reutilizables más complejos y con un peso lógico (como un resumen del carrito de compras que requiere acceso a bases de datos), considere View Components. Ver Componentes son clases de pleno derecho con su propio método Invoke/InvokeAsync, que permite la inyección de servicios y el procesamiento complejo.

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

Invocar desde una vista con .

Secciones y RenderSection

Las secciones le permiten definir regiones en un diseño que las vistas individuales pueden llenar. Los casos de uso común incluyen scripts de inyección de página específicas, hojas de estilo o contenido de barra lateral. En el diseño, declarar una sección con . En una vista, definir el contenido:

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

Si una sección está marcada como sea necesario (]), cada vista que utilice el diseño debe definirlo, o se lanzará una excepción. Use secciones requeridas para los elementos que son fundamentales para la página, como un área de título o contenido principal.

También puede comprobar si una sección se ha definido en la vista usando dentro del diseño, lo que le permite proporcionar contenido predeterminado.

Ayudantes HTML vs Tag Helpers

Las vistas de Razor ofrecen dos familias de herramientas de servidor para generar HTML: Ayudadores HTML y Ayudantes de Tag.

• HTML Helpers son métodos llamados en la vista, como o . Ellos devuelven cadenas HTML y son familiares a los desarrolladores que han trabajado con versiones anteriores de MVC.
• Tag Helpers] fueron introducidos en ASP.NET Core pero también están disponibles en ASP.NET MVC 5.x a través de un paquete NuGet (). Le permiten escribir etiquetas tipo HTML que el servidor procesa, por ejemplo, .

Por ejemplo, crear un formulario con los Ayudantes de Tag parece:

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

Tag Helpers se une automáticamente a las propiedades modelo, render validation atributos y genera URLs correctas. Generalmente son preferidas para el nuevo desarrollo porque se integran perfectamente con la validación discreta y son más fáciles de mantener.

Validación y manipulación de errores

Las vistas de Razor funcionan en conjunto con el sistema de validación en ASP.NET MVC. Puede mostrar errores de validación de nivel de modelo y de nivel de propiedad usando Ayudadores HTML o Ayudantes de Tag. muestra todos los errores de una vez, y muestra errores para un campo específico.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Cuando utilizas Ayudantes de etiqueta, el intervalo de validación se añade automáticamente y se pobla durante la unión modelo si la validación falla. Este marcado de validación lado cliente se genera utilizando anotaciones de datos en tu modelo, como , , y ].

Para permitir una validación unilateral del cliente, asegúrese de que las bibliotecas JavaScript necesarias ( y ) estén incluidas en su diseño, generalmente en la sección .

Razor con AJAX y Rendering Parcial

Las vistas de Razor no se limitan a las cargas de página completas. Puede utilizarlas para renderizar HTML parcial que se devuelve a través de AJAX e insertado en el DOM. Cree una acción controladora que devuelve una vista parcial:

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

En el lado cliente, utilice jQuery o el ayudante incorporado para cargar el resultado parcial en un contenedor:

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

Usted debe incluir el script para los ayudantes para trabajar. Alternativamente, usted puede escribir una simple jQuery llamada que actualiza el contenedor manualmente. El beneficio de usar Razor parciales para AJAX es que su lógica y marcado lado servidor siguen siendo consistentes, evitando la duplicación entre las respuestas parciales y de página completa.

Consideraciones de la actuación profesional para las opiniones de Razor

Aunque se compilan las opiniones de Razor, todavía hay obstáculos para evitar:

• Evite la lógica excesiva en las vistas. Mantenga las vistas lo más simple posible; mueva cálculos complejos, transformaciones de datos y reglas de negocio al controlador, capa de servicio o modelo de vista.
• Uso de caché judiosamente. Para las vistas que raramente cambian (por ejemplo, navegación estática), considere la aplicación de caché de salida con el atributo en la acción del controlador. Para las vistas parciales que son costosas de renderizar, utilizar con ] (extensión de los átomos) o un marco de caché como [FLT] [FLT] [FLT]]
• Minimizar el número de vistas parciales que se muestran por página. Cada llamada añade sobrecabeza. Si se utiliza un parcial muchas veces en un bucle, considere la construcción del HTML en el controlador utilizando un StringBuilder o un generador HTML personalizado.
• Utilice acciones asinc para operaciones I/O'bound. Si su visión depende de datos que impliquen consultas de bases de datos o llamadas externas de API, defina la acción del controlador como y llame antes de pasar el modelo. Esto libera los hilos durante la espera I/O.
• Vistas precompiles de Razor] en producción utilizando o el incorporado en ASP.NET MVC 5 (vía ] se establece en en propiedades del proyecto). Esto elimina el retraso de compilación de primera demanda.

Las mejores prácticas para las visitas de Razor Mantenibles

• Siempre utilice modelos fuertemente tipo y evite ViewBag para los datos principales. Esto mejora la comprobación y legibilidad de compilación.
• Siguiendo las convenciones de nominación: las opiniones deben coincidir con los nombres de acción del controlador, y los parciales deben ser prefijados con subrayar.
• Utilice plantillas de pantalla y editor] para pantallas de tipo de datos reutilizables. Por ejemplo, cree para formatear las fechas de forma consistente.
• Separar CSS y JavaScript de las vistas. Poner sólo estilos mínimos de línea; utilizar la abundancia y la menificación para los recursos externos.
• Pruebas de unidad de arco para controladores y modelos de vista. Mientras que las propias vistas son difíciles de probar, asegúrese de que los datos que se les han transmitido sean correctos. Considere marcos de pruebas de interfaz de usuario como Selenium o Playwright para la validación de nivel de integración.
• Mantenimiento de diseño centrado. No ponga la lógica pesada o la recuperación de datos en un diseño. Los diseños sólo deben contener el HTML de andamio y llamadas a y secciones.

Conclusión

Las vistas de Razor son la columna vertebral de la generación HTML dinámica en ASP.NET MVC. Su sintaxis limpia, integración sin costuras con C#, y soporte para la escritura fuerte, diseños, parciales y validación hacen de ellos una herramienta poderosa para construir aplicaciones web sostenibles. Al dominar funciones avanzadas como Tag Helpers, View Components y AJAX renderización parcial, usted puede crear experiencias de usuario ricas sin sacrificar mejora de rendimiento y calidad

Para más lectura, consulte la documentación oficial de Microsoft en Razor Syntax], ]Vista parcial, y Etiqueta a los ayudantes en ASP.NET Core (que también se aplican a MVC 5 con referencias adecuadas en paquetes).