Layout y Section
Empezando con layout
La idea es generar un estilo predefinido para nuestro proyecto web, en el cual utilizaremos unas plantillas genéricas que se aplicaran a todas nuestras páginas.
El concepto de section se refiere a que estos estilos predefinidos podemos variarlos en distintos puntos a nuestro interés, y para que tomen otros formatos o realicen otras funciones. Vamos a explicar paso a paso estos conceptos en un proyecto nuevo
-Abrimos nuevo proyecto solución (asp.net net framework) empty y seleccionamos la casilla MVC
-Una vez generado, nos situamos en el explorador de soluciones en la carpeta controller y añadimos con el botón derecho sobre esta un new controller. Lo llamamos como queramos manteniendo eso si la palabra reservada controller
En mi caso lo llamo Home, dejando como se ve la palabra Controller.
Esto nos genera una carpeta en las vistas llamadas Home que es de donde tira nuestro Controller
-Dentro de la carpeta generada agregamos una nueva vista. La llamaremos Index ya que será la primera que carguemos
-Al crear la vista Index en home también nos genera la carpeta Shared con el Layout que sería la plantilla genérica
Vamos nosotros a crear nuestra vista genérica llamado MiPlantilla
-Al mismo nivel que la carpeta Shared tenemos una vista llamada ViewStart la cual la tenemos que indicar que coja nuestra plantilla. Por defecto coge la de Layout porque es la plantilla genérica
-Podemos hacer una prueba para
ver que esta todo correcto y carga nuestra vista Index.
Escribimos en la vista MiPlantilla un texto
necesitamos poner el @RenderBody en nuestra plantilla para que el Index pueda ser ejecutado
si no saltaría este error
Si todo va bien
Comprobado que funciona vamos a aplicar estilos a nuestra plantilla.
Aplicando Bootstrap
Lo primero será agregar a la carpeta Scripts las librerías, si no las tuviéramos ya por defecto o quisiéramos otras mas
Bootstrap.js es la que nos
da los estilos.
Los podemos bajar
de la página de bootstrap jquery 3.3.1
es la que nos dará funcionalidad
Para hacer una prueba con las plantillas de bootstrap accedemos en su web a los ejemplos https://getbootstrap.com/docs/4.1/examples/
Cogemos una plantilla cualquiera copiando su código fuente (botón derecho ver código fuente)
Así que lo pegaremos en nuestra plantilla, para dejarlo como diseño por defecto en nuestras vistas.
En cada código fuente de bootstrap tendremos que acceder a los css para copiarlos .
En el ejemplo este, pinchamos en cover.css y nos lleva a los estilos
Los copiamos todos
y los pegamos en un nuevo css
en Content y lo llamamos Starter-Template.css
Aquí podemos tocar y variar el diseño de la plantilla de ejemplo
– En el código fuente tendremos que sustituir el enlace que vienen de css por nuestro starter- template y el script de bootstrap por el de nuestra boostrap.min en la carpeta Content.
Quedando así
Añadimos el @RenderBody();
Y quitamos todo el script del
código y metemos los de nuestra carpeta scripts
Ejecutamos el Índex y nos cargara la plantilla de Bootstrap
Como explicamos antes, las vistas de nuestra página tendrán la plantilla por defecto que pusimos en ViewStart ya sea la genérica que viene como “layout” o la que creemos como “MiPlantilla”
Si quisiéramos utilizar estas u otras más en distintas vistas, tan solo tendremos que poner en la vista la ruta de la plantilla
@{
ViewBag.Title = «contacto»;
Layout = «~/Views/Shared/_Layout.cshtml»;
}
Creando Secciones
Por ahora nuestra plantilla solo tiene una sección que es la del body.Razor nos permite definir secciones en nuestra plantilla y poder mostrarlas en las vistas que queramos, manteniendo la plantilla por defecto
Voy a poner en mi plantilla una sección en el footer para que nos muestre la hora.
Primero tendremos que poner un id al div del footer y declarar el RenderSection con este id
Lo que estamos haciendo es pasar con el primer parámetro la zona que queremos renderizar, Y el segundo parámetro define que la sección no es requerida, pero siendo esto opcional.
En nuestra vista Index implementamos la sección.
Con @Section mas la id definida anteriormente, indicamos la parte que en esta vista se va a renderizar. Poniendo dentro de los corchetes la acción a mostrar, en nuestro caso la hora.
Quedando así
Información:
Autor/a: Sergio González Bargueño
Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2018-2019
Código / recursos utilizados / Otros datos de interés: https://github.com/sergiogonbar/Post-Section-Layout
http://www.linkedin.com/in/sergio-gonzález-bargueño-3a7baa119