Procedura dettagliata: utilizzo di pagine master nidificate in ASP.NET
Aggiornamento: novembre 2007
In questa procedura dettagliata viene descritto come creare una pagina master nidificata in un'altra pagina master. Le pagine master funzionano come modelli che specificano l'aspetto delle pagine.
È possibile nidificare le pagine master in modo che ogni pagina possa avere un layout flessibile e mantenere un aspetto coerente in un sito Web. Ad esempio, è possibile creare una pagina master padre in cui siano presenti un banner aziendale nella parte superiore e i controlli per l'esplorazione del sito in una colonna laterale. È quindi possibile creare una pagina master figlio per un reparto o un prodotto specifico che utilizzi la pagina master padre. Può inoltre fungere da pagina master per tutte le altre pagine correlate del prodotto o del reparto. In questo modo, ogni linea di prodotti o reparto può presentare un aspetto coerente, e grazie alla pagina master padre tutte le pagine possono avere un aspetto complessivo coerente. Per ulteriori informazioni sulle pagine master, vedere Informazioni generali sulle pagine master ASP.NET.
In questa procedura dettagliata vengono illustrate le attività seguenti:
Creazione di una pagina master.
Creazione di una pagina master nidificata in un'altra pagina master.
Creazione di una pagina ASP.NET con il contenuto da visualizzare nella pagina master.
Prerequisiti
Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:
Visual Studio 2008 o Microsoft Visual Web Developer Express Edition. Per informazioni sul download, visitare il sito Web Visual Studio Developer Center (informazioni in lingua inglese).
Campo .NET Framework versione 3.5.
A scelta, un file jpg, gif oppure un altro file di immagine che possa essere utilizzato come banner della pagina master. È consigliabile che il banner non sia superiore a 780 pixel di larghezza e 150 pixel di altezza. Tuttavia, la visualizzazione di un logo è facoltativa e le dimensioni esatte dell'immagine non sono fondamentali per il completamento di questa procedura dettagliata.
Creazione di un sito Web
Se è già stato creato un sito web in Visual Web Developer, ad esempio seguendo la procedura indicata in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare tale sito Web e passare alla sezione successiva "Creazione della pagina master". In caso contrario, creare un sito Web e una pagina nuovi attenendosi alla procedura riportata di seguito.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Scegliere Nuovosito Web dal menu File.
Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati scegliere Sito Web ASP.NET.
Nella casella Percorso, digitare il nome della cartella in cui salvare le pagine del sito Web.
È ad esempio possibile digitare C:\Tasks.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.
Scegliere OK.
In Visual Web Developer viene creata la cartella e una nuova pagina denominata Default.aspx.
Creazione di una pagina master padre
In questa sezione viene creata una pagina master padre. Questa pagina contiene un banner e i controlli di spostamento che possono essere utilizzati in tutto il sito. In un secondo momento, verrà creata un'altra pagina master che sarà utilizzata in questa pagina master padre. Le pagine master figlio possono fornire i vari layout per le pagine mantenendo al contempo l'aspetto stabilito dalla pagina master padre.
Per creare la pagina master
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiunginuovo elemento.
Verrà visualizzata la finestra di dialogo Aggiunginuovo elemento.
In Modelli Visual Studio installati fare clic su Pagina master.
Digitare ParentMaster nella casella Nome.
Deselezionare la casella di controllo Inserisci codice in file separato.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.
Scegliere Aggiungi.
La nuova pagina master viene aperta nella visualizzazione Origine.
Aggiunta di elementi alla pagina master padre
Nella parte superiore della pagina master è presente una dichiarazione @ Master al posto della dichiarazione @ Page, che in genere si trova nella parte superiore delle pagine ASP.NET. Il corpo della pagina contiene un controllo ContentPlaceHolder, che rappresenta l'area della pagina master in cui il contenuto sostituibile verrà unito alle pagine di contenuto in fase di esecuzione. I segnaposti per il contenuto saranno utilizzati più avanti nella procedura dettagliata.
Aggiunta di elementi grafici alla pagina master padre
Prima di poter incorporare elementi grafici nella pagina master padre, è necessario aggiungere i file grafici al sito Web.
Creare un elemento grafico da 780 pixel di larghezza e 150 pixel di altezza per il banner e un elemento grafico da 780 pixel di larghezza e 50 pixel di altezza per il piè di pagina. Gli elementi grafici vengono utilizzati per mostrare come gli elementi grafici della pagina master padre verranno visualizzati in una pagina master nidificata. Se non si dispone di questi elementi grafici, è possibile crearli in Microsoft Paint o in un altro programma di grafica.
Per aggiungere un file grafico esistente al sito Web
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungielemento esistente.
Verrà visualizzata la finestra di dialogo Aggiungi elemento esistente.
Selezionare i file grafici creati.
Scegliere Aggiungi.
Nella pagina master padre vengono aggiunti due elementi grafici semplici: uno per il banner e l'altro per il piè di pagina. Tali elementi grafici consentono di controllare se la pagina master padre viene utilizzata nelle pagine master nidificate che verranno create più avanti in questa procedura.
Per aggiungere elementi grafici per il banner e il piè di pagina alla pagina master padre
Nella visualizzazione Origine, immediatamente dopo il tag <form> di apertura, aggiungere un elemento div che contiene un elemento img per l'elemento grafico del banner.
Se ad esempio si è creato un elemento grafico denominato Banner.gif, il markup per aggiungerlo sarebbe il seguente:
<div id="banner"> <img src="banner.gif" alt="banner graphic" /> </div>Immediatamente prima del tag </form> di chiusura, aggiungere un elemento div che contiene un elemento img per l'elemento grafico del piè di pagina.
Se ad esempio si è creato un elemento grafico denominato Footer.gif, il markup per aggiungerlo sarebbe il seguente:
<div id="banner"> <img src="footer.gif" alt="footer graphic" /> </div>Salvare la pagina master.
Non è stato aggiunto alcunché nel controllo ContentPlaceHolder. Il successivo insieme di pagine master verrà creato nel controllo ContentPlaceHolder.
Creazione di una pagina master figlio
Per nidificare una pagina master in un'altra, è necessario creare un'altra pagina master. La nuova pagina master si troverà all'interno del segnaposto del contento della pagina master padre. La pagina master figlio consente di disporre la pagina in modi diversi conservando al contempo l'aspetto coerente stabilito dalla pagina master padre.
Per creare la pagina master figlio
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiunginuovo elemento.
Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su Pagina master.
Digitare ChildMaster nella casella Nome.
Deselezionare la casella di controllo Inserisci codice in file separato.
Selezionare la casella di controllo Seleziona pagina master.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.
Scegliere Aggiungi.
Verrà visualizzata la finestra di dialogo Seleziona pagina master.
Selezionare la pagina master padre creata precedentemente in questa procedura dettagliata.
Scegliere OK.
La nuova pagina master viene aperta nella visualizzazione Origine.
La dichiarazione @ Master nella parte superiore della nuova pagina master indica che quest'ultima fa riferimento a una pagina master.
Aggiunta di controlli ContentPlaceHolder alla pagina master figlio
Poiché alla pagina master figlio è associata un'altra pagina master, vi si trovano due controlli Content. Il primo segnaposto del contento può essere utilizzato per aggiungere informazioni alla pagina che normalmente sarebbe visualizzata nell'elemento head, ad esempio un elemento script. All'interno del secondo controllo Content è possibile aggiungere un controllo ContentPlaceHolder. Ciò consente a una pagina ASP.NET che utilizza la pagina master figlio di fornire il contenuto per la pagina. È possibile aggiungere gli altri elementi della pagina nel controllo Content. La pagina master figlio può contenere elementi di pagina aggiuntivi per fornire un aspetto coerente alle pagine che utilizzano la pagina master figlio.
Per aggiungere i controlli ContentPlaceHolder alla pagina master figlio
Aprire o passare alla pagina master figlio.
Passare alla visualizzazione Origine.
Aggiungere il seguente markup all'interno della sezione Content del secondo controllo al fine di creare i controlli ContentPlaceHolder:
<div id="2col"> <asp:ContentPlaceHolder ID="leftcolumn" > </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="rightcolumn" > </asp:ContentPlaceHolder> </div>Salvare il file.
La pagina master figlio ora ha i controlli ContentPlaceHolder che contengono il markup di una pagina ASP.NET che utilizza la pagina master figlio.
Creazione di una pagina di contenuto che utilizza la pagina master figlio
Nei passaggi precedenti è stata creata una pagina master nidificata in un'altra pagina master. La pagina master figlio risultante consente di utilizzare gli elementi dell'interfaccia utente della pagina master padre. Fornisce inoltre elementi dell'interfaccia utente aggiuntivi nella seconda pagina master. In questa procedura dettagliata vengono aggiunti elementi grafici alla pagina master padre e segnaposti alla seconda pagina master. Per vedere in azione le pagine master nidificate, è necessario creare una pagina Web ASP.NET che utilizza la pagina master figlio. La nuova pagina creata che utilizza la pagina master figlio conterrà automaticamente un controllo Content per ogni controllo ContentPlaceHolder creato nella pagina master figlio.
Per creare una pagina che utilizza la pagina master figlio
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiunginuovo elemento.
Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su Web Form.
Digitare Tasks nella casella Nome.
Selezionare la casella di controllo Inserisci codice in file separato.
Selezionare la casella di controllo Seleziona pagina master.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare.
Scegliere Aggiungi.
Nella finestra di dialogo Seleziona pagina master selezionare la pagina master figlio creata precedentemente in questa procedura dettagliata.
Scegliere OK.
La nuova pagina di contenuto viene aperta nella visualizzazione Origine.
Impostare l'ID del primo controllo Content su leftcolumn e impostare l'ID del secondo controllo Content su rightcolumn.
Aggiungere elementi testo o pagina ai controlli Content della colonna sinistra o destra.
Premere CTRL+F5 per eseguire il sito Web.
Nella pagina Tasks.aspx viene visualizzata una combinazione di tutti gli elementi creati in questa procedura dettagliata. Sono inclusi gli elementi grafici della pagina master padre, il layout a due colonne della pagina master figlio e il testo e i controlli aggiunti alla pagina Tasks.aspx.
Passaggi successivi
Dopo avere appreso il funzionamento delle pagine master nidificate, è possibile creare altre pagine master figlio che utilizzano la pagina master padre. La pagina master figlio creata in questa procedura dettagliata presenta un layout a due colonne. Un'altra pagina master figlio da creare per la pagina master padre potrebbe presentare un layout a colonna singola o un altro tipo di layout.