Condividi tramite

Creazione di un layout coerente nei siti Pagine Web ASP.NET (Razor)

  • Articolo

di Tom FitzMacken

Questo articolo illustra come usare le pagine di layout in un sito Web Pagine Web ASP.NET (Razor) per creare blocchi riutilizzabili di contenuto (ad esempio intestazioni e piè di pagina) e creare una ricerca coerente per tutte le pagine del sito.

Cosa si apprenderà:

  • Come creare blocchi riutilizzabili di contenuto, ad esempio intestazioni e piè di pagina.
  • Come creare una ricerca coerente per tutte le pagine del sito usando un layout.
  • Come passare i dati in fase di esecuzione a una pagina di layout.

Queste sono le funzionalità ASP.NET introdotte nell'articolo:

  • Blocchi di contenuto, ovvero file che contengono contenuto formattato HTML da inserire in più pagine.
  • Pagine di layout, che contengono contenuti formattati HTML che possono essere condivisi da pagine nel sito Web.
  • I RenderPagemetodi , RenderBodye RenderSection che indicano ASP.NET dove inserire elementi di pagina.
  • Dizionario PageData che consente di condividere i dati tra blocchi di contenuto e pagine di layout.

Versioni software usate nell'esercitazione

  • Pagine Web ASP.NET (Razor) 3

Questa esercitazione funziona anche con Pagine Web ASP.NET 2.

Informazioni sulle pagine di layout

Molti siti Web hanno contenuto visualizzato in ogni pagina, ad esempio un'intestazione e un piè di pagina o una casella che indica agli utenti che hanno eseguito l'accesso. ASP.NET consente di creare un file separato con un blocco di contenuto che può contenere testo, markup e codice, proprio come una normale pagina Web. È quindi possibile inserire il blocco di contenuto in altre pagine nel sito in cui si desidera visualizzare le informazioni. In questo modo non è necessario copiare e incollare lo stesso contenuto in ogni pagina. La creazione di contenuti comuni come questo semplifica anche l'aggiornamento del sito. Se è necessario modificare il contenuto, è sufficiente aggiornare un singolo file e le modifiche vengono quindi riflesse ovunque il contenuto sia stato inserito.

Il diagramma seguente illustra il funzionamento dei blocchi di contenuto. Quando un browser richiede una pagina dal server Web, ASP.NET inserisce i blocchi di contenuto nel punto in cui viene chiamato il RenderPage metodo nella pagina principale. La pagina completata (unita) viene quindi inviata al browser.

Diagramma concettuale che mostra come il metodo RenderPage inserisce una pagina a cui si fa riferimento nella pagina corrente.

