Creazione di un layout a livello di sito tramite le pagine master (VB)

di Scott Mitchell

Scarica il PDF

Questa esercitazione mostrerà le nozioni di base sulla pagina master. Ovvero quali sono le pagine master, come si crea una pagina master, quali sono i segnaposto del contenuto, come si crea una pagina ASP.NET che usa una pagina master, come la modifica della pagina master viene riflessa automaticamente nelle pagine di contenuto associate e così via.

Introduzione

Un attributo di un sito Web ben progettato è un layout di pagina coerente a livello di sito. Prendere il sito Web www.asp.net , ad esempio. Al momento della stesura di questo articolo, ogni pagina ha lo stesso contenuto nella parte superiore e inferiore della pagina. Come illustrato nella figura 1, nella parte superiore di ogni pagina viene visualizzata una barra grigia con un elenco di Community Microsoft. Sotto questo è il logo del sito, l'elenco delle lingue in cui il sito è stato tradotto e le sezioni principali: Home, Get Started, Learn, Downloads e così via. Analogamente, nella parte inferiore della pagina sono incluse informazioni sulla pubblicità su www.asp.net, un'informativa sul copyright e un collegamento all'informativa sulla privacy.

Figura 01: il sito Web www.asp.net usa un aspetto coerente in tutte le pagine (fare clic per visualizzare l'immagine a dimensione intera)

Un altro attributo di un sito ben progettato è la facilità con cui l'aspetto del sito può essere modificato. La figura 1 mostra la home page www.asp.net a partire da marzo 2008, ma tra il momento e la pubblicazione dell'esercitazione, l'aspetto potrebbe essere cambiato. Forse le voci di menu nella parte superiore si espanderanno per includere una nuova sezione per il framework MVC. O forse un design radicalmente nuovo con colori, tipi di carattere e layout diversi verrà presentato. L'applicazione di tali modifiche all'intero sito deve essere un processo rapido e semplice che non richiede la modifica delle migliaia di pagine Web che costituiscono il sito.

La creazione di un modello di pagina a livello di sito in ASP.NET è possibile tramite l'uso di pagine master. In breve, una pagina master è un tipo speciale di pagina ASP.NET che definisce il markup comune tra tutte le pagine di contenuto e le aree personalizzabili in base a una pagina di contenuto per contenuto. Una pagina di contenuto è una pagina ASP.NET associata alla pagina master. Ogni volta che viene modificato il layout o la formattazione di una pagina master, l'output di tutte le pagine di contenuto viene aggiornato immediatamente, in modo da rendere più semplice l'aggiornamento e la distribuzione di un singolo file (vale a essere la pagina master).

Questa è la prima esercitazione di una serie di esercitazioni che esplorano l'uso delle pagine master. Nel corso di questa serie di esercitazioni:

• Esaminare la creazione di pagine master e le pagine di contenuto associate,
• Discutere una varietà di suggerimenti, trucchi e trappole,
• Identificare i problemi comuni delle pagine master ed esplorare le soluzioni alternative,
• Vedere come accedere alla pagina master da una pagina di contenuto e viceversa,
• Informazioni su come specificare la pagina master di una pagina del contenuto in fase di esecuzione e
• Altri argomenti della pagina master avanzata.

Queste esercitazioni sono concepite per essere concise e fornire istruzioni dettagliate con un sacco di screenshot per illustrare visivamente il processo. Ogni esercitazione è disponibile nelle versioni di C# e Visual Basic e include un download del codice completo usato.

Questa esercitazione inaugurale inizia con un'occhiata alle nozioni di base della pagina master. Viene illustrato il funzionamento delle pagine master, la creazione di una pagina master e le pagine di contenuto associate tramite Visual Web Developer e viene illustrato come le modifiche apportate a una pagina master si riflettono immediatamente nelle pagine di contenuto. È possibile iniziare subito.

Informazioni sul funzionamento delle pagine master

La creazione di un sito Web con un layout di pagina coerente a livello di sito richiede che ogni pagina Web emetta markup di formattazione comune oltre al contenuto personalizzato. Ad esempio, mentre ogni esercitazione o post di forum su www.asp.net ha un proprio contenuto univoco, ognuna di queste pagine esegue anche il rendering di una serie di elementi comuni <div> che visualizzano i collegamenti di sezione di primo livello: Home, Get Started, Learn e così via.

Esistono diverse tecniche per la creazione di pagine Web con un aspetto coerente. Un approccio ingenuo consiste semplicemente nel copiare e incollare il markup di layout comune in tutte le pagine Web, ma questo approccio presenta diversi svantaggi. Per iniziare, ogni volta che viene creata una nuova pagina, è necessario ricordare di copiare e incollare il contenuto condiviso nella pagina. Tali operazioni di copia e incollamento sono ripeti per l'errore perché è possibile copiare accidentalmente solo un subset del markup condiviso in una nuova pagina. Inoltre, questo approccio sostituisce l'aspetto esistente a livello di sito con un nuovo aspetto, perché ogni singola pagina del sito deve essere modificata per usare il nuovo aspetto.

Prima di ASP.NET versione 2.0, gli sviluppatori di pagine spesso posizionavano il markup comune nei controlli utente e quindi aggiungevano questi controlli utente a ogni pagina e a ogni pagina. Questo approccio richiedeva che lo sviluppatore della pagina ricordi di aggiungere manualmente i controlli utente a ogni nuova pagina, ma consentito per modifiche più semplici a livello di sito, perché quando si aggiorna il markup comune è necessario modificare solo i controlli utente. Sfortunatamente, Visual Studio .NET 2002 e 2003, le versioni di Visual Studio usate per creare applicazioni ASP.NET 1.x, hanno eseguito il rendering dei controlli utente nella visualizzazione Progettazione come caselle grigie. Di conseguenza, gli sviluppatori di pagine che usano questo approccio non hanno goduto di un ambiente in fase di progettazione WYSIWYG.

Le carenze dell'uso dei controlli utente sono state risolte in ASP.NET versione 2.0 e Visual Studio 2005 con l'introduzione delle pagine master. Una pagina master è un tipo speciale di pagina ASP.NET che definisce sia il markup a livello di sito che le aree in cui le pagine di contenuto associate definiscono il markup personalizzato. Come vedremo nel passaggio 1, queste aree sono definite dai controlli ContentPlaceHolder. Il controllo ContentPlaceHolder indica semplicemente una posizione nella gerarchia di controllo della pagina master in cui è possibile inserire contenuto personalizzato da una pagina di contenuto.

Nota

I concetti di base e le funzionalità delle pagine master non sono stati modificati da ASP.NET versione 2.0. Visual Studio 2008 offre tuttavia il supporto in fase di progettazione per le pagine master annidate, una funzionalità priva di Visual Studio 2005. In un'esercitazione futura verranno esaminate le pagine master nidificate.

La figura 2 mostra l'aspetto della pagina master per www.asp.net . Si noti che la pagina master definisce il layout comune a livello di sito, ovvero il markup in alto, in basso e a destra di ogni pagina, nonché un ContentPlaceHolder in centro a sinistra, in cui si trova il contenuto univoco per ogni singola pagina Web.

Figura 02: Una pagina master definisce il layout Site-Wide e le aree modificabili in base alla pagina contenuto per contenuto

Dopo aver definito una pagina master, può essere associata a nuove pagine ASP.NET tramite il segno di spunta di una casella di controllo. Queste pagine ASP.NET, denominate pagine di contenuto, includono un controllo Contenuto per ogni controllo ContentPlaceHolder della pagina master. Quando la pagina del contenuto viene visitata tramite un browser, il motore di ASP.NET crea la gerarchia di controllo della pagina master e inserisce la gerarchia di controllo della pagina contenuto nelle posizioni appropriate. Viene eseguito il rendering di questa gerarchia di controlli combinata e il codice HTML risultante viene restituito al browser dell'utente finale. Di conseguenza, la pagina di contenuto genera sia il markup comune definito nella relativa pagina master all'esterno dei controlli ContentPlaceHolder che il markup specifico della pagina definito all'interno dei propri controlli Contenuto. La figura 3 illustra questo concetto.

Figura 03: Il markup della pagina richiesta viene fuso nella pagina master (fare clic per visualizzare l'immagine a dimensione intera)

Ora che è stato illustrato il funzionamento delle pagine master, è possibile esaminare la creazione di una pagina master e le pagine di contenuto associate usando Visual Web Developer.

Nota

Per raggiungere il pubblico più ampio possibile, il sito Web ASP.NET creato in questa serie di esercitazioni verrà creato usando ASP.NET 3.5 con la versione gratuita di Visual Studio 2008, Visual Web Developer 2008. Se non è ancora stato eseguito l'aggiornamento a ASP.NET 3.5, non preoccuparti: i concetti descritti in queste esercitazioni funzionano altrettanto bene con ASP.NET 2.0 e Visual Studio 2005. Tuttavia, alcune applicazioni demo possono usare funzionalità nuove per .NET Framework versione 3.5; quando vengono usate funzionalità specifiche della 3.5, includono una nota che illustra come implementare funzionalità simili nella versione 2.0. Tenere presente che le applicazioni demo disponibili per il download da ogni esercitazione sono destinate a .NET Framework versione 3.5, che genera un Web.config file che include elementi di configurazione specifici di 3.5. Breve storia lunga, se è ancora necessario installare .NET 3.5 nel computer, l'applicazione Web scaricabile non funzionerà senza prima rimuovere il markup specifico 3.5 da Web.config. Per altre informazioni su questo argomento, vedere Web.config File .

Passaggio 1: Creazione di una pagina master

Prima di poter esplorare la creazione e l'uso di pagine master e di contenuto, è necessario prima di tutto un sito Web ASP.NET. Per iniziare, creare un nuovo sito Web basato sul file system ASP.NET. A tale scopo, avviare Visual Web Developer e quindi passare al menu File e scegliere Nuovo sito Web, visualizzando la finestra di dialogo Nuovo sito Web (vedere la figura 4). Scegliere il modello sito Web ASP.NET, impostare l'elenco a discesa Percorso su File System, scegliere una cartella in cui inserire il sito Web e impostare la lingua su Visual Basic. Verrà creato un nuovo sito Web con una Default.aspx pagina ASP.NET, una App_Data cartella e un Web.config file.

Nota

Visual Studio supporta due modalità di gestione dei progetti: progetti di siti Web e progetti di applicazioni Web. I progetti di siti Web non dispongono di un file di progetto, mentre i progetti applicazione Web simulano l'architettura del progetto in Visual Studio .NET 2002/2003, includono un file di progetto e compilano il codice sorgente del progetto in un singolo assembly, che viene inserito nella /bin cartella . Visual Studio 2005 inizialmente supporta solo progetti di siti Web, anche se il modello Progetto applicazione Web è stato reintrodotto con Service Pack 1; Visual Studio 2008 offre entrambi i modelli di progetto. Le edizioni Visual Web Developer 2005 e 2008, tuttavia, supportano solo progetti di siti Web. In questa serie di esercitazioni si usa il modello Progetto sito Web per le demo. Se si usa un'edizione non Express e si vuole usare invece il modello Progetto applicazione Web , è possibile farlo, ma tenere presente che potrebbero esserci alcune discrepanze tra ciò che viene visualizzato sullo schermo e i passaggi da eseguire rispetto alle schermate visualizzate e alle istruzioni fornite in queste esercitazioni.

Figura 04: Creare un nuovo file System-Based sito Web (fare clic per visualizzare l'immagine a dimensione intera)

Aggiungere quindi una pagina master al sito nella directory radice facendo clic con il pulsante destro del mouse sul nome del progetto, scegliendo Aggiungi nuovo elemento e selezionando il modello Pagina master. Si noti che le pagine master terminano con l'estensione .master. Denominare la nuova pagina Site.master master e fare clic su Aggiungi.

Figura 05: Aggiungere una pagina master denominata Site.master al sito Web (fare clic per visualizzare l'immagine a dimensione intera)

L'aggiunta di un nuovo file di pagina master tramite Visual Web Developer crea una pagina master con il markup dichiarativo seguente:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

La prima riga nel markup dichiarativo è la @Master direttiva. La @Master direttiva è simile alla @Page direttiva visualizzata nelle pagine ASP.NET. Definisce il linguaggio lato server (VB) e le informazioni sulla posizione e l'ereditarietà della classe code-behind della pagina master.

Il DOCTYPE markup dichiarativo della pagina viene visualizzato sotto la @Master direttiva. La pagina include html statico insieme a quattro controlli lato server:

• Un Web Form (il <form runat="server">) perché tutte le pagine ASP.NET in genere hanno un Web Form e perché la pagina master può includere controlli Web che devono essere visualizzati all'interno di un Web Form, assicurarsi di aggiungere il Web Form alla pagina master anziché aggiungere un Web Form a ogni pagina del contenuto.
• Controllo ContentPlaceHolder denominato ContentPlaceHolder1 - Questo controllo ContentPlaceHolder viene visualizzato all'interno del Modulo Web e funge da area per l'interfaccia utente della pagina del contenuto.
• Elemento lato <head> server : l'elemento <head> ha l'attributo, rendendolo accessibile tramite codice runat="server" lato server. L'elemento <head> viene implementato in questo modo in modo che il titolo della pagina e altri <head>markup correlati possano essere aggiunti o modificati a livello di codice. Ad esempio, l'impostazione di una proprietà della Title pagina di ASP.NET modifica l'elemento <title> sottoposto a <head> rendering dal controllo server.
• Controllo ContentPlaceHolder denominato head - questo controllo ContentPlaceHolder viene visualizzato all'interno del <head> controllo server e può essere usato per aggiungere in modo dichiarativo il contenuto all'elemento <head> .

Questo markup dichiarativo della pagina master predefinito funge da punto di partenza per progettare le proprie pagine master. È possibile modificare il codice HTML o aggiungere altri controlli Web o ContentPlaceHolder alla pagina master.

Nota

Quando si progetta una pagina master, assicurarsi che la pagina master contenga un Web Form e che all'interno di questo Modulo Web venga visualizzato almeno un controllo ContentPlaceHolder.

Creazione di un layout di sito semplice

Site.masterEspandi il markup dichiarativo predefinito per creare un layout del sito in cui tutte le pagine condividono: un'intestazione comune, una colonna a sinistra con navigazione, notizie e altri contenuti a livello di sito e un piè di pagina che visualizza l'icona "Powered by Microsoft ASP.NET". La figura 6 mostra il risultato finale della pagina master quando una delle relative pagine di contenuto viene visualizzata tramite un browser. L'area rossa cerchiata nella figura 6 è specifica per la pagina visitata (Default.aspx); l'altro contenuto viene definito nella pagina master e quindi coerente in tutte le pagine del contenuto.

Figura 06: la pagina master definisce il markup per le parti superiore, sinistra e inferiore (fare clic per visualizzare l'immagine full-size)

Per ottenere il layout del sito illustrato nella figura 6, iniziare aggiornando la Site.master pagina master in modo che contenga il markup dichiarativo seguente:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

Il layout della pagina master viene definito usando una serie di <div> elementi HTML. Contiene topContent<div> il markup visualizzato nella parte superiore di ogni pagina, mentre , leftContentmainContente footerContent<div> vengono usati per visualizzare rispettivamente il contenuto della pagina, la colonna sinistra e l'icona "Powered by Microsoft ASP.NET". Oltre ad aggiungere questi <div> elementi, ho anche rinominato la ID proprietà del controllo ContentPlaceHolder primario da ContentPlaceHolder1 a MainContent.

Le regole di formattazione e layout per questi elementi assortiti <div> vengono specificate nel file Styles.cssCsssheet (CSS) specificato tramite un <link> elemento nell'elemento della <head> pagina master. Queste varie regole definiscono l'aspetto e l'aspetto di ogni <div> elemento annotato sopra. Ad esempio, l'elemento topContent<div> , che visualizza il testo e il collegamento "Esercitazioni pagine master", ha le regole di formattazione specificate nel Styles.css modo seguente:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Se si sta seguendo lungo il computer, sarà necessario scaricare il codice di accompagnamento di questa esercitazione e aggiungere il Styles.css file al progetto. Analogamente, sarà anche necessario creare una cartella denominata Images e copiare l'icona "Powered by Microsoft ASP.NET" dal sito Web demo scaricato al progetto.

Nota

Una discussione sulla formattazione di pagine CSS e Web è oltre l'ambito di questo articolo. Per altre informazioni su CSS, vedere le esercitazioni CSS in W3Schools.com. Ti consigliamo anche di scaricare il codice di accompagnamento di questa esercitazione e riprodurre con le impostazioni CSS in Styles.css per visualizzare gli effetti di regole di formattazione diverse.

Creazione di una pagina master usando un modello di progettazione esistente

Negli anni ho creato una serie di applicazioni Web ASP.NET per aziende di piccole e medie dimensioni. Alcuni dei miei clienti avevano un layout del sito esistente che volevano usare; altri hanno assunto un designer di grafica competente. Alcuni mi hanno affidato di progettare il layout del sito Web. Come si può dire in base alla figura 6, l'attività di un programmatore per progettare il layout di un sito Web è in genere saggio come avere il tuo contabile eseguire un intervento chirurgico open-heart mentre il tuo medico esegue le tue imposte.

Fortunatamente, ci sono siti Web innumerevoli che offrono modelli di progettazione HTML gratuiti - Google ha restituito più di sei milioni di risultati per il termine di ricerca "modelli di siti Web gratuiti". Uno dei miei preferiti è OpenDesigns.org. Dopo aver trovato un modello di sito Web simile, aggiungere i file e le immagini CSS al progetto del sito Web e integrare il codice HTML del modello nella pagina master.

Nota

Microsoft offre anche un numero di modelli gratuiti ASP.NET Design Start Kit che si integrano nella finestra di dialogo Nuovo sito Web in Visual Studio.

Passaggio 2: Creazione di pagine di contenuto associate

Con la pagina master creata, è possibile iniziare a creare pagine ASP.NET associate alla pagina master. Tali pagine vengono definite pagine di contenuto.

Aggiungere una nuova pagina ASP.NET al progetto e associarla alla Site.master pagina master. Fare clic con il pulsante destro del mouse sul nome del progetto in Esplora soluzioni e scegliere l'opzione Aggiungi nuovo elemento. Selezionare il modello modulo Web, immettere il nome About.aspxe quindi selezionare la casella di controllo "Seleziona pagina master" come illustrato nella figura 7. In questo modo verrà visualizzata la finestra di dialogo Seleziona pagina master (vedere la figura 8) da cui è possibile scegliere la pagina master da usare.

Nota

Se il sito Web ASP.NET è stato creato usando il modello di progetto applicazione Web anziché il modello progetto sito Web, non verrà visualizzata la casella di controllo "Seleziona pagina master" nella finestra di dialogo Aggiungi nuovo elemento visualizzata nella figura 7. Per creare una pagina di contenuto quando si usa il modello di progetto applicazione Web, è necessario scegliere il modello modulo contenuto Web anziché il modello del modulo Web. Dopo aver selezionato il modello modulo contenuto Web e fare clic su Aggiungi, verrà visualizzata la stessa finestra di dialogo Seleziona pagina master visualizzata nella figura 8.

Figura 07: Aggiungere una nuova pagina contenuto (fare clic per visualizzare l'immagine full-size)

Figura 08: selezionare la pagina master (fare clic per visualizzare l'immagineSite.master a dimensioni complete)

Come illustrato nel markup dichiarativo seguente, una nuova pagina del contenuto contiene una direttiva che punta alla relativa pagina master e a un @Page controllo Contenuto per ognuno dei controlli ContentPlaceHolder della pagina master.

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Nota

Nella sezione "Creazione di un layout di sito semplice" nel passaggio 1 ho rinominato ContentPlaceHolder1MainContent. Se il controllo ContentPlaceHolder non è ID stato rinominato nello stesso modo, il markup dichiarativo della pagina del contenuto differisce leggermente dal markup riportato sopra. In nome, il secondo controllo ContentPlaceHolderID Contenuto rifletterà il ID controllo ContentPlaceHolder corrispondente nella pagina master.

Quando si esegue il rendering di una pagina di contenuto, il motore di ASP.NET deve unire i controlli Contenuto della pagina con i controlli ContentPlaceHolder della pagina master. Il motore di ASP.NET determina la pagina master della pagina del contenuto dall'attributo @Page della MasterPageFile direttiva. Come illustrato nel markup precedente, questa pagina di contenuto è associata a ~/Site.master.

Poiché la pagina master include due controlli ContentPlaceHolder e MainContent - Visual Web Developer ha generato due controlli head Contenuto. Ogni controllo Content fa riferimento a un determinato ContentPlaceHolder tramite la relativa ContentPlaceHolderID proprietà.

Laddove le pagine master si espongono rispetto alle tecniche di modello a livello di sito precedenti, sono supportate in fase di progettazione. La figura 9 mostra la pagina del contenuto visualizzata tramite la About.aspx visualizzazione Progettazione di Visual Web Developer. Si noti che, mentre il contenuto della pagina master è visibile, è disattivato e non può essere modificato. I controlli Contenuto corrispondenti ai ContentPlaceHolder della pagina master sono tuttavia modificabili. Analogamente a qualsiasi altra pagina ASP.NET, è possibile creare l'interfaccia della pagina del contenuto aggiungendo controlli Web tramite le visualizzazioni Origine o Progettazione.

Figura 09: la visualizzazione progettazione della pagina contenuto visualizza sia il contenuto della pagina Page-Specific che la pagina master (fare clic per visualizzare l'immagine full-size)

Aggiunta di markup e controlli Web alla pagina contenuto

Per creare un contenuto per la About.aspx pagina, prendere un momento. Come si può vedere nella figura 10, ho immesso anche un titolo "Informazioni sull'autore" e un paio di paragrafi di testo, ma è possibile aggiungere anche controlli Web. Dopo aver creato questa interfaccia, visitare la About.aspx pagina tramite un browser.

Figura 10: visitare la pagina tramite un browser (fare clic per visualizzare l'immagineAbout.aspx a dimensioni complete)

È importante comprendere che la pagina del contenuto richiesta e la relativa pagina master associata vengono fusi e sottoposti a rendering interamente sul server Web. Il browser dell'utente finale viene quindi inviato al codice HTML risultante. Per verificare questa operazione, visualizzare il codice HTML ricevuto dal browser passando al menu Visualizza e scegliendo Origine. Si noti che non sono presenti fotogrammi o altre tecniche specializzate per la visualizzazione di due pagine Web diverse in una singola finestra.

Associazione di una pagina master a una pagina di ASP.NET esistente

Come illustrato in questo passaggio, l'aggiunta di una nuova pagina di contenuto a un'applicazione Web ASP.NET è semplice come controllare la casella di controllo "Seleziona pagina master" e scegliere la pagina master. Sfortunatamente, la conversione di una pagina di ASP.NET esistente in una pagina master non è facile.

Per associare una pagina master a una pagina di ASP.NET esistente, è necessario eseguire la procedura seguente:

1. Aggiungere l'attributo MasterPageFile alla direttiva della @Page pagina di ASP.NET, puntandolo alla pagina master appropriata.
2. Aggiungere i controlli Contenuto per ognuno dei ContentPlaceHolder nella pagina master.
3. Tagliare e incollare in modo selettivo il contenuto esistente della pagina ASP.NET nei controlli Contenuto appropriati. Dico "selettivamente" qui perché la pagina ASP.NET probabilmente contiene il markup già espresso dalla pagina master, ad esempio DOCTYPE, l'elemento e il <html> Web Form.

Per istruzioni dettagliate su questo processo insieme agli screenshot, vedere l'esercitazione Sull'uso di pagine master e navigazione sito di Scott Guthrie. La sezione "Aggiorna Default.aspx e DataSample.aspx per usare la pagina master" illustra questi passaggi.

Poiché è molto più facile creare nuove pagine di contenuto rispetto alla conversione di pagine di ASP.NET esistenti in pagine di contenuto, è consigliabile che ogni volta che si crea una nuova ASP.NET sito Web aggiungere una pagina master al sito. Associare tutte le nuove pagine ASP.NET a questa pagina master. Non preoccuparti se la pagina master iniziale è molto semplice o normale; è possibile aggiornare la pagina master in un secondo momento.

Nota

Quando si crea una nuova applicazione ASP.NET, Visual Web Developer aggiunge una Default.aspx pagina non associata a una pagina master. Se si vuole eseguire la conversione di una pagina di ASP.NET esistente in una pagina del contenuto, procedere e procedere con Default.aspx. In alternativa, è possibile eliminare Default.aspx e quindi aggiungerlo nuovamente, ma questa volta selezionando la casella di controllo "Seleziona pagina master".

Passaggio 3: Aggiornamento del markup della pagina master

Uno dei vantaggi principali delle pagine master è che una singola pagina master può essere usata per definire il layout complessivo per numerose pagine nel sito. Pertanto, l'aggiornamento dell'aspetto del sito richiede l'aggiornamento di un singolo file - la pagina master.

Per illustrare questo comportamento, aggiornare la pagina master per includere la data corrente nella parte superiore della colonna sinistra. Aggiungere un'etichetta denominata DateDisplay all'oggetto leftContent<div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Creare quindi un Page_Load gestore eventi per la pagina master e aggiungere il codice seguente:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

Il codice precedente imposta la proprietà etichetta Text sulla data e l'ora correnti formattata come giorno della settimana, il nome del mese e il giorno a due cifre (vedere la figura 11). Con questa modifica, rivedere una delle pagine del contenuto. Come illustrato nella figura 11, il markup risultante viene immediatamente aggiornato per includere la modifica alla pagina master.

Figura 11: le modifiche apportate alla pagina master vengono riflesse durante la visualizzazione di una pagina contenuto (fare clic per visualizzare l'immagine a dimensioni complete)

Nota

Come illustrato in questo esempio, le pagine master possono contenere controlli Web lato server, codice e gestori eventi.

Riepilogo

Le pagine master consentono agli sviluppatori di ASP.NET di progettare un layout coerente a livello di sito che è facilmente aggiornabile. La creazione di pagine master e le pagine di contenuto associate è semplice come la creazione di pagine di ASP.NET standard, come Visual Web Developer offre supporto avanzato in fase di progettazione.

L'esempio di pagina master creato in questa esercitazione includeva due controlli ContentPlaceHolder, head e MainContent. È stato specificato solo il markup per il controllo MainContent ContentPlaceHolder nella pagina del contenuto. Nell'esercitazione successiva viene esaminato l'uso di più controlli Contenuto nella pagina del contenuto. Viene anche illustrato come definire il markup predefinito per i controlli contenuto all'interno della pagina master, nonché come attivare l'interruttore tra l'uso del markup predefinito definito nella pagina master e fornire markup personalizzato dalla pagina del contenuto.

Programmazione felice!

Altre informazioni

Per altre informazioni sugli argomenti illustrati in questa esercitazione, vedere le risorse seguenti:

• ASP.NET per progettisti: modelli di progettazione gratuiti e linee guida per la creazione di siti Web ASP.NET usando gli standard Web
• Panoramica delle pagine master ASP.NET
• Esercitazioni su fogli di stile a cascata (CSS)
• Impostazione dinamica del titolo della pagina
• Pagine master in ASP.NET
• Esercitazioni introduttive sulle pagine master

Informazioni sull'autore

Scott Mitchell, autore di più libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 3,5 in 24 ore. Scott può essere raggiunto all'indirizzo mitchell@4GuysFromRolla.com o tramite il suo blog all'indirizzo http://ScottOnWriting.NET.

Grazie speciali

Interessati a esaminare i prossimi articoli MSDN? In tal caso, lasciami una riga in mitchell@4GuysFromRolla.com.

IndietroAvanti