Pagine master

di Microsoft

Uno dei componenti chiave per un sito Web di successo è un aspetto coerente. In ASP.NET 1.x gli sviluppatori hanno usato i controlli utente per replicare elementi di pagina comuni in un'applicazione Web. Anche se questa è certamente una soluzione funzionante, l'uso dei controlli utente presenta alcuni svantaggi. Ad esempio, una modifica nella posizione di un controllo utente richiede una modifica a più pagine in un sito. Il rendering dei controlli utente non viene eseguito anche nella visualizzazione Struttura dopo l'inserimento in una pagina.

Uno dei componenti chiave per un sito Web di successo è un aspetto coerente. In ASP.NET 1.x gli sviluppatori hanno usato i controlli utente per replicare elementi di pagina comuni in un'applicazione Web. Anche se questa è certamente una soluzione funzionante, l'uso dei controlli utente presenta alcuni svantaggi. Ad esempio, una modifica nella posizione di un controllo utente richiede una modifica a più pagine in un sito. Il rendering dei controlli utente non viene eseguito anche nella visualizzazione Struttura dopo l'inserimento in una pagina.

ASP.NET 2.0 introduce le pagine master come modo per mantenere un aspetto coerente e, come si vedrà presto, le pagine master rappresentano un miglioramento significativo rispetto al metodo di controllo utente.

Perché pagine master?

Ci si potrebbe chiedere perché le pagine master erano necessarie in ASP.NET 2.0. Dopo tutto, gli sviluppatori di siti Web usano già i controlli utente in ASP.NET 1.x per condividere le aree del contenuto tra le pagine. Esistono in realtà diversi motivi per cui i controlli utente sono una soluzione meno ottimale per la creazione di un layout comune.

I controlli utente non definiscono effettivamente il layout di pagina. Definiscono invece il layout e le funzionalità per una parte di una pagina. La distinzione tra questi due è importante perché rende molto più difficile la gestibilità di una soluzione di controllo utente. Ad esempio, quando si desidera modificare la posizione di un controllo utente nella pagina, è necessario modificare la pagina effettiva in cui viene visualizzato il controllo utente. Ciò va bene se hai solo poche pagine, ma in siti di grandi dimensioni, diventa rapidamente un incubo di gestione siti!

Un altro svantaggio dell'uso dei controlli utente per definire un layout comune è radicato nell'architettura di ASP.NET stessa. Se viene modificato un membro pubblico di un controllo utente, è necessario ricompilare tutte le pagine che usano il controllo utente. A sua volta, ASP.NET ri-JIT le pagine al primo accesso. Questo, ancora una volta, produce un'architettura non scalabile e un problema di gestione del sito per siti di grandi dimensioni.

Entrambi questi problemi (e molti altri) sono ben risolti dalle pagine master in ASP.NET 2.0.

Funzionamento delle pagine master

Una pagina master è analoga a un modello per altre pagine. Gli elementi di pagina che devono essere condivisi tra altre pagine (ad esempio menu, bordi e così via) vengono aggiunti alla pagina master. Quando vengono aggiunte nuove pagine al sito, è possibile associarle a una pagina master. Una pagina associata a una pagina master è denominata pagina di contenuto. Per impostazione predefinita, una pagina di contenuto assume l'aspetto della pagina master. Tuttavia, quando si crea una pagina master, è possibile definire parti della pagina che la pagina del contenuto può sostituire con il proprio contenuto. Queste parti vengono definite usando un nuovo controllo introdotto in ASP.NET 2.0; controllo ContentPlaceHolder .

Una pagina master può contenere un numero qualsiasi di controlli ContentPlaceHolder (o nessuno). Nella pagina del contenuto il contenuto dei controlli ContentPlaceHolder viene visualizzato all'interno dei controlli Contenuto , un altro nuovo controllo in ASP.NET 2.0. Per impostazione predefinita, i controlli Contenuto delle pagine di contenuto sono vuoti in modo da poter fornire contenuto personalizzato. Se si vuole usare il contenuto della pagina master all'interno dei controlli Contenuto, è possibile farlo come si vedrà più avanti in questo modulo. Il controllo Contenuto viene mappato al controllo ContentPlaceHolder tramite l'attributo ContentPlaceHolderID del controllo Contenuto. Il codice seguente esegue il mapping di un controllo Contenuto a un controllo ContentPlaceHolder denominato mainBody in una pagina master.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Nota

Spesso si sente che le persone descrivono le pagine master come una classe di base per altre pagine. Quello non è vero. La relazione tra pagine master e pagine di contenuto non è una di ereditarietà.