In questa procedura verrà creata una pagina che fa riferimento a due blocchi di contenuto (un'intestazione e un piè di pagina) che si trovano in file separati. È possibile usare questi stessi blocchi di contenuto in qualsiasi pagina del sito. Al termine, si otterrà una pagina simile al seguente:

Screenshot che mostra una pagina nel browser che determina l'esecuzione di una pagina che include chiamate al metodo RenderPage.

  1. Nella cartella radice del sito Web creare un file denominato Index.cshtml.

  2. Sostituire il markup esistente con quanto segue:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  </body>
</html>

  3. Nella cartella radice creare una cartella denominata Shared.

    Nota

    È comune archiviare i file condivisi tra le pagine Web in una cartella denominata Shared.

  4. Nella cartella Condivisa creare un file denominato _Header.cshtml.

  5. Sostituire qualsiasi contenuto esistente con quanto segue:

    <div class="header">This is header text.</div>

    Si noti che il nome del file è _Header.cshtml, con un carattere di sottolineatura (_) come prefisso. ASP.NET non invierà una pagina al browser se il nome inizia con un carattere di sottolineatura. Ciò impedisce agli utenti di richiedere (inavvertitamente o altrimenti) queste pagine direttamente. È consigliabile usare un carattere di sottolineatura per assegnare un nome alle pagine che dispongono di blocchi di contenuto, perché non si vuole che gli utenti possano richiedere queste pagine, che esistono strettamente da inserire in altre pagine.

  6. Nella cartella Condivisa creare un file denominato _Footer.cshtml e sostituire il contenuto con quanto segue:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>

  7. Nella pagina Index.cshtml aggiungere due chiamate al RenderPage metodo, come illustrato di seguito:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>

    In questo modo viene illustrato come inserire un blocco di contenuto in una pagina Web. Chiamare il RenderPage metodo e passarlo il nome del file il cui contenuto si vuole inserire a quel punto. In questo caso si inseriscono i contenuti dei file _Header.cshtml e _Footer.cshtml nel file Index.cshtml.

  8. Eseguire la pagina Index.cshtml in un browser. In WebMatrix, nell'area di lavoro File fare clic con il pulsante destro del mouse sul file e quindi scegliere Avvia nel browser.

  9. Nel browser visualizzare l'origine della pagina. Ad esempio, in Internet Explorer fare clic con il pulsante destro del mouse sulla pagina e quindi scegliere Visualizza origine.

    In questo modo viene visualizzato il markup della pagina Web inviato al browser, che combina il markup della pagina di indice con i blocchi di contenuto. Nell'esempio seguente viene illustrata l'origine di pagina di cui viene eseguito il rendering per Index.cshtml. Le chiamate a RenderPage cui è stato inserito in Index.cshtml sono state sostituite con il contenuto effettivo dei file di intestazione e piè di pagina.

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>

Creazione di un aspetto coerente usando le pagine di layout

Finora hai visto che è facile includere lo stesso contenuto in più pagine. Un approccio più strutturato per creare una ricerca coerente per un sito consiste nell'usare le pagine di layout. Una pagina di layout definisce la struttura di una pagina Web, ma non contiene alcun contenuto effettivo. Dopo aver creato una pagina di layout, è possibile creare pagine Web contenenti il contenuto e quindi collegarle alla pagina di layout. Quando vengono visualizzate queste pagine, verranno formattate in base alla pagina di layout. In questo senso, una pagina di layout funge da modello per il contenuto definito in altre pagine.

La pagina di layout è esattamente come qualsiasi pagina HTML, ad eccezione del fatto che contiene una chiamata al RenderBody metodo. La posizione del RenderBody metodo nella pagina di layout determina la posizione in cui verranno incluse le informazioni dalla pagina del contenuto.

Nel diagramma seguente viene illustrato il modo in cui le pagine del contenuto e le pagine di layout vengono combinate in fase di esecuzione per produrre la pagina Web completata. Il browser richiede una pagina di contenuto. La pagina del contenuto contiene codice in esso che specifica la pagina di layout da usare per la struttura della pagina. Nella pagina di layout il contenuto viene inserito nel punto in cui viene chiamato il RenderBody metodo. I blocchi di contenuto possono essere inseriti anche nella pagina di layout chiamando il RenderPage metodo, il modo in cui è stato fatto nella sezione precedente. Al termine della pagina Web, viene inviato al browser.

Screenshot che mostra una pagina nel browser che comporta l'esecuzione di una pagina che include chiamate al metodo RenderBody.

La procedura seguente illustra come creare una pagina di layout e collegare le pagine del contenuto a tale pagina.

  1. Nella cartella Condivisa del sito Web creare un file denominato _Layout1.cshtml.

  2. Sostituire qualsiasi contenuto esistente con quanto segue:

    <!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Usare il RenderPage metodo in una pagina di layout per inserire blocchi di contenuto. Una pagina di layout può contenere una sola chiamata al RenderBody metodo.

  3. Nella cartella Condivisa creare un file denominato _Header2.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    <div id="header">Creating a Consistent Look</div>

  4. Nella cartella radice creare una nuova cartella e denominarla Stili.

  5. Nella cartella Stili creare un file denominato Site.css e aggiungere le definizioni di stile seguenti:

    h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}

