"Razor Pages hace que la codificación de escenarios centrados en páginas sea más fácil y productiva. Es una buena opción para crear aplicaciones web renderizadas del lado del servidor con ASP.NET Core."
--Scott Guthrie
Para comenzar, es esencial comprender algunos aspectos fundamentales del Framework Razor que fueron utilizados para construir nuestra aplicación basada en la arquitectura limpia.
Introducción a Razor
Razor es un Framework centrado en páginas del lado del servidor, diseñado para crear sitios web dinámicos y basados en datos. Como parte del ecosistema de desarrollo web ASP.NET Core de Microsoft, Razor es compatible con el desarrollo multiplataforma, permitiendo su implementación en sistemas operativos como Windows, Unix y Mac. Este Framework destaca por ser liviano y altamente flexible, otorgando al desarrollador un control total sobre el HTML renderizado.
Razor utiliza C# para la programación del lado del servidor, y su sintaxis de plantillas facilita la incrustación de C# en el código HTML, generando contenido dinámico para los navegadores de manera eficiente. Arquitectónicamente, Razor Pages es una implementación del patrón MVC, presentándose como una versión más livana de este Framework y una evolución de los antiguos WebForms ".aspx".
Aquí se
puede ver la arquitectura donde se encuentra enmarcado:
Estructura y Funcionamiento
La clave de Razor radica en su simplicidad y eficacia. Las páginas tienen la extensión .cshtml y se acompañan de un archivo .cs (una clase en C#). La página .cshtml corresponde a la presentación o vista contiene código HTML, junto con el C# necesario para producir dinámicamente la página deseada.
Ejemplo:
Página cshtml:
El archivo
de extensión cs o clase de C# asociado contiene la información del servidor que
se mostrará en la página:
Observar como el método OnGet carga la información devuelta por el Presenter, asignándola a la propiedad UserTypes. Esta propiedad se accede a través del objeto Model en la página, permitiendo la renderización de los valores correspondientes.
Además de las páginas estándar, la construcción de la aplicación en Razor implicó trabajar con:
- Partial Pages: Son páginas que se ubican en la carpeta Shared de la aplicación, tienen un nombre que empieza con el caracter _ y su extensión al igual que las páginas Razor normales es .cshtml. Pero a diferencia de las páginas Razor normales, éstas no poseen un archivo .cs asociado.
- View Components: Son páginas que se ubican en la carpeta Components de la aplicación y en una subcapeta que lleva el nombre de la componente.Por ejemplo, para la aplicación se creo la componente Search. Por tanto, al interior de la carpeta Components se creó la carpeta Search.
- El que corresponde a la vista o presentación de extensión .cshtml y que debe llevar por nombre Default. (Nota: el archivo .cs asociado no se utiliza).
- Una clase C# cuyo nombre debe tener como sufijo la palabra ViewComponent y debe heredar de ViewComponent. Por ejemplo, para la aplicación se creo la clase SearchViewComponent la cual hereda de ViewComponent. Acá su código:
public class SearchViewComponent : ViewComponent
{
public AppBussinesRules.DS.UserDS UserDS { get; set; }
public async Task<IViewComponentResult> InvokeAsync()
{
var user = await Task.Run(() => GetUser()).ConfigureAwait(false);
return View(user);
}
private AppBussinesRules.DS.UserDS GetUser()
{
var strUserData = HttpContext.Session.GetString("UserData");
var userDS = JsonSerializer.Deserialize<AppBussinesRules.DS.UserDS>(strUserData);
return userDS;
}
}
Integración de Funcionalidades del Cliente
Para mejorar la interactividad y responsividad de la aplicación, se integraron frameworks adicionales como:
- jQuery
- Ajax
Asimismo, se emplearon estilos personalizados y frameworks de estilos como Bootstrap y Slick para enriquecer la interfaz de usuario.
Conexión con la Arquitectura Establecida
La integración de Razor con la arquitectura establecida se muestra a continuación:
En el esquema, el componente Main actúa como el punto de entrada de la aplicación, donde se hace la inyección de dependencias y por ello es que se muestra que tiene dependencia con varias componentes. En Razor, este componente Main corresponde a los archivos Program.cs y Startup.cs.
Nota: En .NET 8 ya solo figura el archivo Program.cs.
Lo interesante aquí es notar como la vista implementada con Razor depende únicamente del componente Presenters.
Aquí está el video de la aplicación construida con Razor:
https://speakerdeck.com/davidfowl/asp-dot-net-core-architecture-overview?slide=6
Para continuar con MVC da click aquí o utiliza los enlaces de abajo para navegar por las diferentes secciones de este artículo.