La figura 1 mostra una pagina master e una pagina di contenuto associata come vengono visualizzate in Visual Studio 2005. È possibile visualizzare il controllo ContentPlaceHolder nella pagina master e il controllo Contenuto corrispondente nella pagina del contenuto. Si noti che il contenuto delle pagine master esterne a ContentPlaceHolder è visibile ma disattivato nella pagina del contenuto. Solo il contenuto all'interno di ContentPlaceHolder può essere soppiantato dalla pagina di contenuto. Tutti gli altri contenuti provenienti dalla pagina master non sono modificabili.

Figura 1: Pagina master e pagina del contenuto associata

Creazione di una pagina master

Per creare una nuova pagina master:

1. Aprire Visual Studio 2005 e creare un nuovo sito Web.
2. Fare clic su File, Nuovo, File.
3. Scegliere File master nella finestra di dialogo Aggiungi nuovo elemento, come illustrato nella figura 2.
4. Fare clic su Aggiungi.

Figura 2: Creazione di una nuova pagina master

Si noti che l'estensione di file per una pagina master è master. Questo è uno dei modi in cui una pagina master differisce da una pagina normale. L'altra differenza principale è che al posto di una @Page direttiva, la pagina master contiene una @Master direttiva. Passare a Visualizzazione origine per la pagina master appena creata ed esaminare il codice.

Per impostazione predefinita, una nuova pagina master avrà un controllo ContentPlaceHolder. Nella maggior parte dei casi, è più opportuno creare prima gli elementi di pagina comuni e quindi inserire i controlli ContentPlaceHolder in cui si desidera il contenuto personalizzato. In questi casi, gli sviluppatori vogliono eliminare il controllo ContentPlaceHolder predefinito e inserirli nuovi durante lo sviluppo della pagina. I controlli ContentPlaceHolder non sono ridimensionabili nonostante il fatto che vengano visualizzati handle di ridimensionamento. Le dimensioni del controllo ContentPlaceHolder vengono automaticamente basate sul contenuto che contiene con un'eccezione; se si posiziona un controllo ContentPlaceHolder all'interno di un elemento di blocco, ad esempio una cella di tabella, la dimensione dipenderà dalle dimensioni dell'elemento.

Lab 1 Uso delle pagine master

In questo lab si creerà una nuova pagina master e si definiranno tre controlli ContentPlaceHolder. Si creerà quindi una nuova pagina Contenuto e si sostituirà il contenuto da almeno uno dei controlli ContentPlaceHolder.

1. Creare una pagina master e inserire i controlli ContentPlaceHolder.

   1. Creare una nuova pagina master come descritto in precedenza.
   2. Eliminare il controllo ContentPlaceHolder predefinito.
   3. Selezionare il controllo ContentPlaceHolder facendo clic sul bordo superiore ombreggiato del controllo e quindi eliminarlo premendo il tasto CANC sulla tastiera.
   4. Inserire una nuova tabella usando il modello Intestazione e lato , come illustrato nella figura 3. Modificare la larghezza e l'altezza su 90% in modo che l'intera tabella sia visibile nella finestra di progettazione.

Figura 3

1. Posizionare il cursore in ogni cella della tabella e impostare la proprietà valign su top.
2. Nella casella degli strumenti inserire un controllo ContentPlaceHolder nella cella superiore della tabella (cella di intestazione).
3. Quando si inserisce questo controllo ContentPlaceHolder, si noterà che l'altezza della riga occupa quasi l'intera pagina, come illustrato nella figura 4. Non preoccuparti a questo punto.

Figura 4: Lo spazio vuoto si trova nella stessa cella di ContentPlaceHolder

1. Posizionare un controllo ContentPlaceHolder nelle altre due celle. Dopo aver inserito gli altri controlli ContentPlaceHolder, le dimensioni delle celle della tabella dovrebbero essere come previsto. La pagina dovrebbe ora essere simile alla pagina illustrata nella figura 5.

Figura 5: Master con tutti i controlli ContentPlaceHolder. Si noti che l'altezza della cella per la cella di intestazione è ora ciò che dovrebbe essere

1. Immettere un testo a scelta in ognuno dei tre controlli ContentPlaceHolder.
2. Salvare la pagina master come exercise1.master.
3. Creare un nuovo Web Form e associarlo alla pagina master exercise1.master.
4. Selezionare File, Nuovo, File in Visual Studio 2005.
5. Selezionare Web Form nella finestra di dialogo Aggiungi nuovo elemento.
6. Assicurarsi che la casella di controllo Seleziona pagina master sia selezionata come illustrato nella figura 6.

Figura 6: Aggiunta di una nuova pagina di contenuto

1. Fare clic su Aggiungi.
2. Selezionare exercise1.master nella finestra di dialogo Selezionare una pagina master, come illustrato nella figura 7.
3. Fare clic su OK per aggiungere la nuova pagina di contenuto.

