Interazione con la pagina master dalla pagina di contenuto (C#)

di Scott Mitchell

Esamina come chiamare i metodi, impostare le proprietà e così via della pagina principale dal codice della pagina di contenuto.

Introduzione

Nel corso delle ultime cinque esercitazioni è stato illustrato come creare una pagina master, definire aree del contenuto, associare ASP.NET pagine a una pagina master e definire contenuto specifico della pagina. Quando un visitatore richiede una pagina di contenuto particolare, il markup del contenuto e delle pagine master viene fuso in fase di esecuzione, con conseguente rendering di una gerarchia di controllo unificata. Pertanto, abbiamo già visto un modo in cui la pagina master e una delle sue pagine di contenuto possono interagire: la pagina del contenuto specifica il markup da trasfondere nei controlli ContentPlaceHolder della pagina principale.

Ciò che è ancora necessario esaminare è il modo in cui la pagina master e la pagina del contenuto possono interagire a livello di codice. Oltre a definire il markup per i controlli ContentPlaceHolder della pagina master, una pagina del contenuto può anche assegnare valori alle proprietà pubbliche della pagina master e richiamare i relativi metodi pubblici. Analogamente, una pagina master può interagire con le relative pagine di contenuto. Sebbene l'interazione programmatica tra un master e una pagina del contenuto sia meno comune dell'interazione tra i markup dichiarativi, esistono molti scenari in cui è necessaria tale interazione programmatica.

In questa esercitazione viene esaminato come una pagina di contenuto può interagire a livello di codice con la relativa pagina master; nell'esercitazione successiva verrà illustrato in che modo la pagina master può interagire in modo analogo con le pagine di contenuto.

Esempi di interazione a livello di codice tra una pagina contenuto e la relativa pagina master

Quando una determinata area di una pagina deve essere configurata in base alla pagina per pagina, viene usato un controllo ContentPlaceHolder. Ma cosa accade nelle situazioni in cui la maggior parte delle pagine deve generare un determinato output, ma un numero ridotto di pagine deve personalizzarlo per mostrare qualcos'altro? Uno di questi esempi, esaminato nell'esercitazione Multiple ContentPlaceHolders e Default Content , implica la visualizzazione di un'interfaccia di accesso in ogni pagina. Anche se la maggior parte delle pagine deve includere un'interfaccia di accesso, deve essere eliminata per alcune pagine, ad esempio: la pagina di accesso principale (Login.aspx), la pagina Crea account e altre pagine accessibili solo agli utenti autenticati. L'esercitazione Multiple ContentPlaceHolders e Default Content ha illustrato come definire il contenuto predefinito per un ContentPlaceHolder nella pagina master e quindi come eseguire l'override del contenuto predefinito in quelle pagine in cui non era desiderato.

Un'altra opzione consiste nel creare una proprietà o un metodo pubblico all'interno della pagina master che indica se visualizzare o nascondere l'interfaccia di accesso. Ad esempio, la pagina master può includere una proprietà pubblica denominata ShowLoginUI il cui valore è stato utilizzato per impostare la Visible proprietà del controllo Login nella pagina master. Tali pagine di contenuto in cui l'interfaccia utente di accesso deve essere eliminata potrebbero quindi impostare la ShowLoginUI proprietà a livello di codice su false.

Forse l'esempio più comune di interazione tra contenuto e pagina master si verifica quando i dati visualizzati nella pagina master devono essere aggiornati dopo che alcune azioni sono accadute nella pagina di contenuto. Si consideri una pagina master che include un controllo GridView che visualizza i cinque record aggiunti più di recente da una tabella di database specifica e che una delle relative pagine di contenuto include un'interfaccia per l'aggiunta di nuovi record alla stessa tabella.

Quando un utente visita la pagina per aggiungere un nuovo record, visualizza i cinque record aggiunti più di recente visualizzati nella pagina master. Dopo aver compilato i valori per le colonne del nuovo record, invia il modulo. Supponendo che la proprietà GridView nella pagina EnableViewState master sia impostata su true (impostazione predefinita), il relativo contenuto viene ricaricato dallo stato di visualizzazione e, di conseguenza, vengono visualizzati gli stessi cinque record anche se un record più recente è stato appena aggiunto al database. Ciò può confondere l'utente.

Per risolvere la situazione, in modo che il record appena aggiunto venga visualizzato nel GridView nella pagina master quando si verifica un postback, è necessario indicare a GridView di associarsi nuovamente alla sua origine dati dopo l'aggiunta del nuovo record al database. Ciò richiede l'interazione tra il contenuto e le pagine master perché l'interfaccia per l'aggiunta del nuovo record (e i relativi gestori eventi) si trovano nella pagina del contenuto, ma GridView che deve essere aggiornato si trova nella pagina master.

Poiché l'aggiornamento della visualizzazione della pagina master da un gestore eventi nella pagina del contenuto è una delle esigenze più comuni per l'interazione tra contenuto e pagina master, esaminiamo questo argomento in modo più dettagliato. Il download per questa esercitazione include un database di Microsoft SQL Server 2005 Express Edition denominato NORTHWIND.MDF nella cartella del App_Data sito Web. Il database Northwind archivia le informazioni su prodotti, dipendenti e vendite per una società fittizia, Northwind Traders.

Il passaggio 1 illustra la visualizzazione dei cinque prodotti aggiunti più di recente in un controllo GridView nella pagina master. Il passaggio 2 crea una pagina di contenuto per l'aggiunta di nuovi prodotti. Il passaggio 3 illustra come creare proprietà e metodi pubblici nella pagina master e il passaggio 4 illustra come interfacciarsi a livello di codice con queste proprietà e metodi dalla pagina del contenuto.

Passaggio 1: Visualizzazione dei cinque prodotti aggiunti più di recente nella pagina master

Aprire la Site.master pagina master e aggiungere un'etichetta e un controllo GridView all'oggetto leftContent<div>. Svuotare la proprietà Text dell'etichetta, impostarne la proprietà EnableViewState su false e la proprietà ID su GridMessage; impostare la proprietà ID di GridView su RecentProducts. Successivamente, nella Progettazione espandere lo Smart Tag del GridView e scegliere di associarlo a una nuova origine dati. Questo avvia la procedura guidata di configurazione dell'origine dati. Poiché il database Northwind nella App_Data cartella è un database di Microsoft SQL Server, scegliere di creare un'istanza di SqlDataSource selezionando (vedere la figura 1); denominare SqlDataSource RecentProductsDataSource.

Figura 01: Associare GridView a un controllo SqlDataSource denominato RecentProductsDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Il passaggio successivo chiede di specificare il database a cui connettersi. Scegliere il file di NORTHWIND.MDF database dall'elenco a discesa e fare clic su Avanti. Poiché questa è la prima volta che è stato usato questo database, la procedura guidata consentirà di salvare la stringa di connessione in Web.config. Fallo archiviare la stringa di connessione usando il nome NorthwindConnectionString.

Figura 02: Connettersi al database Northwind (fare clic per visualizzare l'immagine a dimensione intera)

La procedura guidata Configura origine dati consente di specificare due modi per specificare la query usata per recuperare i dati:

• Specificando un'istruzione SQL personalizzata o una stored procedure oppure
• Selezionando una tabella o una vista e quindi specificando le colonne da restituire

Poiché si vogliono restituire solo i cinque prodotti aggiunti più di recente, è necessario specificare un'istruzione SQL personalizzata. Usare la query SELECT seguente:

SELECT TOP 5 ProductName, UnitPrice FROM Products ORDER BY ProductID DESC

La TOP 5 parola chiave restituisce solo i primi cinque record della query. La Products chiave primaria della tabella, ProductID, è una IDENTITY colonna, che assicura che ogni nuovo prodotto aggiunto alla tabella avrà un valore maggiore rispetto alla voce precedente. Pertanto, l'ordinamento dei risultati ProductID in ordine decrescente restituisce i prodotti a partire da quelli creati più di recente.

Figura 03: Restituire i cinque prodotti aggiunti più di recente (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver completato la procedura guidata, Visual Studio genera due campi BoundField per GridView per visualizzare i ProductName campi e UnitPrice restituiti dal database. A questo punto il markup dichiarativo della pagina master dovrebbe includere un markup simile a quello che segue:

<asp:Label ID="GridMessage" runat="server" EnableViewState="false"></asp:Label>
<asp:GridView ID="RecentProducts" runat="server" AutoGenerateColumns="False"
 DataSourceID="RecentProductsDataSource">
 <Columns> 
 <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
 SortExpression="ProductName"/> 
 <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
 SortExpression="UnitPrice"/> 
 </Columns> 
</asp:GridView> 

<asp:SqlDataSource ID="RecentProductsDataSource" runat="server" 
 ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
 SelectCommand="SELECT TOP 5 ProductName, UnitPrice FROM Products ORDER BY ProductID DESC"> 
</asp:SqlDataSource>

Come si può notare, il markup contiene: il controllo Web Label (GridMessage); GridView RecentProducts, con due BoundFields e un controllo SqlDataSource che restituisce i cinque prodotti aggiunti più di recente.

Con questo GridView creato e il controllo SqlDataSource configurato, visitare il sito Web tramite un browser. Come illustrato nella figura 4, verrà visualizzata una griglia nell'angolo inferiore sinistro che elenca i cinque prodotti aggiunti più di recente.

Figura 04: GridView visualizza i cinque prodotti aggiunti più di recente (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Creazione di una pagina contenuto per aggiungere nuovi prodotti

L'attività successiva consiste nel creare una pagina di contenuto da cui un utente può aggiungere un nuovo prodotto alla Products tabella. Aggiungere una nuova pagina di contenuto alla Admin cartella denominata AddProduct.aspx, assicurandosi di associarla alla Site.master pagina master. La figura 5 mostra il Esplora soluzioni dopo l'aggiunta di questa pagina al sito Web.

Figura 05: Aggiungere una nuova pagina ASP.NET alla Admin cartella (fare clic per visualizzare l'immagine a dimensione intera)

Tenere presente che nell'esercitazione Specificare il titolo, i meta tag e altre intestazioni HTML della pagina master abbiamo creato una classe di pagina base personalizzata denominata BasePage che ha generato il titolo della pagina se non era impostato in modo esplicito. Passare alla classe code-behind della pagina AddProduct.aspx e farla derivare da BasePage (anziché da System.Web.UI.Page).

Aggiornare infine il Web.sitemap file in modo da includere una voce per questa lezione. Aggiungere il markup seguente sotto il <siteMapNode> nella lezione Problemi di denominazione dell'ID di controllo:

<siteMapNode url="~/Admin/AddProduct.aspx" title="Content to Master Page Interaction" />

Come illustrato nella figura 6, l'aggiunta di questo <siteMapNode> elemento viene riflessa nell'elenco Lezioni.

Tornare a AddProduct.aspx. Nel controllo Contenuto per MainContent ContentPlaceHolder aggiungere un controllo DetailsView e denominarlo NewProduct. Associare DetailsView a un nuovo controllo SqlDataSource denominato NewProductDataSource. Analogamente a SqlDataSource nel passaggio 1, configurare la procedura guidata in modo che usi il database Northwind e scegliere di specificare un'istruzione SQL personalizzata. Poiché DetailsView verrà usato per aggiungere elementi al database, è necessario specificare sia un'istruzione SELECT che un'istruzione INSERT . Utilizzare la seguente query SELECT :

SELECT ProductName, UnitPrice FROM Products

Quindi, dalla scheda INSERT aggiungere l'istruzione seguente INSERT :

INSERT INTO Products(ProductName, UnitPrice) VALUES(@ProductName, @UnitPrice)

Dopo aver completato la procedura guidata, passare allo smart tag DetailsView e selezionare la casella di controllo "Abilita inserimento". Verrà aggiunto un oggetto CommandField a DetailsView con la relativa ShowInsertButton proprietà impostata su true. Poiché questo DetailsView verrà usato esclusivamente per l'inserimento di dati, imposta la proprietà di DetailsView DefaultMode su Insert.

Questo è tutto ciò che occorre fare. Testiamo questa pagina. Visita AddProduct.aspx tramite un browser, inserisci un nome e un prezzo (vedi la figura 6).

Figura 06: Aggiungere un nuovo prodotto al database (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver digitato il nome e il prezzo del nuovo prodotto, fare clic sul pulsante Inserisci. In questo modo il form esegue un postback. Al postback viene eseguita l'istruzione del INSERT controllo SqlDataSource. I due parametri vengono popolati con i valori immessi dall'utente nei due controlli TextBox di DetailsView. Purtroppo, non c'è alcun riscontro visivo che un inserimento sia avvenuto. Sarebbe bello visualizzare un messaggio, confermando che è stato aggiunto un nuovo record. Lascio questo come esercizio per il lettore. Inoltre, dopo aver aggiunto un nuovo record da DetailsView, gridView nella pagina master mostra ancora gli stessi cinque record di prima; non include il record appena aggiunto. Si esaminerà come risolvere questo problema nei passaggi successivi.

Passaggio 3: Creazione di proprietà e metodi pubblici nella pagina master

Nel passaggio 1 è stato aggiunto un controllo Web di tipo etichetta denominato GridMessage sopra il GridView nella master page. Questa etichetta è progettata per visualizzare facoltativamente un messaggio. Ad esempio, dopo aver aggiunto un nuovo record alla Products tabella, potrebbe essere necessario visualizzare un messaggio che legge: "ProductName è stato aggiunto al database". Anziché impostare come hardcoded il testo per questa etichetta nella pagina master, è possibile che il messaggio sia personalizzabile dalla pagina del contenuto.

Poiché il controllo Etichetta viene implementato come variabile membro protetta all'interno della pagina master, non è possibile accedervi direttamente dalle pagine del contenuto. Per usare l'etichetta all'interno di una pagina master dalla pagina del contenuto (o, per tale motivo, qualsiasi controllo Web nella pagina master) è necessario creare una proprietà pubblica nella pagina master che espone il controllo Web o funge da proxy a cui è possibile accedere una delle relative proprietà. Aggiungere la sintassi seguente alla classe code-behind della pagina master per esporre la proprietà dell'etichetta Text :

public string GridMessageText 
{ 
    get
    { 
        return GridMessage.Text; 
    } 
    set 
    {
        GridMessage.Text = value; 
    }
}

Quando viene aggiunto un nuovo record alla tabella Products da una pagina di contenuto, il RecentProducts GridView nella pagina master deve essere riassociato all'origine dati sottostante. Per riassociare GridView chiama il metodo DataBind . Poiché GridView nella pagina master non è accessibile a livello di codice alle pagine di contenuto, è necessario creare un metodo pubblico nella pagina master che, quando viene chiamato, riassocia i dati a GridView. Aggiungere il metodo seguente alla classe code-behind della pagina master:

public void RefreshRecentProductsGrid() 
{ 
    RecentProducts.DataBind();
}

Con la proprietà GridMessageText e il metodo RefreshRecentProductsGrid, qualsiasi pagina di contenuto può impostare o leggere il valore della proprietà Text dell'etichetta GridMessage o riassociare i dati al RecentProducts GridView. Il passaggio 4 esamina come accedere alle proprietà e ai metodi pubblici della pagina master da una pagina di contenuto.

Passaggio 4: Chiamare i membri pubblici della pagina master da una pagina di contenuto

Ora che la pagina master ha le proprietà e i metodi pubblici necessari, è possibile richiamare queste proprietà e metodi dalla pagina del AddProduct.aspx contenuto. In particolare, è necessario impostare la proprietà della pagina master GridMessageText e chiamare il suo metodo RefreshRecentProductsGrid dopo che il nuovo prodotto è stato aggiunto al database. Tutti i controlli Web di ASP.NET dati generano eventi immediatamente prima e dopo il completamento di varie attività, semplificando agli sviluppatori di pagine di eseguire alcune azioni a livello di codice prima o dopo l'attività. Ad esempio, quando l'utente finale fa clic sul pulsante Inserisci di DetailsView, nel postback DetailsView genera l'evento ItemInserting prima di iniziare il flusso di lavoro di inserimento. Inserisce quindi il record nel database. In seguito, DetailsView genera l'evento ItemInserted . Pertanto, per lavorare con la pagina master dopo l'aggiunta del nuovo prodotto, creare un gestore eventi per l'evento DetailsViewItemInserted.

Esistono due modi in cui una pagina del contenuto può interfacciarsi a livello di codice con la relativa pagina master:

• Utilizzando la Page.Master proprietà, che restituisce un riferimento debolmente tipizzato alla pagina master o
• Specificare il tipo di pagina master o il percorso del file della pagina tramite una @MasterType direttiva. In questo modo viene aggiunta automaticamente una proprietà fortemente tipizzata alla pagina denominata Master.

Esaminiamo entrambi gli approcci.

Utilizzo della proprietà loosely-typedPage.Master

Tutte le pagine Web ASP.NET devono derivare dalla classe Page, che si trova nello spazio dei nomi System.Web.UI. La Page classe include una Master proprietà che restituisce un riferimento alla pagina master della pagina. Se la pagina non dispone di una master Master page, restituisce null.

La Master proprietà restituisce un oggetto di tipo MasterPage ,che si trova anche nello spazio dei System.Web.UI nomi , ovvero il tipo di base da cui derivano tutte le pagine master. Pertanto, per utilizzare proprietà o metodi pubblici definiti nella pagina master del sito Web, è necessario eseguire il cast dell'oggetto MasterPage restituito dalla Master proprietà al tipo appropriato. Poiché abbiamo denominato il file della nostra pagina master Site.master, la classe code-behind è stata denominata Site. Di conseguenza, il codice seguente esegue il cast della proprietà Page.Master in un'istanza della classe Site.

// Cast the loosely-typed Page.Master property and then set the GridMessageText property 
Site myMasterPage = Page.Master as Site;

Ora che è stato eseguito il cast della proprietà di tipo libero Page.Master al tipo Site, è possibile fare riferimento alle proprietà e ai metodi specifici del tipo Site. Come illustrato nella figura 7, la proprietà pubblica GridMessageText appare nell'elenco a discesa IntelliSense.

Figura 07: IntelliSense mostra le proprietà e i metodi pubblici della pagina master (fare clic per visualizzare l'immagine a dimensione intera)

Creazione di un riferimento fortemente tipizzato con la@MasterTypedirettiva

Se si osserva attentamente, si può vedere che la classe code-behind di una pagina ASP.NET è una classe parziale (nota la keyword partial nella definizione della classe). Le classi parziali sono state introdotte in C# e Visual Basic with.NET Framework 2.0 e, in poche parole, consentono di definire i membri di una classe in più file. Il file di classe code-behind, AddProduct.aspx.csad esempio , contiene il codice creato dallo sviluppatore di pagine. Oltre al codice, il motore di ASP.NET crea automaticamente un file di classe separato con proprietà e gestori eventi in che convertono il markup dichiarativo nella gerarchia di classi della pagina.

La generazione automatica di codice che si verifica ogni volta che viene visitata una pagina ASP.NET apre la strada per alcune possibilità piuttosto interessanti e utili. Nel caso delle pagine master, se si indica al motore di ASP.NET quale pagina master viene usata dalla pagina del contenuto, viene generata una proprietà fortemente tipizzata Master .

Usare la @MasterType direttiva per informare il motore ASP.NET del tipo di master page del contenuto. La @MasterType direttiva può accettare il nome del tipo della pagina master o il relativo percorso del file. Per specificare che la AddProduct.aspx pagina usa Site.master come pagina master, aggiungere la direttiva seguente all'inizio di AddProduct.aspx:

<%@ MasterType VirtualPath="~/Site.master" %>

Questa direttiva indica al motore di ASP.NET di aggiungere un riferimento fortemente tipizzato alla pagina master tramite una proprietà denominata Master. Con la direttiva @MasterType inserita, possiamo accedere direttamente alle proprietà pubbliche e ai metodi della pagina principale Site.master tramite la proprietà Master senza alcun cast.

Aggiornamento della pagina master dopo l'aggiunta di un nuovo prodotto

Ora che sappiamo come richiamare le proprietà e i metodi pubblici di una pagina master da una pagina del contenuto, siamo pronti per aggiornare la pagina in modo che la AddProduct.aspx pagina master venga aggiornata dopo l'aggiunta di un nuovo prodotto. All'inizio del passaggio 4 è stato creato un gestore eventi per l'evento del ItemInserting controllo DetailsView, che viene eseguito immediatamente dopo l'aggiunta del nuovo prodotto al database. Aggiungere il codice seguente al gestore eventi:

protected void NewProduct_ItemInserted(object sender, DetailsViewInsertedEventArgs e) 
{ 
    // Cast the loosely-typed Page.Master property and then set the GridMessageText property 
    Site myMasterPage = Page.Master as Site; 
    myMasterPage.GridMessageText = string.Format("{0} added to grid...", e.Values["ProductName"]); 
    // Use the strongly-typed Master property 
    Master.RefreshRecentProductsGrid();
}

Il codice precedente usa sia la proprietà di tipo Page.Master libero che la proprietà fortemente tipizzata Master . Si noti che la GridMessageText proprietà è impostata su "ProductName aggiunto alla griglia..." I valori del prodotto appena aggiunti sono accessibili tramite la e.Values raccolta. Come si può notare, il valore appena aggiunto ProductName è accessibile tramite e.Values["ProductName"].

La figura 8 mostra la AddProduct.aspx pagina subito dopo l'aggiunta di un nuovo prodotto Scott's Soda al database. Si noti che il nome del prodotto appena aggiunto è indicato nell'etichetta della pagina master e che GridView è stato aggiornato per includere il prodotto e il relativo prezzo.

Figura 08: Etichetta della pagina master e GridView Mostra il prodotto appena aggiunto (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

Idealmente, una pagina master e le relative pagine di contenuto sono completamente separate l'una dall'altra e non richiedono alcun livello di interazione. Anche se le pagine master e le pagine di contenuto devono essere progettate tenendo presente tale obiettivo, esistono diversi scenari comuni in cui una pagina di contenuto deve interfacciarsi con la relativa pagina master. Uno dei motivi più comuni è dovuto all'aggiornamento di una parte specifica della visualizzazione della pagina master in base a un'azione che si è verificata nella pagina di contenuto.

La buona notizia è che è relativamente semplice far interagire una pagina di contenuto tramite programmazione con la sua pagina master. Per iniziare, creare proprietà o metodi pubblici nella pagina master che incapsulano le funzionalità che devono essere richiamate da una pagina di contenuto. Quindi, nella pagina del contenuto, accedere alle proprietà e ai metodi della master page tramite la proprietà Page.Master di tipo libero o usare la direttiva @MasterType per creare un riferimento fortemente tipizzato alla master page.

Nell'esercitazione successiva si esaminerà come interagire a livello di codice con una delle pagine di contenuto della pagina master.

Buon programmatori!

Altre informazioni

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

• Accesso e aggiornamento dei dati in ASP.NET
• ASP.NET pagine master: suggerimenti, trucchi e trappole
• @MasterType in ASP.NET 2.0
• Passaggio di informazioni tra contenuto e pagine master
• Uso dei dati nelle esercitazioni di ASP.NET

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, formatore 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 speciale a

Questa serie di esercitazioni è stata esaminata da diversi revisori validi. Il revisore principale per questo tutorial era Zack Jones. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com