ASP.NET MVC - layouts y vistas parciales

Layouts y vistas parciales
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

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 como
opcionales:
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 elemento
donde 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én
fuertemente 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.Partial
o Html.RenderPartial:
@if (true)
{
Html.RenderPartial("~/Views/Home/Producto.cshtml");
}
@Html.Partial("~/Views/Home/_Producto.cshtml", producto);

Layout
Vistas Parciales
6.1. Podemos agregarla usando
Ajax.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 usando
Ajax.ActionLink:
@Ajax.ActionLink("Click aqui",
"ObtenerProducto", /* accion */
"Producto", /* controller */
new { codigoProducto = Model.codigo }, /* datos */
new AjaxOptions() {
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "divProducto" })

ASP.NET MVC - layouts y vistas parciales

Más contenido relacionado

La actualidad más candente (11)

Más de Danae Aguilar Guzmán (20)

Último (11)

ASP.NET MVC - layouts y vistas parciales