Embed Size (px)
Citation preview
Layout
Las vistas de layout nos permiten reusar la estructura principal de nuestras páginas
Mantienen consistente la estructura de las páginas
Definen un template común para el sitio o una parte de el.
El template define donde las páginas hijas insertarán su contenido. @RenderBody()
Layout
1. Definiendo un layout:
@RenderBody indica donde se agregará el contenido de las páginas hijas
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody()
Layout
2. Usando el layout:
En las páginas hijas especificamos cual es el template padre. Layout
Si no especificamos se tomará el que esté en _ViewStart.cshtml.
Para quitar un template ponemos el valor de Layout en null.
@{ Layout = "~/Views/Shared/SiteLayout.cshtml"; ViewBag.Title = "Ejemplo layout"; } <p>Este es un ejemplo</p>
Layout
Se puede especificar mas de un placeholder en el template:
En las páginas hijas, ponemos el contenido:
<body> <h1>@ViewBag.Title</h1> <div id="main-content">@RenderBody()</div> <footer>@RenderSection("Footer")</footer> </body>
@section Footer { Este es el <strong>pie</strong> de página. }
Layout
Se puede definir los placeholders comoopcionales:
Y poner algo si es que los hijos no lo hacen:
@RenderSection("Footer", required: false)
<footer> @if (IsSectionDefined("Footer")) { RenderSection("Footer"); } else { <span>Este es el pie por defecto.</span> } </footer>
Layout
ViewStart
Se asigna el layout por defecto en _ViewStart.cshtml:
Puede aplicarse por folder o por página, creando este archivo en un folder específico o en el folder shared.
Asignar null para limpiar el layout
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Layout
Vistas Parciales
Permiten reutilizar contenido.
1. Retornar una vista parcial PartialView
2. Crear la vista como partial view:
public ActionResult Mensaje() { ViewBag.Message = "Una vista parcial."; return PartialView(); }
Layout
Vistas Parciales
3. Definir el contenido de la vista parcial:
Considerar que:
La vista parcial no usa un layout
La vista principal deberá especificar cual es el layout.
<h2>@ViewBag.Mensaje</h2>
Layout
Vistas Parciales
4.1. Podemos cargar la vista parcial con AJAX, usando el método load de JQuery:
<div id="resultado"></div> @section scripts { <script type="text/javascript"> $(function () { $('#resultado').load('/home/mensaje'); }); </script>
}
Lo invocamos para el elementodonde se pondrá el contenido(por ejemplo un div)
Le pasamos el URI de el controller y acción que retorna la vista parcial
Layout
Vistas Parciales
4.2. Podemos pasarle datos:
Una vista parcial puede ser tambiénfuertemente tipada
También podríamos pasarle datos en el query string
$(function () { $('#resultado').load('/home/mensaje', { nombre: "Juanito2" }); });
Layout
Vistas Parciales
5.1. Podemos agregarla usando @Html.Partialo Html.RenderPartial:
@if (true) { Html.RenderPartial("~/Views/Home/Producto.cshtml"); } @Html.Partial("~/Views/Home/_Producto.cshtml", producto);
Layout
Vistas Parciales
6.1. Podemos agregarla usandoAjax.ActionLink:
Debemos usar jQuery y jquery.unobtrusive-ajax
<div id="divMessage">aqui se cargará</div> @Ajax.ActionLink("Refresh new", "MiAccion", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divMessage", InsertionMode = InsertionMode.Replace })
Layout
Vistas Parciales
6.2. Podemos pasarle datos usandoAjax.ActionLink:
@Ajax.ActionLink("Click aqui", "ObtenerProducto", /* accion */ "Producto", /* controller */ new { codigoProducto = Model.codigo }, /* datos */ new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "divProducto" })
