TOC

This article has been localized into Italian by the community.

Layout:

Sections

Un Layout vi permette di riutilizzare del contenuto comune tra diverse pagine, ma a volte potreste avere bisogno di variare leggermente il contenuto ottenuto tramite il layout a seconda della pagina corrente. Lo scenario comune per questo potrebbe essere la necessità di includere del codice JavaScript extra nella sezione HEAD, oppure aggiungere una voce di menu extra o implementare una barra laterale personalizzata a seconda di dove ci si trova sul sito web. Questa è la ragione per cui esistono le Sections. Esse semplicemente ti permettono di definire dei punti nel file di Layout dove la Page/View può inserire del markup personalizzato. Passiamo direttamente ad un esempio così che sia possibile capire il significato di questo.

Per prima cosa aggiungiamo una chiamata a RenderSection() al file di Layout esistente (se non avete ancora aggiunto un Layout al vostro progetto, allora tornate indietro ad uno degli articoli precedenti per imparare come farlo):

File _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>

Notate la chiamata a RenderSection() - è vuota proprio come RenderBody(), perchè semplicemente definisce il punto in cui un certo tipo di contenuto dovrà essere inserito. In questo caso noi vorremmo inserire una Section chiamata "Footer" alla fine della View. Ora dovremo definire questa Section nelle Page/View che utilizzano il Layout. Qui ci sono due View differenti, entrambe usano il Layout, ma ognuna di esse avrà un pezzo di contenuto separato per la Section chiamata Footer:

File About.cshtml:

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

@section Footer {
    Hello from the About page!
}

<h2>About</h2>

Notate la parte di mezzo dove definiamo il contenuto per la Section Footer - Si tratta di semplice sintassi Razor. Il carattere at (@), seguito dalla parola chiave section e quindi dal nome della sezione. In questo caso abbiamo inserito un semplice testo, ma naturalmente siete liberi di includere markup. Proviamo a farlo per la view Product:

File Products.cshtml:

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

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

<h2>Products</h2>

Se avete già definito il file _ViewStart come descritto in precedenza, le due View useranno automaticamente la pagina di Layout inclusa la Section. Con questo sistema vedrete queste Views riutilizzare il contenuto del file Layout, ma con un contenuto differente per la sezione Footer.

Sections Opzionali

Per default tutte le sezioni sono obbligatori esattamente come il body. Questo significa che se la vostra pagina usa un Layout con una o più sezioni definite, la vostra Page/View deve implementare tutte queste sezioni - e se non lo fanno riceverete un errore. Questo è un ottimo sistema per fare in modo che tutte le pagine implementino il contenuto richiesto. Però, quando definite la Section, potete facilmente trasformarla in opzionale:

@RenderSection("Footer", required : false)

Notate il parametro extra nella chiamata al comando RenderSection() - Esso semplicemente afferma che questa Section non è più obbligatoria, il che significa che le vostre Pages/Views possono implementare o meno la Section. Se la Section non è definita non viene emesso alcun output.

Verificare se una Section è stata implementata.

Quando si dichiara una Section opzionale, può essere utile conoscere se la page/view chiamante implementa la Section o meno. Questo vi permette di creare qualche contenuto di riserva nel caso in cui la page/view non implementa la Section. Come nell'esempio seguente:

@RenderSection("Footer", required : false)

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

Nell'esempio se la Section Footer non è implementata dalla Page/View, verrà restituito un messaggio di riserva di default.

Riepilogo

Le Sections vi permettono di definire delle aree specifiche nel vostro file di Layout dove potrete inserire del contenuto magari differente pagina per pagina. Questo può essere utilizzato per un grande numero di scenari come visto negli esempi precedenti.

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!