TOC

This article has been localized into Spanish by the community.

Layout:

Secciones

Un Layout te permite reusar contenido común a lo largo de múltiples páginas, pero a veces necesitas variar ligeramente el contenido mostrado desde el layout basado en la página actual. Escenarios comúnes para esto podrían incluir algún código JavaScript extra en la sección HEAD, agregar un elemento extra a un menú o implementar una barra lateral personalizada basada en alguna parte del sitio donde el usuario ha navegado. Aquí es donde las Secciones entran en la imagen - ellas simplemente te permiten definir un lugar en el archivo Layout donde la Página/Vista puede inyectar marcado personalizado. Vayamos directamente a un ejemplo para que puedas ver a lo que me refiero.

Primero, agregamos una llamada RenderSection() a nuestro archivo Layout existente (sí no has agregado uno aun, vuelve a los artículos previos para aprender como agregarlo):

_Layout.cshtml:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
</head>
<body>

    @RenderBody()
    
    <p>Lots of Layout content goes here...</p>

    @RenderSection("Footer")

</body>
</html>

Nota la llamada a RenderSection() - es muy parecida a RenderBody(), porque simplemente define el lugar donde cierto tipo de contenido debe ser mostrado. En este caso queremos mostrar una sección llamada "Footer" cerca del fondo de la vista. Debemos definir ahora esta sección en las páginas/vistas que usan el layout. Aquí hay dos vistas diferentes, que usan el layout, pero cada una de ellas tendrá una parte separada de contenido para nuestra sección Footer:

About.cshtml:

@{
    ViewData["Title"] = "About";
}

@section Footer {
    Hello from the About page!
}

<h2>About</h2>

Nota la parte media, donde definimos el contenido para la sección footer - la sintaxis es muy simple: El carácter arroba, seguido por la palabra clave section nombre de la sección que queremos definir. Dentro del par de llaves podemos entonces definir el contenido de la sección. En este caso, nosotros sólo usamos un texto simple pero desde luego eres libre de incluir marcado también. Hagamos eso para nuestra vista Products:

Products.cshtml:

@{
    ViewData["Title"] = "Products";
}

@section Footer {
    <span>
        Hello from the <b>Products</b> page!
    </span>
}

<h2>Products</h2>

Si tú ya has definido un archivo _ViewStart, cómo describimos previamente, las dos vistas automáticamente utilizarán nuestra página layout. Con eso en su lugar, ahora verás estos dos vistas reusar el contenido desde el archivo layout, pero con contenido variado en nuestra sección Footer.

Secciones opcionales

Por defecto, todas las secciones son requeridas, así como lo es el cuerpo. Esto significa que si tu página usa un Layout con uno o varias Secciones definidas, tu página / vista necesitará definir todas estas secciones - si no lo hacen, recibirás un error. Esto es una gran forma de asegurarte que todas tus páginas implementan el contenido requerido. Sin embargo, tú puedes fácilmente transformar una sección requerida en una sección opcional cuando lo definas de la siguiente forma:

@RenderSection("Footer", required : false)

Nota el parámetro extra cuando se llama al comando RenderSection() - este simplemente establece que esta sección ya no es requerida, lo que significa que tus páginas pueden definir esta sección o no. Si la sección no es definida, nada será mostrado.

Revisando sí una sección ha sido definida

Cuando declaras una sección como opcional Cómo puede útil saber si la página llamante define esta sección o no. Esto te permite definir algún contenido de respaldo, en caso de que el contenido no sea suministrado por la página o vista, como esto:

@RenderSection("Footer", required : false)

@if(!IsSectionDefined("Footer"))
{
    <span>Generic footer message!</span>
}

Ahora, si la sección footer no está definida por la página o vista, por defecto, un mensaje de respaldos será mostrado en su lugar.

Resumen

Las acciones que permiten definir áreas específicas en tu layout donde puedes inyectar contenido desde la página o vista que está usando el layout. Puede ser usado en un amplio rango de escenarios, cómo fue visto en los ejemplos de arriba.

This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!