#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

    Queste definizioni di stile sono qui solo per mostrare in che modo i fogli di stile possono essere usati con pagine di layout. Se si vuole, è possibile definire gli stili personalizzati per questi elementi.

  6. Nella cartella radice creare un file denominato Content1.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    @{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Si tratta di una pagina che userà una pagina di layout. Il blocco di codice nella parte superiore della pagina indica quale pagina di layout usare per formattare il contenuto.

  7. Eseguire Content1.cshtml in un browser. La pagina di rendering usa il formato e il foglio di stile definiti in _Layout1.cshtml e il testo (contenuto) definito in Content1.cshtml.

    [Lo screenshot mostra l'esecuzione di Contenuto 1 punto CSHTML in un browser.]

    È possibile ripetere il passaggio 6 per creare pagine di contenuto aggiuntive che possono quindi condividere la stessa pagina di layout.

    Nota

    È possibile configurare il sito in modo che sia possibile usare automaticamente la stessa pagina di layout per tutte le pagine del contenuto in una cartella. Per informazioni dettagliate, vedere Personalizzazione del comportamento Site-Wide per Pagine Web ASP.NET.

Progettazione di pagine di layout con più sezioni di contenuto

Una pagina del contenuto può avere più sezioni, che è utile se si desidera usare layout con più aree con contenuto sostituibile. Nella pagina del contenuto si assegna a ogni sezione un nome univoco. La sezione predefinita viene lasciata senza nome. Nella pagina di layout si aggiunge un RenderBody metodo per specificare dove deve essere visualizzata la sezione non denominata (impostazione predefinita). È quindi possibile aggiungere metodi separati RenderSection per eseguire il rendering delle sezioni denominate singolarmente.

Il diagramma seguente illustra come ASP.NET gestisce il contenuto suddiviso in più sezioni. Ogni sezione denominata è contenuta in un blocco di sezione nella pagina del contenuto. (Sono denominati Header e List nell'esempio). Il framework inserisce la sezione contenuto nella pagina di layout nel punto in cui viene chiamato il RenderSection metodo. La sezione senza nome (impostazione predefinita) viene inserita nel punto in cui viene chiamato il RenderBody metodo, come illustrato in precedenza.

Diagramma concettuale che mostra come il metodo RenderSection inserisce sezioni di riferimento nella pagina corrente.

Questa procedura illustra come creare una pagina di contenuto con più sezioni di contenuto e come eseguirne il rendering usando una pagina di layout che supporta più sezioni di contenuto.

  1. Nella cartella Shared creare un file denominato _Layout2.cshtml.

  2. Sostituire qualsiasi contenuto esistente con quanto segue:

    <!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Usare il metodo per eseguire il RenderSection rendering delle sezioni di intestazione e elenco.

  3. Nella cartella radice creare un file denominato Content2.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    @{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Questa pagina di contenuto contiene un blocco di codice nella parte superiore della pagina. Ogni sezione denominata è contenuta in un blocco di sezione. Il resto della pagina contiene la sezione predefinita (senza nome).

  4. Eseguire Content2.cshtml in un browser.

    Screenshot che mostra una pagina nel browser risultante dall'esecuzione di una pagina che include chiamate al metodo RenderSection.

Creazione di sezioni di contenuto facoltative

In genere, le sezioni create in una pagina di contenuto devono corrispondere alle sezioni definite nella pagina di layout. Se si verifica uno dei seguenti errori, è possibile ottenere gli errori seguenti:

  • La pagina del contenuto contiene una sezione che non contiene alcuna sezione corrispondente nella pagina di layout.
  • La pagina di layout contiene una sezione per cui non è presente alcun contenuto.
  • La pagina di layout include chiamate al metodo che tentano di eseguire il rendering della stessa sezione più volte.

È tuttavia possibile eseguire l'override di questo comportamento per una sezione denominata dichiarando che la sezione deve essere facoltativa nella pagina di layout. In questo modo è possibile definire più pagine di contenuto che possono condividere una pagina di layout, ma che potrebbero avere o meno contenuto per una sezione specifica.

  1. Aprire Content2.cshtml e rimuovere la sezione seguente:

    @section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

  2. Salvare la pagina e quindi eseguirla in un browser. Viene visualizzato un messaggio di errore, perché la pagina del contenuto non fornisce contenuto per una sezione definita nella pagina di layout, ovvero la sezione dell'intestazione.

    Screenshot che mostra l'errore che si verifica se si esegue una pagina che chiama il metodo RenderSection, ma la sezione corrispondente non viene fornita.

  3. Nella cartella Shared aprire la pagina _Layout2.cshtml e sostituire questa riga:

    @RenderSection("header")

    con il codice seguente:

    @RenderSection("header", required: false)

    In alternativa, è possibile sostituire la riga di codice precedente con il blocco di codice seguente, che produce gli stessi risultati:

    @if (IsSectionDefined("header")) {
    @RenderSection("header")
}

  4. Eseguire di nuovo la pagina Content2.cshtml in un browser. Se questa pagina è ancora aperta nel browser, è sufficiente aggiornarla. Questa volta la pagina viene visualizzata senza errori, anche se non ha intestazione.

Passaggio di dati alle pagine di layout

Nella pagina del contenuto potrebbero essere stati definiti dati a cui è necessario fare riferimento in una pagina di layout. In tal caso, è necessario passare i dati dalla pagina del contenuto alla pagina di layout. Ad esempio, potrebbe essere necessario visualizzare lo stato di accesso di un utente oppure visualizzare o nascondere le aree di contenuto in base all'input dell'utente.

Per passare i dati da una pagina di contenuto a una pagina di layout, è possibile inserire i valori nella PageData proprietà della pagina del contenuto. La PageData proprietà è una raccolta di coppie nome/valore che contengono i dati da passare tra le pagine. Nella pagina di layout è quindi possibile leggere i valori dalla PageData proprietà .

Ecco un altro diagramma. In questo esempio viene illustrato come ASP.NET possibile utilizzare la PageData proprietà per passare valori da una pagina di contenuto alla pagina di layout. Quando ASP.NET inizia a creare la pagina Web, crea la PageData raccolta. Nella pagina del contenuto si scrive codice per inserire i dati nella PageData raccolta. È possibile accedere ai valori nella PageData raccolta anche da altre sezioni della pagina del contenuto o da blocchi di contenuto aggiuntivi.

Diagramma concettuale che mostra come una pagina di contenuto può popolare un dizionario PageData e passare tali informazioni alla pagina di layout.

La procedura seguente illustra come passare dati da una pagina di contenuto a una pagina di layout. Quando viene eseguita la pagina, viene visualizzato un pulsante che consente all'utente di nascondere o visualizzare un elenco definito nella pagina di layout. Quando gli utenti fa clic sul pulsante, imposta un valore true/false (booleano) nella PageData proprietà . La pagina di layout legge tale valore e, se è false, nasconde l'elenco. Il valore viene usato anche nella pagina del contenuto per determinare se visualizzare il pulsante Nascondi elenco o il pulsante Mostra elenco .

[Screenshot che mostra la pagina Passing Data .]

  1. Nella cartella radice creare un file denominato Content3.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    @{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}

    Il codice archivia due parti di dati nella PageData proprietà , ovvero il titolo della pagina Web e true o false per specificare se visualizzare un elenco.

    Si noti che ASP.NET consente di inserire markup HTML nella pagina in modo condizionale usando un blocco di codice. Ad esempio, il if/else blocco nel corpo della pagina determina quale modulo visualizzare a seconda che PageData["ShowList"] sia impostato su true.

  2. Nella cartella Shared creare un file denominato _Layout3.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    <!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

    La pagina di layout include un'espressione nell'elemento <title> che ottiene il valore del titolo dalla PageData proprietà . Usa anche il ShowList valore della PageData proprietà per determinare se visualizzare il blocco di contenuto dell'elenco.

  3. Nella cartella Shared creare un file denominato _List.cshtml e sostituire qualsiasi contenuto esistente con quanto segue:

    <ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

  4. Eseguire la pagina Content3.cshtml in un browser. La pagina viene visualizzata con l'elenco visibile sul lato sinistro della pagina e un pulsante Nascondi elenco nella parte inferiore.

    Screenshot che mostra la pagina che include l'elenco e un pulsante che indica

  5. Fare clic su Nascondi elenco. L'elenco scompare e il pulsante cambia in Mostra elenco.

    Screenshot che mostra la pagina che non include l'elenco e un pulsante che indica

  6. Fare clic sul pulsante Mostra elenco e l'elenco viene visualizzato di nuovo.

Risorse aggiuntive

Personalizzazione del comportamento di Site-Wide per Pagine Web ASP.NET