[ASP.NET MVC] Usando el @section

Posted on Actualizado enn


Hola a todos, bueno y de que va el post? pues simplemente para mostrar la funcionalidad de la etiqueta @section, así que al código… si tenemos definido el siguiente layout:

<!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()
    <div id="header">
        @RenderSection("Header", false)
    </div>

    <div id="footer">
        @RenderSection("Footer", false)
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Si nos fijamos bien en el html anterior, podemos ver dos líneas interesantes:

@RenderSection("Header", false)
@RenderSection("Footer", false)

Allí simplemente estamos definiendo dos secciones, y como segundo parámetro se define si la sección es requerida o no. Y ahora vamos a crear una vista y le asociamos el layout creado:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
@section Footer
{
	<p>Section Footer</p>
}
@section Header
{
	<p>Section Header</p>
}

Ahora en la vista para referenciar el contenido de cada sección usamos el @section <Nombre de la sección>, he puesto en orden diferente el contenido de cada sección para mostrar que cuando se renderiza la página el orden lo establece es el layout.

Espero les sea de utilidad, saludos!

Descarga el código!

Un comentario sobre “[ASP.NET MVC] Usando el @section

    [ASP.NET MVC] Usando el @section | MVPs de LATAM escribió:
    05/16/2013 en 13:08

    […] [ASP.NET MVC] Usando el @section […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s