Diseño de plantillas Layout
La página maestra es la plantilla que define la apariencia que tendrán las páginas de nuestra aplicación. Puede contener cualquier combinación de texto estático y controles. Una página maestra también contiene uno o más marcadores de posición de contenido que indican dónde aparecerá el contenido dinámico cuando se muestren las páginas.
Para poder entenderlo vamos a realizar una aplicación en la que cambiaremos la plantilla inicial de un proyecto MVC con nuestra propia plantilla. Para el diseño usaremos etiquetas HTML5, algunas clases de Boostrap y a su vez para la funcionalidad completa de BootStrap necesitamos la librería de JQuery. También vamos a usar 3 imágenes de tamaño que preferiblemente sean de 1600px x 500px . El framework y la librería ya vienen integrados dentro del entorno MVC.
Primero empezaremos abriendo nuestro Visual Studio. En la pestaña de Archivo pulsaremos Nuevo y después Proyecto. De allí iremos en la zona Web y elegiremos Aplicación web ASP.NET. Le asignamos nombre y carpeta de ubicación. Para este ejercicio el proyecto se llamará «PlantillasLayout».
Después de aceptar nos aparece una ventana, donde vamos a elegir la plantilla MVC.
Esta opción nos creará una plantilla por defecto, a la cual vamos a aprender a cambiar su diseño.
A continuación crearemos una nueva página maestra, llamada «_Maestra» en la carpeta Shared en la sección de Views. En la ventana de Agregar vista tenemos que elegir una plantilla vacía y desmarcar la casilla Usar página de diseño.
Nos creará una página HTML5 sin contenido ni formato. Para poder convertir esta plantilla nueva en nuestra página de inicio debemos ir al archivo _ViewStart.cshtml dentro de Views y cambiar la página maestra por defecto «_Layout» por la nuestra «_Maestra».
@{
Layout = "~/Views/Shared/_Maestra.cshtml";
}
La página maestra proporciona la plantilla para el contenido. El contenido de la página maestra se define creando una o varias vistas que se asocian a la página maestra. Estas vistas se llaman páginas hijas o páginas de contenido. En las páginas de contenido, se agregan el texto y los controles que deseamos mostrar cuando los usuarios soliciten la página.
Para este ejercicio, vamos a agregar dos páginas con contenido para la página maestra. La primera será la página de inicio «Index» y la segunda es una página «Acercade» en una nueva zona a la que llamaremos «ZonaPrueba». En la ventana de Agregar vista volvemos a elegir una plantilla vacía y esta vez marcaremos la casilla Usar página de diseño.
También crearemos un nuevo controlador llamado «ZonaPruebaController», donde devolveremos las dos vistas a través del método Get.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PlantillasLayout.Controllers
{
public class ZonaPruebaController : Controller
{
// GET: ZonaPrueba
public ActionResult Index()
{
return View();
}
// GET: Acercade
public ActionResult Acercade()
{
return View();
}
}
}
A continuación vamos a diseñar la página maestra con un menú, un logotipo y un pie que aparecerán en todas las páginas del sitio. También vamos a usar un marcador de posición de contenido, el cual es un área de la página que se puede reemplazar por información en una página de contenido. Para eso vamos a necesitar la etiqueta @RenderBody(). Esta etiqueta indicará el lugar donde se alojan las páginas de contenido dentro de nuestra plantilla.
Para cargar ficheros JavaScript o incluir hojas de estilo CSS dentro del entorno MVC se utilizan las etiquetas:
@Scripts.Render(«~/Scripts/archivo.js»)
@Styles.Render(«~/Content/archivo.css»)
Nota: BootStrap recomienda cargar las librerías y los ficheros js al final de la página.
La etiqueta @RenderSection() indica el lugar donde las páginas de contenido puede sobrescribir contenido de la página maestra. Contiene dos parámetros, donde el primer parámetro es el nombre de la sección y el segundo es un parámetro booleano. En este caso usaremos false, ya que incluimos una zona para los scripts y otra para los estilos que las páginas hijas pueden sobrescribir opcionalmente.
@RenderSection(«scripts», false)
@RenderSection(«styles», false)
En este caso vamos a escribir un pequeño script dentro de la etiqueta @section {} en la página hija «Acercade» mostrando y escondiendo unos párrafos. Dentro en los corchetes debe ir el contenido.
@section scripts{ <script> $(document).ready(function () { $("#lg-parrafos").hide(); $("#btnmostrar").click(function () { $("#lg-parrafos").slideToggle(500); }); }); </script> }
Para entender mejor este concepto vamos a crear una nueva sección en la página maestra llamada «capa» a la que le vamos a aplicar estilos en línea para identificarla mejor. Tendría una anchura de 100%, altura de 100px y un fondo de color rojo:
<div style="width: 100%; height: 100px; background-color: red;"> @RenderSection("capa", false) </div>
Recuperaremos la sección «capa» en la página hija «Acercade» a través de la etiqueta @section{}. En este caso vamos a escribir una etiqueta h2.
Otro concepto diferente sería sustituir una zona con contenido en la página maestra por otro contenido de la página hija.
Si la página hija sustituye la sección, mostraremos los elementos de la página hija, si no creamos una sección, mostraremos los elementos de la página maestra.
Para ello, se utiliza el siguiente código en la página maestra:
@if (IsSectionDefined("carrusel")) { //la página de contenido esta sustituyendo la sección @RenderSection("carrusel", false) } else { //diseño que deseamos incluir en la página maestra }
En este caso «carrusel» será una nueva sección, la cual recuperaremos en la página «Index», a través de la etiqueta @section{}. Dentro escribiremos el código de nuestro carrusel de tres imágenes.
El código de la página maestra nos quedaría así:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>_Maestra2</title> @Styles.Render("~/Content/bootstrap.min.css") @Styles.Render("~/Content/styles.css") @RenderSection("styles", false) </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#barra"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=@Url.Action("Index", "ZonaPrueba")><strong>Logotipo</strong></a> </div> <div class="collapse navbar-collapse" id="barra"> <ul class="nav navbar-nav"> <li> <a href=@Url.Action("Index", "ZonaPrueba")> <span class="glyphicon glyphicon-home"></span> Inicio </a> </li> <li> <a href=@Url.Action("Acercade", "ZonaPrueba")> <span class="glyphicon glyphicon-file"></span> Acerca de </a> </li> </ul> </div> </div> </nav> <div style="width:100%;height:100px;background-color:red"> @RenderSection("capa", false) </div> @if (IsSectionDefined("carrusel")) { //la página de contenido esta sustituyendo la sección @RenderSection("carrusel", false) } else { //diseño que deseamos incluir en la página maestra } <div class="container-fluid text-center contenedor"> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year</p> </footer> </div> @Scripts.Render("~/Scripts/jquery-1.10.2.min.js") @Scripts.Render("~/Scripts/bootstrap.min.js") @RenderSection("scripts", false) </body> </html>
Código CSS en nuestra hoja de estilos styles.css:
Código página Index: @{ ViewBag.Title = "Index"; } @section carrusel{ <div class="carousel slide" id="carousel-297327"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-297327"></li> <li data-slide-to="1" data-target="#carousel-297327"></li> <li data-slide-to="2" data-target="#carousel-297327"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="~/Images/nature1.jpg" /> <div class="carousel-caption"> <h4>El naranjo</h4> <p> Una semilla de naranja en la tierra se cayó. Fue rodando, fue rodando y dormida se quedó. </p> </div> </div> <div class="item"> <img src="~/Images/nature2.jpg" alt="" /> <div class="carousel-caption"> <h4>El naranjo</h4> <p> Vino la lluvia una mañana y la tierra se mojó. La semillita sintió agua y alegremente despertó. </p> </div> </div> <div class="item"> <img src="~/Images/nature3.jpg" alt="" /> <div class="carousel-caption"> <h4>El naranjo</h4> <p> Se desperezó con dos hojitas y se asomó buscando el sol. Su raíz muy pequeñita en la tierra se afirmó. </p> </div> </div> </div><a class="left carousel-control" href="#carousel-297327" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-297327" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div> } <h1>Autora: Mónica Tirabasso</h1> <h2>Poesías para el día del árbol</h2> <div class="row"> <div class="col-md-12"> <p> Día tras día fue creciendo y en una planta se transformó con muchas ramas, muchas hojitas y en primavera alguna flor. </p> <p> Hoy es un naranjo alto y fuerte. Ricos frutos me dará. Más semillas de naranja a la tierra volverán. </p> </div> <hr /> </div>
Código página Acercade:
@{ ViewBag.Title = "Acercade"; } @section scripts{ <script> $(document).ready(function () { $("#lg-parrafos").hide(); $("#btnmostrar").click(function () { $("#lg-parrafos").slideToggle(500); }); }); </script> } @section capa{ <h2>Es un título que se mostrara solo en la página de Acerca de</h2> } <h2>El ciclo del agua</h2> <p>Poesía sobre el agua - Día del agua</p> <button id="btnmostrar">Mostrar poesía</button> <div class="container"> <div class="row" id="lg-parrafos"> <p class="col-md-4 text-left"> Unas gotitas muy curiosas querían la Tierra conocer, pidieron ayuda al viento para que las hiciera descender. </p> <p class="col-md-4 text-left"> El viento les dice amistoso: - Muy juntas os debéis poner, para que forméis gotas de lluvia y a la Tierra podáis caer. </p> <p class="col-md-4 text-left"> Sobre la hierba verde del campo en forma de lluvia han caído, unas gotas refrescan las plantas y otras gotas se unen al río. </p> </div> </div>
Descripción: Con este ejemplo demuestro cómo se puede modificar una plantilla por defecto de MVC con una plantilla propia.
Autora: Lyudmila Petrova
Curso: Microsoft MCSD Web Applications + SharePoint Apps
Centro: Tajamar
Año académico: 2016-2017
https:es.linkedin.com/in/lyudmilapetrova