ASP.NET MVC - layouts y vistas parciales
-
Upload
danae-aguilar-guzman -
Category
Software
-
view
217 -
download
6
Transcript of ASP.NET MVC - layouts y vistas parciales
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" })