A medida que desarrollamos una aplicación web, tenemos que ir desarrollando también lo que es su parte externa y estética, es decir, lo que el usuario ve. Parte de esto es hacer la cabecera de la página, el menú, el pie de página, etc.
Esto que mencionamos es el contenido estático y usualmente cambia muy poco durante la vida de la aplicación, generalmente cambia cuando hay un nuevo Look and Feel, es decir, un rediseño o cuando agregamos nuevos componentes que deben ser reflejados.
Para trabajar con este tipo de elementos, debemos utilizar los layouts, esto nos permite escribir una sola vez la cabecera por ejemplo y al hacerlo luego la podemos incluir en otras partes sin tener que reescribirla.
Layouts
Con el uso de Razor podemos escribir plantillas que se comporten como contenedores de vistas, es decir una vista que contendrá otras, como explicábamos, el objetivo de esto es escribir la menor cantidad de código posible y homogeneizar el aspecto de nuestra aplicación.
Contenido del archivo _Layout.cshtml
Al generar un nuevo proyecto web dentro de nuestra carpeta views, tenemos un archivo llamado _Layout.cshtml, en este archivo tenemos nuestra plantilla principal que va a funcionar como el contenedor de vistas que explicamos en el punto anterior.
Veamos en la siguiente imagen el código fuente que contiene dicho archivo:
Si detallamos, tenemos un archivo HTML normal, sin embargo lo que nos interesa es el código Razor, empezamos por la etiqueta title, si nos fijamos Razor indica @View.Title, esto quiere decir que debe imprimir un parámetro Title que venga de la vista, luego continuamos con las demás secciones donde @RenderSection([nombre]) nos permite imprimir contenido indicando en la vista cual va a cada sección y por último @RenderBody() imprimirá el contenido del cuerpo.
Como vemos es algo bastante modular, si vemos ahora un código de una vista, podremos entender cómo se relacionan directamente:
En esta vista lo que hemos hecho primero es indicarle que utilizará el archivo _Layout.cshtml como base, luego le decimos lo que cada sección va a llevar, por ejemplo @section Header, lo que contiene este bloque es lo que se va a imprimir en el @RenderSection(“Header”) que vimos en el archivo _Layouts.cshtml.
Con esto finalizamos este tutorial y como podemos ver utilizando los Layouts podemos ahorrar reescribir mucho código y al tener una sola fuente para este contenido nuestras páginas serán mucho más homogéneas, si necesitamos secciones diferentes podemos escribir un segundo o tercer Layout que nos permita tener todos los elementos que utilizaremos.
Esto que mencionamos es el contenido estático y usualmente cambia muy poco durante la vida de la aplicación, generalmente cambia cuando hay un nuevo Look and Feel, es decir, un rediseño o cuando agregamos nuevos componentes que deben ser reflejados.
Para trabajar con este tipo de elementos, debemos utilizar los layouts, esto nos permite escribir una sola vez la cabecera por ejemplo y al hacerlo luego la podemos incluir en otras partes sin tener que reescribirla.
Layouts
Con el uso de Razor podemos escribir plantillas que se comporten como contenedores de vistas, es decir una vista que contendrá otras, como explicábamos, el objetivo de esto es escribir la menor cantidad de código posible y homogeneizar el aspecto de nuestra aplicación.
¿Para qué usar Layouts?
Si tenemos por ejemplo una web básica con una cabecera, lo más lógico es que las diferentes vistas utilicen dicha cabecera, por lo que en vez de escribir varias veces en cada vista su código, hacemos un layout y la incluimos en las diferentes vistas.
Contenido del archivo _Layout.cshtml
Al generar un nuevo proyecto web dentro de nuestra carpeta views, tenemos un archivo llamado _Layout.cshtml, en este archivo tenemos nuestra plantilla principal que va a funcionar como el contenedor de vistas que explicamos en el punto anterior.
Veamos en la siguiente imagen el código fuente que contiene dicho archivo:
Si detallamos, tenemos un archivo HTML normal, sin embargo lo que nos interesa es el código Razor, empezamos por la etiqueta title, si nos fijamos Razor indica @View.Title, esto quiere decir que debe imprimir un parámetro Title que venga de la vista, luego continuamos con las demás secciones donde @RenderSection([nombre]) nos permite imprimir contenido indicando en la vista cual va a cada sección y por último @RenderBody() imprimirá el contenido del cuerpo.
Como vemos es algo bastante modular, si vemos ahora un código de una vista, podremos entender cómo se relacionan directamente:
@{ Layout = "~/_Layout.cshtml"; }
@section Header {
<h1>Contenido de la Cabecera de la vista<h1>
}
@section Footer {
Copyright @DateTime.Now.Year
}
<div class="main">
Este es el contenido del cuerpo de la vista
</div>
En esta vista lo que hemos hecho primero es indicarle que utilizará el archivo _Layout.cshtml como base, luego le decimos lo que cada sección va a llevar, por ejemplo @section Header, lo que contiene este bloque es lo que se va a imprimir en el @RenderSection(“Header”) que vimos en el archivo _Layouts.cshtml.
Asociación
Podemos decir entonces que esto va a funcionar como un rompecabezas y el Layout va a colocar cada pieza que identifiquemos donde le corresponde.
Con esto finalizamos este tutorial y como podemos ver utilizando los Layouts podemos ahorrar reescribir mucho código y al tener una sola fuente para este contenido nuestras páginas serán mucho más homogéneas, si necesitamos secciones diferentes podemos escribir un segundo o tercer Layout que nos permita tener todos los elementos que utilizaremos.