La nuova pagina di contenuto viene visualizzata in Visual Studio con un controllo Contenuto per ogni controllo ContentPlaceHolder nella pagina master. Per impostazione predefinita, i controlli Contenuto sono vuoti in modo da poter aggiungere contenuto personalizzato. Per usare il contenuto del controllo ContentPlaceHolder nella pagina master, è sufficiente fare clic sul simbolo dello smart tag (la piccola freccia nera nell'angolo superiore destro del controllo) e scegliere Default to Masters Content (Contenuto master ) come illustrato nella figura 8. In questo caso, la voce di menu viene modificata in Crea contenuto personalizzato. Facendo clic su di esso, il contenuto viene rimosso dalla pagina master che consente di definire contenuto personalizzato per quel particolare controllo Contenuto.

Figura 7: Impostazione predefinita di un controllo contenuto sul contenuto delle pagine master

Connessione di pagine master e contenuto

L'associazione tra una pagina master e una pagina di contenuto può essere configurata in uno dei quattro modi seguenti:

• Attributo MasterPageFile della @Page direttiva
• Impostazione della proprietà Page.MasterPageFile nel codice.
• Elemento <pages> nel file di configurazione delle applicazioni (web.config nella cartella radice dell'applicazione)
• Elemento <pages> in un file di configurazione delle sottocartelle (web.config in una sottocartella)

Attributo MasterPageFile

L'attributo MasterPageFile semplifica l'applicazione di una pagina master a una determinata pagina ASP.NET. È anche il metodo usato per applicare la pagina master quando si seleziona la casella di controllo Seleziona pagina master come nell'esercizio 1.

Impostazione di Page.MasterPageFile nel codice

Impostando la proprietà MasterPageFile nel codice, è possibile applicare una determinata pagina master al contenuto in fase di esecuzione. Ciò è utile nei casi in cui potrebbe essere necessario applicare una pagina master specifica in base a un ruolo utente o ad altri criteri. La proprietà MasterPageFile deve essere impostata nel metodo PreInit. Se viene impostato dopo il metodo PreInit, verrà generata un'eccezione InvalidOperationException. La pagina in cui è impostata questa proprietà deve avere anche un controllo Contenuto come controllo di primo livello per la pagina. In caso contrario, verrà generata un'eccezione HttpException quando viene impostata la proprietà MasterPageFile.

Utilizzo dell'elemento <pages>

È possibile configurare una pagina master per le pagine impostando l'attributo masterPageFile nell'elemento <pages> del file web.config. Quando si usa questo metodo, tenere presente che web.config file più bassi nella struttura dell'applicazione possono eseguire l'override di questa impostazione. Anche qualsiasi attributo MasterPageFile impostato in una @Page direttiva eseguirà l'override di questa impostazione. L'uso dell'elemento pages> semplifica la <creazione di una pagina master che può essere sottoposta a override, se necessario in particolari cartelle o file.

Proprietà nelle pagine master

Una pagina master può esporre le proprietà semplicemente rendendo pubbliche tali proprietà all'interno della pagina master. Ad esempio, il codice seguente definisce una proprietà denominata SomeProperty:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

Per accedere alla proprietà SomeProperty dalla pagina Contenuto, è necessario utilizzare la proprietà Master come indicato di seguito:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Annidamento di pagine master

Le pagine master sono la soluzione ideale per garantire un aspetto comune in un'applicazione Web di grandi dimensioni. Tuttavia, non è insolito avere determinate parti di un sito di grandi dimensioni condividono un'interfaccia comune mentre altre parti condividono un'interfaccia diversa. Per soddisfare le esigenze, più pagine master sono la soluzione perfetta. Tuttavia, ciò non risolve ancora il fatto che un'applicazione di grandi dimensioni può avere determinati componenti (ad esempio un menu, ad esempio) condivisi tra tutte le pagine e altri componenti condivisi solo tra determinate sezioni del sito. Per questo tipo di situazione, le pagine master nidificate riempiono la necessità. Come si è visto, una normale pagina master è costituita da una pagina master e da una pagina di contenuto. In una situazione di pagina master annidata sono presenti due pagine master; un master padre e un master figlio. La pagina master figlio è anche una pagina di contenuto e il relativo master è la pagina master padre.

Ecco il codice per una pagina master tipica:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

In uno scenario master annidato, si tratta del master padre. Un'altra pagina master usa questa pagina come pagina master e il codice sarà simile al seguente:

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Si noti che in questo scenario, il master figlio è anche una pagina di contenuto per il master padre. Tutto il contenuto del master figlio viene visualizzato all'interno di un controllo Contenuto che ottiene il contenuto dal controllo ContentPlaceHolder dell'elemento padre.

Nota

Designer supporto non è disponibile per le pagine master nidificate. Quando si sviluppano usando master annidati, è necessario usare la vista origine.

Questo video illustra una procedura dettagliata sull'uso di pagine master nidificate.

Aprire Full-Screen Video

Figura 8: Selezione di una pagina master