Secciones y Layout con MVC

SECTION Y LAYOUT

En este tutorial vamos a aprender a crear plantillas personalizadas para nuestras aplicaciones y a utilizar secciones para ayudarnos en el diseño de las páginas.

Creamos un nuevo proyecto en Visual Studio 2017, elegimos Visual C#/Web, pulsamos en Aplicación web ASP.NET (.NET Framework) y lo llamamos SeccionesYLayout.

Escogeremos MVC sin autenticación

 

Ahora en el Explorador de soluciones (si no os aparece Ctrl+Alt+L) sobre la carpeta Shared, dentro de Views, incluimos una nueva vista _NuevaPlantilla.cshtml, Agregar/Vista…, y desmarcamos el checkbox Usar página de diseño.

Nos creará una vista sin diseño (Layout = null;):

Esta plantilla será nuestra nueva plantilla maestra, para ello vamos a Views/_ViewStart.cshtml y cambiamos el Layout al nuevo que hemos creado; esto hará que la aplicación use nuestra plantilla personalizada como predeterminada:

Si ejecutáramos ahora el proyecto nos indicaría que no ha podido encontrar RenderBody.

RenderBody indica el lugar donde alojaremos las vistas hijas dentro de la plantilla Master. Siempre debemos incluir @RenderBody() dentro de nuestra plantilla maestra para ver el contenido.

 

Ésta página será nuestra plantilla principal para la aplicación, por lo que incluiremos aquí nuestra cabecera y nuestro pie de página. Podemos crearlas directamente con código HTML dentro de ésta vista; pero vamos a crearnos para la cabecera una página Vista aparte para ver el concepto de RenderPage aunque sea antiguo.

Creamos una nueva vista dentro de la carpeta Shared llamada Cabecera.cshtml, volviendo a marcar el checkbox Usar página de diseño.

En la página Cabecera añadimos el código que deseemos visualizar y en la plantilla _NuevaPlantilla añadimos un @RenderPage dónde queramos que se visualice el código. También añadiremos el footer de manera normal con código html para comprobar que se ve.

RenderPage importa contenido de un archivo separado que puede contener código. Es antiguo y ya no se utiliza. Sintaxis: @RenderPage(“NombrePagina”). Como hemos visto al poder usar una plantilla maestra para todas las páginas esto queda obsoleto.

 

A continuación vamos a crear una sección que deseamos que las páginas puedan sustituir si lo desean. Para crear zonas en la plantilla maestra que puedan ser sustituidas se utiliza @RenderSection. Sintaxis @RenderSection(“NombreSeccion”, required) si ponemos el valor boolean a false queremos decir que esta sección es opcional, con valor a true le decimos que es obligatorio usar esta sección en todas las vistas:

También podríamos usar esta etiqueta con valor true para crear una cabecera y un pie de página común a todas las vistas.

Antes de crear el contenido opcional vamos a visualizar el contenedor:

Ahora creamos nuestra nueva vista Opcional.cshtml dentro de una nueva carpeta llamada Secciones en la carpeta Views.

Creamos nuestra sección Opcional que sustituiremos por el contenido que queramos, yo voy a incluir una imagen; para ello creamos una carpeta IMG sobre el proyecto y metemos la imagen que deseemos:

Para poder ver la vista Opcional deberemos crear un controlador en Controllers llamado SeccionesController e incluimos el ActionResult para Opcional. Para agregar el controlador pulsamos con el botón derecho sobre la carpeta Controllers y elegimos Agregar/Controlador…; después en la ventana que se abre elegimos Controlador de MVC 5: en blanco:

Si ejecutáramos ahora no aparecería nada; necesitamos un enlace en nuestra plantilla _NuevaPlantilla.cshtml que apunte al archivo Opciona. Yo voy a usar Html.ActionLink cuya sintaxis es @Html.ActionLink(“NombreEnlace”, “Vista”, “Controlador”); tanto la vista como el controlador NO deben llevar la extensión:

También podríais añadir el enlace con lenguaje HTML con la etiqueta <a>

Ahora vamos a sustituir una zona con ‘contenido’ en la página maestra. Si la página hija sustituye la sección mostramos los elementos de la página hija; si no creamos la sección mostramos los elementos de la plantilla.

Si ejecutamos la aplicación ahora, veremos el menú de la página maestra:

Si queremos sustituir el menú, añadimos en nuestra página Opcional.cshtml la sección Menu:

 

Ahora vamos a aplicar estilos a nuestra página.

Sobre el proyecto, con el botón derecho del ratón, pulsamos sobre Agregar/Carpeta y creamos dos carpetas llamadas CSS y JS para meter los archivos .css y .js que queramos utilizar. Yo voy a usar Bootstrap y JQuery: bootstrap.min.css, jquery-3.2.1.min.js y bootstrap.min.js que podéis descargaros en http://getbootstrap.com/

Para incluir el diseño en nuestra vista necesitamos incluir en nuestra vista _NuevaPlantilla el método Styles.Render. Sintaxis: @Styles.Render(“RutaArchivoCSS”). Este método nos permite cargar archivos CSS dentro de nuestras plantillas. Incluimos la ruta del archivo Bootstrap:

Para tener toda la funcionalidad de BootStrap debemos incluir las librerías de Scripts JS. Para ello debemos utilizar el método Scripts.Render. Sintaxis @Scripts.Render(“RutaArchivoJS”). Este método nos permite cargar scripts para trabajar con JS:

Autora: Raquel Rodríguez Marcos

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2017-2018

Código / recursos utilizados / Otros datos de interés:  https://github.com/Infinity31/SeccionesYLayoutMVC.git