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.

img1

Escogeremos MVC sin autenticación

img2

 

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.

img4

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

img5

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:

img6

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

img7

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.

img8

img9

 

É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.

img10

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.

img11

img12

img13

 

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:

img14

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:

img15

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

img16

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:

img17

img18

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:

img19

img20

img21

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:

img22

img23

img24

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.

img25

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

img26

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

img27

img28

 

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/

img3

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:

img31

img29

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:

img30

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