Procedura dettagliata: creazione di temi selezionabili dall'utente
Aggiornamento: novembre 2007
In questa procedura dettagliata viene illustrato come creare una pagina ASP.NET che consente all'utente di selezionare un tema per la pagina. Nonostante in questo esempio vengano utilizzati una sola interfaccia del controllo e un file di foglio di stile CSS di base, i principi illustrati sono validi anche per temi più complessi che includono elementi grafici, diversi schemi di layout nel file CSS e interfacce dei controlli server più complesse.
Di seguito vengono elencate le attività illustrate nella procedura dettagliata:
Creazione di un tema, inclusi un file CSS e un'interfaccia del controllo server, in Microsoft Visual Web Developer.
Creazione di una pagina master ASP.NET che utilizza un tema.
Creazione di una pagina ASP.NET con una pagina master applicata che utilizza un tema.
Creazione di un controllo server elenco a discesa che applica un nuovo tema a una pagina, inclusa la modifica degli stili negli elementi della pagina master.
Esecuzione di una pagina per visualizzare diversi temi applicati alla pagina.
Prerequisiti
Per completare questa procedura, è necessario disporre di:
Visual Web Developer (Visual Studio).
.NET Framework.
Creazione di un sito Web
Se è stato già creato un sito Web in Visual Web Developer (ad esempio, seguendo le procedure di Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare tale sito Web e passare alla sezione successiva, "Creazione di una pagina master". In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla seguente procedura.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Scegliere Nuovosito Web dal menu File.
Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.
Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.
Digitare, ad esempio, il nome di cartella C:\WebSites.
Nell'elenco Linguaggio selezionare il linguaggio di programmazione con lui lavorare.
Scegliere OK.
Visual Web Developer crea la cartella e una nuova pagina chiamata Default.aspx.
Creazione di un tema
Un tema è un insieme di impostazioni delle proprietà che consentono di definire l'aspetto di pagine e controlli. È possibile applicare questo aspetto in modo uniforme a tutte le pagine in un'applicazione Web. I temi sono costituiti da diversi elementi: interfacce dei controlli server, file CSS e altre risorse. In questo esempio vengono utilizzati un'interfaccia e un foglio di stile per creare un tema.
I temi sono definiti in directory speciali nel progetto di sito Web.
Per creare un tema
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto di sito Web, scegliere Aggiungi cartella ASP.NET e quindi Tema.
La cartella App_Themes viene creata automaticamente e viene aggiunta una nuova cartella di temi denominata Theme1.
Fare clic con il pulsante destro del mouse sulla nuova cartella Theme1 e scegliere Rinomina. Digitare Blue e premere INVIO.
Fare clic con il pulsante destro del mouse sulla nuova cartella Blue e quindi scegliere Aggiungi nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare File di interfaccia e assegnare al file il nome default.skin. Fare clic su Aggiungi.
In Esplora soluzioni fare di nuovo clic con il pulsante destro del mouse sulla nuova cartella Blue e quindi scegliere Aggiungi nuovo elemento.
Nella finestra di dialogo Aggiungi nuovo elemento scegliere Foglio di stile. Assegnare al foglio di stile il nome default.css. Fare clic su Aggiungi.
Il primo tema è stato creato con un file CSS vuoto e un file di interfaccia del controllo server. Presto questi file verranno modificati, ma per prima cosa è necessario creare una pagina che contiene un controllo ed elementi HTML a cui applicare il tema.
Creazione di una pagina master
Per dimostrare che un tema può essere applicato sia a una pagina master che a una pagina che utilizza tale pagina master, creare una pagina master semplice da utilizzare con la pagina Default.aspx nel progetto Web.
Per creare la pagina master
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web e scegliere Aggiunginuovo elemento.
In Modelli Visual Studio installati fare clic su Pagina master.
Nella casella Nome digitare Master1.master.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione preferito.
Deselezionare la casella di controllo Inserisci codice in file separato e fare clic su Aggiungi.
La nuova pagina master viene aperta nella visualizzazione Origine. Nella parte superiore della pagina è 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 asp:contentplaceholder, che definisce l'area della pagina master in cui verrà unito il contenuto sostituibile delle pagine contenuto in fase di esecuzione. Il segnaposto per il contenuto sarà utilizzato più avanti nella procedura dettagliata.
Definizione del layout della pagina Master
La pagina master definisce gli elementi che costituiscono la pagina. La pagina master può contenere qualsiasi combinazione di testo statico e controlli. Una pagina master contiene anche uno o più segnaposto che indicano il punto in cui verrà visualizzato il contenuto dinamico quando le pagine vengono visualizzate.
In questa procedura dettagliata verrà utilizzata una tabella contenente un titolo, diverse regole orizzontali e un segnaposto del contenuto della pagina master come layout per la pagina Home.aspx.
Per creare una tabella per la pagina master
Con il file Master1.master selezionato in visualizzazione Origine, selezionare il testo compreso tra i due elementi form e incollare il contenuto riportato di seguito nell'area selezionata. Si noti che questo codice inserisce il segnaposto del contenuto in una tabella, anziché tra gli elementi div, come avviene nel layout master predefinito.
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>Ora il layout della pagina master può essere applicato alla pagina del contenuto (denominata Home.aspx) che si creerà nella prossima sezione.
Creazione di una pagina del contenuto
Mediante la pagina master viene fornito il modello per il contenuto. Il contenuto di questa pagina viene definito creando una pagina ASP.NET associata alla pagina master. La pagina del contenuto è una pagina ASP.NET specifica in cui è presente solo il contenuto da unire alla pagina master. Nella pagina del contenuto, vengono aggiunti il testo e i controlli da visualizzare quando gli utenti richiedono quella pagina.
La pagina del contenuto utilizzerà la pagina master creata e i temi che devono ancora essere completati. La pagina utilizzerà il segnaposto del contenuto della pagina master e avrà un titolo, un sottotitolo e un elenco a discesa. Poiché la pagina utilizzerà una pagina master, deve contenere un attributo MasterPageFile nella direttiva @ Page oltre al segnaposto del contenuto.
Per creare la pagina del contenuto
In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web e scegliere Aggiungi nuovo elemento.
In Modelli Visual Studio installati fare clic su Web Form.
Nella casella Nome digitare Home.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione preferito.
Selezionare la casella di controllo Seleziona pagina master, quindi scegliere Aggiungi.
Verrà visualizzata la finestra di dialogo Seleziona pagina master.
Fare clic su Master1.master, quindi scegliere OK.
Viene creato un nuovo file denominato Home.aspx. Nella pagina è presente una direttiva @ Page che collega la pagina corrente alla pagina master selezionata con l'attributo MasterPageFile, come mostrato nell'esempio riportato di seguito.
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>Nella pagina è presente anche un elemento <asp:Content> che sarà utilizzato successivamente.
Aggiunta di contenuto alla pagina del contenuto
Le pagine contenuto non dispongono degli elementi che costituiscono di solito le pagine ASP.NET, ad esempio gli elementi html, body o form. Al contrario, in queste pagine viene aggiunto unicamente il contenuto che si desidera visualizzare nella pagina master, sostituendo le aree dei segnaposto create nella pagina master. Per questo esempio, è possibile aggiungere un elemento intestazione 1, un elemento intestazione 2, un elemento paragrafo e un elenco a discesa. L'elenco a discesa verrà utilizzato per selezionare un tema da applicare alla pagina.
Per aggiungere contenuto alla home page
Incollare il codice riportato di seguito tra i tag asp:Content di inizio e di fine. Nell'esempio seguente vengono creati tre elementi HTML, un'intestazione 1, un'intestazione 2 e un paragrafo, e viene aggiunto un controllo elenco a discesa. Se si preferisce, si può anche aggiungere il controllo alla pagina in visualizzazione Progettazione.
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>Aggiungere una sezione di script che eseguirà il codice che carica il tema quando viene selezionato nell'elenco a discesa. L'esempio riportato di seguito e i tag script devono essere aggiunti alla pagina contenuto sulla riga dopo la direttiva @ Page.
<script > Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script > public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>Il tema viene caricato durante l'evento PreInit del ciclo di vita della pagina. Il form di richiesta della pagina contiene una matrice di valori e il valore di indice 4 è il valore selezionato nell'elenco a discesa. Questo valore viene assegnato al tema della pagina e quando la pagina viene caricata viene applicato il nuovo tema.
Nel passaggio successivo della procedura dettagliata vengono creati diversi temi che è possibile utilizzare per dimostrare che è applicato un tema diverso.
Modifica del tema Blue
Il tema Blue contiene un foglio di stile vuoto e un'interfaccia vuota. Poiché si conoscono gli elementi che costituiscono la pagina predefinita e la pagina master utilizzata, è ora possibile modificare i file del tema per aggiungere colore agli elementi della pagina.
Per modificare il tema Blue
Aprire il file Default.skin dalla cartella dei temi Blue in visualizzazione Origine.
Aggiungere il codice seguente all'elenco a discesa per definire i colori della pagina quando viene selezionato il tema Blue.
<asp:dropdownlist ForeColor="white" BackColor="Blue" />Aprire il file Default.css dalla cartella Blue in visualizzazione Origine. Aggiungere innanzitutto il codice seguente per formattare il titolo della tabella dalla pagina master.
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }Aggiungere quindi un colore di sfondo alla tabella con il codice seguente.
table.header { background-color: Blue; }Applicare uno stile agli elementi intestazione 1 e intestazione 2 nella pagina del contenuto.
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }Applicare infine uno stile alla regola orizzontale e all'elemento paragrafo.
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
Connessione dei temi alla pagina
Prima di poter visualizzare il tema applicato alla pagina Home.aspx, è necessario aggiungere un attributo alla direttiva @ Page che indica l'utilizzo di un tema nella pagina.
Per connettere una pagina a un tema
Aprire Home.aspx in visualizzazione Origine.
Aggiungere l'attributo StylesheetTheme alla direttiva @ Page e impostarlo in modo che corrisponda al tema Blue. La direttiva della pagina dovrebbe essere analoga alla seguente.
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
Test della pagina
È possibile eseguire il test della pagina eseguendola come una qualsiasi pagina ASP.NET.
Per eseguire il test della pagina
Durante la visualizzazione della pagina Home.aspx, premere CTRL+F5 per eseguire la pagina.
In ASP.NET il contenuto della pagina Home.aspx viene unito al layout della pagina Master1.master in modo da formare un'unica pagina, viene applicato il tema Blue e la pagina risultante viene visualizzata nel browser. Si noti che il tema Blue viene applicato agli elementi HTML, all'elenco a discesa nonché al titolo e allo sfondo definiti nel file master.
Creazione di temi aggiuntivi
Il tema Blue va bene, ma lo scopo di questa procedura dettagliata è offrire all'utente della pagina diverse opzioni per un tema. È possibile copiare i file dell'interfaccia e del foglio di stile in nuove directory dei temi e quindi modificare i colori utilizzati nel tema per riflettere i nuovi colori del tema. Nella procedura seguente vengono creati due nuovi temi denominati Red e Green.
Per creare temi aggiuntivi
In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Themes, scegliere Aggiungi cartella ASP.NET e quindi Tema. Con il titolo di cartella Theme1 selezionato, digitare Red e quindi premere INVIO.
Aprire la cartella Blue e selezionare i file Default.skin e Default.css. Fare clic con il pulsante destro del mouse sui due file selezionati e scegliere Copia.
Fare clic con il pulsante destro del mouse sulla cartella Red e quindi scegliere Incolla.
Ripetere il passaggio 1, ma assegnare alla nuova cartella del tema il nome Green. Fare quindi clic con il pulsante destro del mouse sulla cartella Green e scegliere Incolla, inserendo così copie dei file Default.skin e Default.css nella cartella Green.
Modificare l'attributo del colore nel file dell'interfaccia per riflettere il colore del tema. Ad esempio, il file dell'interfaccia del tema Red deve essere analogo al seguente.
<asp:dropdownlist ForeColor="white" BackColor="Red" />Modificare il foglio di stile affinché ogni tema rifletta il nome del tema. Sarà necessario utilizzare diverse gradazioni di verde per il testo e i diversi elementi HTML in modo che risaltino sullo sfondo. Il foglio di stile per il tema Green deve essere analogo al seguente.
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
Verifica della selezione del tema
È ora possibile selezionare uno dei tre temi per la pagina nell'elenco a discesa.
Per selezionare temi diversi
Passare alla pagina Home.aspx e premere CTRL+F5.
Selezionare Green o Red nell'elenco a discesa.
Si noti che il foglio di stile viene applicato agli elementi HTML della pagina e l'interfaccia viene applicata al controllo elenco a discesa.
Passaggi successivi
Per ulteriori informazioni sull'utilizzo di pagine master, vedere Procedura dettagliata: creazione e utilizzo di pagine master ASP.NET in Visual Web Developer.
Vedere anche
Attività
Procedura: applicare temi ASP.NET