Profili, temi e web part

di Microsoft

Sono state apportate modifiche importanti alla configurazione e alla strumentazione in ASP.NET 2.0. La nuova API di configurazione ASP.NET consente di apportare modifiche alla configurazione a livello di codice. Inoltre, molte nuove impostazioni di configurazione consentono nuove configurazioni e strumentazione.

ASP.NET 2.0 rappresenta un notevole miglioramento nell'area dei siti Web personalizzati. Oltre alle funzionalità di appartenenza già trattate, ASP.NET profili, temi e web part migliorano significativamente la personalizzazione nei siti Web.

profili ASP.NET

I profili di ASP.NET sono simili alle sessioni. La differenza è che un profilo è persistente, mentre una sessione viene persa quando il browser viene chiuso. Un'altra grande differenza tra sessioni e profili consiste nel fatto che i profili sono fortemente tipizzati, fornendo quindi IntelliSense durante il processo di sviluppo.

Un profilo viene definito nel file di configurazione dei computer o nel file di web.config per l'applicazione. Non è possibile definire un profilo nel file web.config di una sottocartella. Il codice seguente definisce un profilo per archiviare il nome e il cognome dei visitatori del sito Web.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
    </properties>
</profile>

Il tipo di dati predefinito per una proprietà del profilo è System.String. Nell'esempio precedente non è stato specificato alcun tipo di dati. Pertanto, le proprietà FirstName e LastName sono entrambe di tipo String. Come accennato in precedenza, le proprietà del profilo sono fortemente tipizzate. Il codice seguente aggiunge una nuova proprietà per età di tipo Int32.

<profile>
    <properties>
        <add name="FirstName" />
        <add name="LastName" />
        <add name="Age" type="Int32"/>
    </properties>
</profile>

I profili vengono in genere usati con l'autenticazione basata su form di ASP.NET. Se usato in combinazione con l'autenticazione basata su form, ogni utente ha un profilo separato associato all'ID utente. Tuttavia, è anche possibile consentire l'uso di profili in un'applicazione anonima usando l'elemento <anonymousIdentification> nel file di configurazione insieme all'attributo allowAnonymous , come illustrato di seguito:

<anonymousIdentification enabled="true" />
<profile>
    <properties>
        <add name="FirstName" allowAnonymous="true" />
        <add name="LastName" allowAnonymous="true" />
    </properties>
</profile>

Quando un utente anonimo esplora il sito, ASP.NET crea un'istanza di ProfileCommon per l'utente. Questo profilo usa un ID univoco archiviato in un cookie nel browser per identificare l'utente come visitatore univoco. In questo modo, è possibile archiviare le informazioni sul profilo per gli utenti che esplorano in modo anonimo.

Gruppi di profili

È possibile raggruppare le proprietà dei profili. Raggruppando le proprietà, è possibile simulare più profili per un'applicazione specifica.

La configurazione seguente imposta le proprietà FirstName e LastName per due gruppi: Acquirenti e Potenziali.

<profile>
    <properties>
        <group name="Buyers">
            <add name="FirstName" />
            <add name="Lastname" />
            <add name="NumberOfPurchases" type="Int32" />
        </group>
        <group name="Prospects">
            <add name="FirstName" />
            <add name="Lastname" />
        </group>
    </properties>
</profile>

È quindi possibile impostare le proprietà in un determinato gruppo come indicato di seguito:

Profile.Buyers.NumberOfPurchases += 1;

Archiviazione di oggetti complessi

Finora, gli esempi trattati hanno archiviato tipi di dati semplici in un profilo. È anche possibile archiviare tipi di dati complessi in un profilo specificando il metodo di serializzazione usando l'attributo serializeAs come indicato di seguito:

<add name="PurchaseInvoice"
     type="PurchaseInvoice"
     serializeAs="Binary"
/>

In questo caso, il tipo è PurchaseInvoice. La classe PurchaseInvoice deve essere contrassegnata come serializzabile e può contenere un numero qualsiasi di proprietà. Ad esempio, se PurchaseInvoice ha una proprietà denominata NumItemsPurchased, è possibile fare riferimento a tale proprietà nel codice come indicato di seguito:

Profile.PurchaseInvoice.NumItemsPurchased

Ereditarietà del profilo

È possibile creare un profilo da usare in più applicazioni. Creando una classe di profilo che deriva da ProfileBase, è possibile riutilizzare un profilo in diverse applicazioni usando l'attributo eredita come illustrato di seguito:

<profile inherits="PurchasingProfile" />

In questo caso, la classe PurchasingProfile sarà simile alla seguente:

using System;
using System.Web.Profile;
public class PurchasingProfile : ProfileBase {
    private string _ProductName;
    private Int32 _ProductID;
    public string ProductName {
        get { return _ProductName; }
        set { _ProductName = value; }
    }
    public Int32 ProductID {
        get { return _ProductID; }
        set { _ProductID = value; }
    }
}

Provider di profili

I profili ASP.NET usano il modello di provider. Il provider predefinito archivia le informazioni in un database SQL Server Express nella cartella App_Data dell'applicazione Web usando il provider SqlProfileProvider. Se il database non esiste, ASP.NET lo creerà automaticamente quando il profilo tenta di archiviare le informazioni.

In alcuni casi, tuttavia, è possibile sviluppare un provider di profili personalizzato. La funzionalità del profilo ASP.NET consente di usare facilmente provider diversi.

Si crea un provider di profili personalizzato quando:

• È necessario archiviare le informazioni sul profilo in un'origine dati, ad esempio in un database FoxPro o in un database Oracle, non supportato dai provider di profili inclusi in .NET Framework.
• È necessario gestire le informazioni sul profilo usando uno schema di database diverso dallo schema del database usato dai provider inclusi in .NET Framework. Un esempio comune è che si vogliono integrare le informazioni sul profilo con i dati utente in un database di SQL Server esistente.

Classi obbligatorie

Per implementare un provider di profili, creare una classe che eredita la classe astratta System.Web.Profile.ProfileProvider. La classe astratta ProfileProvider eredita a sua volta la classe astratta System.Configuration.SettingsProvider, che eredita la classe astratta System.Configuration.Provider.ProviderBase. A causa di questa catena di ereditarietà, oltre ai membri necessari della classe ProfileProvider , è necessario implementare i membri necessari delle classi SettingsProvider e ProviderBase .

Le tabelle seguenti descrivono le proprietà e i metodi che è necessario implementare dalle classi astratte ProviderBase, SettingsProvider e ProfileProvider .

Membri ProviderBase

Membri di SettingsProvider

Membri di ProfileProvider

ApplicationName

Poiché i provider di profili archiviano le informazioni sul profilo separatamente per ogni applicazione, è necessario assicurarsi che lo schema dei dati includa il nome dell'applicazione e che le query e gli aggiornamenti includano anche il nome dell'applicazione. Ad esempio, il comando seguente viene usato per recuperare un valore di proprietà da un database in base al nome utente e se il profilo è anonimo e garantisce che il valore ApplicationName sia incluso nella query.

SELECT Property
FROM PropertyTable
WHERE Username = 'user1'
AND IsAnonymous = False
AND ApplicationName = 'MyApplication'

temi ASP.NET

Che cosa sono ASP.NET temi 2.0?

Uno degli aspetti più importanti di un'applicazione Web è un aspetto coerente nel sito. ASP.NET sviluppatori 1.x usano in genere fogli di stile CSS (Cascading Style Sheets) per implementare un aspetto coerente. ASP.NET temi 2.0 migliorano significativamente su CSS perché offrono allo sviluppatore ASP.NET la possibilità di definire l'aspetto dei controlli server ASP.NET e degli elementi HTML. ASP.NET temi possono essere applicati a singoli controlli, a una pagina Web specifica o a un'intera applicazione Web. I temi usano una combinazione di file CSS, un file di interfaccia utente facoltativo e una directory immagini facoltativa se sono necessarie immagini. Il file skin controlla l'aspetto visivo dei controlli server ASP.NET.

Dove vengono archiviati i temi?

Il percorso in cui vengono archiviati i temi varia in base al relativo ambito. I temi che possono essere applicati a qualsiasi applicazione vengono archiviati nella cartella seguente:

C:\WINDOWS\Microsoft.NET\Framework\v2.x.xxxxx\ASP.NETClientFiles\Themes\<Theme_Name>

Un tema specifico di una determinata applicazione viene archiviato in una App\_Themes\<Theme\_Name> directory nella radice del sito Web.

Un tema globale è un tema che può essere applicato a qualsiasi applicazione o sito Web in esecuzione nel server Web. Questi temi vengono archiviati per impostazione predefinita nella directory ASP.NETClientfiles\Themes che si trova all'interno della directory v2.x.xxxxx. In alternativa, è possibile spostare i file di tema nella cartella aspnet_client/system_web/[version]/Themes/[theme_name] nella radice del sito Web.

I temi specifici dell'applicazione possono essere applicati solo all'applicazione in cui risiedono i file. Questi file vengono archiviati nella App\_Themes/<theme\_name> directory nella radice del sito Web.

Componenti di un tema

Un tema è costituito da uno o più file CSS, da un file skin facoltativo e da una cartella immagini facoltativa. I file CSS possono essere qualsiasi nome desiderato (ad esempio default.css o theme.css e così via) e devono trovarsi nella radice della cartella dei temi. I file CSS vengono usati per definire classi e attributi CSS ordinari per selettori specifici. Per applicare una delle classi CSS a un elemento di pagina, viene utilizzata la proprietà CSSClass .

Il file skin è un file XML che contiene definizioni di proprietà per i controlli server ASP.NET. Il codice riportato di seguito è un file di interfaccia di esempio.

<asp:TextBox runat="server"
    BackColor="#FFC080"
    BorderColor="Black"
    BorderStyle="Solid"
    BorderWidth="1px"
    Font-Names="Tahoma, Verdana, Arial"
    Font-Size="Smaller" />

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0" />

La figura 1 seguente mostra una piccola pagina ASP.NET sfogliata senza un tema applicato. La figura 2 mostra lo stesso file con un tema applicato. Il colore di sfondo e il colore del testo vengono configurati tramite un file CSS. L'aspetto del pulsante e della casella di testo vengono configurati usando il file skin elencato sopra.

Figura 1: Nessun tema

Figura 2: Tema applicato

Il file skin elencato sopra definisce un'interfaccia predefinita per tutti i controlli TextBox e Button. Ciò significa che ogni controllo TextBox e il controllo Button inseriti in una pagina assumeranno questo aspetto. È anche possibile definire un'interfaccia che può essere applicata a istanze specifiche di questi controlli usando la proprietà SkinID del controllo.

Il codice seguente definisce una skin per un controllo pulsante. Solo i controlli Button con una proprietà SkinID di goButton assumeranno l'aspetto del tema.

<asp:Button runat="server"
    BackColor="#C04000"
    BorderColor="Maroon"
    BorderStyle="Solid"
    BorderWidth="2px"
    Font-Names="Tahoma,Verdana,Arial"
    Font-Size="Smaller"
    ForeColor="#FFFFC0"
    Text=go
    SkinID=goButton
    Width="95px" />

È possibile avere una sola interfaccia predefinita per ogni tipo di controllo server. Se hai bisogno di interfacce aggiuntive, devi usare la proprietà SkinID.

Applicazione di temi alle pagine

È possibile applicare un tema usando uno dei metodi seguenti:

• Nell'elemento <pages> del file web.config
• Nella direttiva di una pagina @Page
• A livello di codice

Applicazione di un tema nel file di configurazione

Per applicare un tema nel file di configurazione delle applicazioni, usare la sintassi seguente:

<system.web>
    <pages theme="CoolTheme" />
    ...
</system.web>

Il nome del tema specificato qui deve corrispondere al nome della cartella temi. Questa cartella può esistere in uno qualsiasi dei percorsi indicati in precedenza in questo corso. Se si tenta di applicare un tema che non esiste, si verificherà un errore di configurazione.

Applicazione di un tema nella direttiva Page

È anche possibile applicare un tema nella direttiva @ Page. Questo metodo consente di usare un tema per una pagina specifica.

Per applicare un tema nella @Page direttiva, usare la sintassi seguente:

<%@ Page Language="C#" Theme=CoolTheme CodeFile="Default.aspx.cs" ... %>

Ancora una volta, il tema specificato qui deve corrispondere alla cartella del tema come indicato in precedenza. Se si tenta di applicare un tema che non esiste, si verificherà un errore di compilazione. Visual Studio evidenzia anche l'attributo e informa che non esiste alcun tema di questo tipo.

Applicazione di un tema a livello di codice

Per applicare un tema a livello di codice, è necessario specificare la proprietà Theme per la pagina nel metodo Page_PreInit .

Per applicare un tema a livello di codice, usare la sintassi seguente:

Page.Theme = CoolTheme;

È necessario applicare il tema nel metodo PreInit a causa del ciclo di vita della pagina. Se viene applicato dopo quel momento, il tema delle pagine sarà già stato applicato dal runtime e apportare una modifica a quel punto è troppo tardi nel ciclo di vita. Se si applica un tema che non esiste, si verifica un'eccezione HttpException . Quando un tema viene applicato a livello di codice, si verificherà un avviso di compilazione se per qualsiasi controllo server è specificata una proprietà SkinID. Questo avviso indica che nessun tema viene applicato in modo dichiarativo e può essere ignorato.

Esercizio 1: Applicazione di un tema

In questo esercizio si applicherà un tema ASP.NET a un sito Web.

1. Creare un nuovo sito Web ASP.NET.

2. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi nuovo elemento.

3. Scegliere File di configurazione Web dall'elenco dei file e fare clic su Aggiungi.

4. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi nuovo elemento.

5. Scegliere File skin e fare clic su Aggiungi.

6. Fare clic su Sì quando viene chiesto se si desidera inserire il file all'interno della cartella App_Themes.

7. Fare clic con il pulsante destro del mouse sulla cartella SkinFile all'interno della cartella App_Themes in Esplora soluzioni e scegliere Aggiungi nuovo elemento.

8. Scegliere Foglio di stile dall'elenco dei file e fare clic su Aggiungi. Tutti i file necessari per implementare il nuovo tema sono ora disponibili. Tuttavia, Visual Studio ha denominato la cartella dei temi SkinFile. Fare clic con il pulsante destro del mouse su tale cartella e modificare il nome in CoolTheme.

9. Aprire il file SkinFile.skin e aggiungere il codice seguente alla fine del file:

   <asp:TextBox runat="server"
       BackColor="#FFC080"
       BorderColor="Black"
       BorderStyle="Solid"
       BorderWidth="1px"
       Font-Names="Tahoma, Verdana, Arial"
       Font-Size="Smaller"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
   />
   
   <asp:Button runat="server"
       BackColor="#C04000"
       BorderColor="Maroon"
       BorderStyle="Solid"
       BorderWidth="2px"
       Font-Names="Tahoma,Verdana,Arial"
       Font-Size="Smaller"
       ForeColor="#FFFFC0"
       Text="go"
       SkinID="goButton"
       Width="95px"
   />
   

10. Salvare il file SkinFile.skin.

11. Aprire il StyleSheet.css.

12. Sostituire tutto il testo in esso contenuto con quanto segue:

    body {
        background-color: #FFDEAD;
    }
    

13. Salvare il file StyleSheet.css.

14. Aprire la pagina Default.aspx.

15. Aggiungere un controllo TextBox e un controllo Button.

16. Salva la pagina. Passare ora alla pagina Default.aspx. Dovrebbe essere visualizzato come un normale form Web.

17. Aprire il file Web. config.

18. Aggiungere il codice seguente direttamente sotto il tag di apertura <system.web> :

    <pages theme="CoolTheme" />
    

19. Salvare il file Web.config. Passare ora alla pagina Default.aspx. Dovrebbe essere visualizzato con il tema applicato.

20. Se non è già aperto, aprire la pagina Default.aspx in Visual Studio.

21. Selezionare il pulsante.

22. Modificare la proprietà SkinID in goButton. Si noti che Visual Studio fornisce un elenco a discesa con valori SkinID validi per un controllo Button.

23. Salva la pagina. Visualizzare nuovamente in anteprima la pagina nel browser. Il pulsante dovrebbe ora mostrare "vai" e apparire più ampio.

Usando la proprietà SkinID , è possibile configurare facilmente interfacce diverse per istanze diverse di un particolare tipo di controllo server.

La proprietà StyleSheetTheme

Finora abbiamo parlato solo dell'applicazione dei temi usando la proprietà Theme. Quando si usa la proprietà Theme, il file skin sovrascriverà tutte le impostazioni dichiarative per i controlli del server. Nell'esercizio 1, ad esempio, è stato specificato un SkinID "goButton" per il controllo Button e che ha modificato il testo del pulsante in "go". È possibile che tu abbia notato che la proprietà Text del pulsante nella finestra di progettazione è stata impostata su "Button", ma il tema ha sovrascritto tale impostazione. Il tema eseguirà sempre l'override di tutte le impostazioni delle proprietà nel designer.

Se vuoi essere in grado di eseguire l'override delle proprietà definite nel file di interfaccia del tema con le proprietà specificate nella finestra di progettazione, puoi utilizzare la proprietà StyleSheetTheme anziché la proprietà Theme. La proprietà StyleSheetTheme corrisponde alla proprietà Theme, ad eccezione del fatto che non esegue l'override di tutte le impostazioni di proprietà esplicite come la proprietà Theme.

Per visualizzare questa operazione in azione, aprire il file web.config dal progetto nell'esercizio 1 e modificare l'elemento <pages> nel modo seguente:

<pages styleSheetTheme="CoolTheme" />

A questo punto, visualizza la pagina Default.aspx e vedrai che il controllo Button ha di nuovo una proprietà Text impostata su "Button". Questo perché l'impostazione esplicita della proprietà nella finestra di progettazione esegue l'override della proprietà Text impostata dallo SkinID di goButton.

Temi predominanti

È possibile eseguire l'override di un tema globale applicando un tema con lo stesso nome nella cartella App_Themes dell'applicazione. Tuttavia, il tema non viene applicato in uno scenario di override reale. Se il runtime rileva i file di tema nella cartella App_Themes, applicherà il tema usando tali file e ignorerà il tema globale.

La proprietà StyleSheetTheme è sottoponibile a override e può essere sottoposta a override nel codice come indicato di seguito:

const String THEME_NAME = "CoolTheme";
public override string StyleSheetTheme {
    get { return THEME_NAME; }
    set { Page.StyleSheetTheme = THEME_NAME; }
}

Web Parts

ASP.NET web part è un set integrato di controlli per la creazione di siti Web che consentono agli utenti finali di modificare il contenuto, l'aspetto e il comportamento delle pagine Web direttamente da un browser. Le modifiche possono essere applicate a tutti gli utenti del sito o a singoli utenti. Quando gli utenti modificano pagine e controlli, le impostazioni possono essere salvate per mantenere le preferenze personali di un utente nelle sessioni future del browser, una funzionalità denominata personalizzazione. Queste funzionalità web part indicano che gli sviluppatori possono consentire agli utenti finali di personalizzare un'applicazione Web in modo dinamico, senza l'intervento dello sviluppatore o dell'amministratore.

Usando il set di controlli Web part, lo sviluppatore può consentire agli utenti finali di:

• Personalizzare il contenuto della pagina. Gli utenti possono aggiungere nuovi controlli Web Parts a una pagina, rimuoverli, nasconderli o ridurli a icona come finestre normali.
• Personalizzare il layout di pagina. Gli utenti possono trascinare un controllo Web part in un'area diversa in una pagina oppure modificarne l'aspetto, le proprietà e il comportamento.
• Controlli sulle esportazioni e importazioni Gli utenti possono importare o esportare impostazioni di controllo web part da utilizzare in altre pagine o siti, mantenendo le proprietà, l'aspetto e persino i dati nei controlli. In questo modo si riducono le richieste di immissione e configurazione dei dati per gli utenti finali.
• Creare connessioni. Gli utenti possono stabilire connessioni tra i controlli in modo che, ad esempio, un controllo grafico possa visualizzare un grafico per i dati in un controllo ticker azionario. Gli utenti possono personalizzare non solo la connessione stessa, ma l'aspetto e i dettagli del modo in cui il controllo grafico visualizza i dati.
• Gestire e personalizzare le impostazioni a livello di sito. Gli utenti autorizzati possono configurare le impostazioni a livello di sito, determinare chi può accedere a un sito o una pagina, impostare l'accesso in base al ruolo ai controlli e così via. Ad esempio, un utente in un ruolo amministrativo potrebbe impostare un controllo Web part da condividere da tutti gli utenti e impedire agli utenti che non sono amministratori di personalizzare il controllo condiviso.

In genere si useranno web part in uno dei tre modi seguenti: la creazione di pagine che usano controlli Web part, la creazione di singoli controlli Web part o la creazione di applicazioni Web complete e personalizzabili, ad esempio un portale.

Sviluppo di pagine

Gli sviluppatori di pagine possono usare strumenti di progettazione visiva come Microsoft Visual Studio 2005 per creare pagine che usano web part. Un vantaggio nell'uso di uno strumento come Visual Studio è che il set di controlli Web Parts offre funzionalità per la creazione tramite trascinamento e la configurazione dei controlli Web Parts in un progettista visivo. Ad esempio, è possibile utilizzare la finestra di progettazione per trascinare una zona web part o un controllo editor web part nell'area di progettazione e quindi configurare il controllo direttamente nella finestra di progettazione usando l'interfaccia utente fornita dal set di controlli Web part. Ciò consente di velocizzare lo sviluppo di applicazioni Web part e ridurre la quantità di codice che è necessario scrivere.

Sviluppo di controlli

È possibile utilizzare qualsiasi controllo ASP.NET esistente come controllo Web part, inclusi controlli server Web standard, controlli server personalizzati e controlli utente. Per il controllo massimo a livello di codice dell'ambiente, è anche possibile creare controlli Web part personalizzati che derivano dalla classe WebPart. Per lo sviluppo di singoli controlli web part, in genere si creerà un controllo utente e lo si userà come controllo Web part o si svilupperà un controllo web part personalizzato.

Come esempio di sviluppo di un controllo web part personalizzato, è possibile creare un controllo per fornire qualsiasi funzionalità fornita da altri controlli server ASP.NET che potrebbero essere utili per creare un pacchetto come controllo web part personalizzabile: calendari, elenchi, informazioni finanziarie, notizie, calcolatrici, controlli RTF per l'aggiornamento del contenuto, griglie modificabili che si connettono ai database, grafici che aggiornano dinamicamente i loro display, o meteo e informazioni di viaggio. Se si fornisce una finestra di progettazione visiva con il controllo , qualsiasi sviluppatore di pagine che usa Visual Studio può semplicemente trascinare il controllo in un'area web part e configurarlo in fase di progettazione senza dover scrivere codice aggiuntivo.

La personalizzazione è la base della funzionalità Web part. Consente agli utenti di modificare o personalizzare il layout, l'aspetto e il comportamento dei controlli Web part in una pagina. Le impostazioni personalizzate sono di lunga durata: vengono mantenute non solo durante la sessione del browser corrente (come con lo stato di visualizzazione), ma anche nell'archiviazione a lungo termine, in modo che le impostazioni di un utente vengano salvate anche per le sessioni future del browser. La personalizzazione è abilitata per impostazione predefinita per le pagine Web Part.

I componenti strutturali dell'interfaccia utente si basano sulla personalizzazione e forniscono la struttura di base e i servizi necessari per tutti i controlli web part. Un componente strutturale dell'interfaccia utente necessario in ogni pagina Web Parts è il controllo WebPartManager. Anche se non è mai visibile, questo controllo ha l'attività fondamentale di coordinare tutti i controlli Web part in una pagina. Ad esempio, tiene traccia di tutti i singoli controlli Web part. Gestisce le zone web part (aree che contengono controlli Web part in una pagina) e quali controlli si trovano in quali zone. Tiene inoltre traccia e controlla le diverse modalità di visualizzazione in cui una pagina può trovarsi, ad esempio sfoglia, connetti, modifica o modalità catalogo e se le modifiche alla personalizzazione si applicano a tutti gli utenti o ai singoli utenti. Infine, avvia e tiene traccia delle connessioni e della comunicazione tra i controlli Web part.

Il secondo tipo di componente strutturale dell'interfaccia utente è la zona. Le zone fungono da gestori del layout in una pagina di Web Parts. Contengono e organizzano i controlli che derivano dalla classe Part (controlli parte) e offrono la possibilità di eseguire layout di pagina modulari in orientamento orizzontale o verticale. Le zone offrono anche elementi comuni e coerenti dell'interfaccia utente (ad esempio lo stile dell'intestazione e del piè di pagina, il titolo, lo stile del bordo, i pulsanti di azione e così via) per ogni controllo che contengono; questi elementi comuni sono noti come il riquadro di un controllo. Diversi tipi specializzati di zone vengono usati nelle diverse modalità di visualizzazione e con vari controlli. I diversi tipi di zone sono descritti nella sezione Web part Essential Controls riportata di seguito.

I controlli dell'interfaccia utente delle web part, tutti derivati dalla classe Part , costituiscono l'interfaccia utente primaria in una pagina web part. Il set di controlli Web Parts è flessibile e inclusivo nelle opzioni che offre per la creazione di controlli dei componenti. Oltre a creare controlli web part personalizzati, è anche possibile utilizzare controlli server ASP.NET esistenti, controlli utente o controlli server personalizzati come controlli Web part. I controlli essenziali usati più comunemente per la creazione di pagine web part sono descritti nella sezione successiva.

Controlli essenziali delle Web Parts

Il set di controlli Web part è esteso, ma alcuni controlli sono essenziali perché sono necessari per il funzionamento delle web part o perché sono i controlli usati più di frequente nelle pagine web part. Quando si inizia a usare web part e si creano pagine web part di base, è utile acquisire familiarità con i controlli web part essenziali descritti nella tabella seguente.

Lab: Creare una pagina Web Part

In questo lab si creerà una pagina web part che consentirà di rendere persistenti le informazioni tramite profili di ASP.NET.

Creazione di una pagina semplice con Web part

In questa parte della procedura dettagliata viene creata una pagina che usa controlli Web part per visualizzare il contenuto statico. Il primo passaggio dell'uso delle web part consiste nel creare una pagina con due elementi strutturali necessari. Prima di tutto, una pagina web part richiede un controllo WebPartManager per tenere traccia e coordinare tutti i controlli Web part. In secondo luogo, una pagina web part richiede una o più zone, ovvero controlli compositi che contengono WebPart o altri controlli server e occupano un'area specificata di una pagina.

Per creare una pagina per contenere i controlli Web part

1. Chiudere la pagina predefinita e aggiungere una nuova pagina al sito denominato WebPartsDemo.aspx.

2. Passare alla visualizzazione Struttura.

3. Dal menu Visualizza verificare che le opzioni Controlli non visivi e Dettagli siano selezionate in modo da visualizzare tag e controlli di layout che non dispongono di un'interfaccia utente.

4. Posizionare il punto di inserimento prima dei <div> tag nell'area di progettazione e premere INVIO per aggiungere una nuova riga. Posizionare il punto di inserimento prima del nuovo carattere di riga, fare clic sul controllo elenco a discesa Formato blocco nel menu e selezionare l'opzione Titolo 1 . Aggiungere nell'intestazione il testo Pagina dimostrativa delle Web Part.

5. Dalla scheda WebParts della Casella degli strumenti, trascina un controllo WebPartManager sulla pagina, posizionandolo subito dopo il nuovo carattere di riga e prima del tag <div>.

   Il controllo WebPartManager non esegue il rendering di alcun output, quindi viene visualizzato come una casella grigia nell'area di progettazione.

6. Posizionare il punto di inserimento all'interno dei <div> tag.

7. Nel menu Layout fare clic su Inserisci tabella e creare una nuova tabella con una riga e tre colonne. Fare clic sul pulsante Proprietà cella , selezionare in alto nell'elenco a discesa Allineamento verticale , fare clic su OK e fare di nuovo clic su OK per creare la tabella.

8. Trascinare il controllo WebPartZone nella colonna di sinistra della tabella. Fare clic con il pulsante destro del mouse sul controllo WebPartZone , scegliere Proprietà e impostare le proprietà seguenti:

   ID: SidebarZone

   HeaderText: barra laterale

9. Trascinare un secondo controllo WebPartZone nella colonna della tabella centrale e impostare le proprietà seguenti:

   ID: MainZone

   HeaderText: Principale

10. Salva il file.

La pagina include ora due zone distinte che è possibile controllare separatamente. Tuttavia, nessuna delle zone include contenuto, quindi la creazione di contenuto è il passaggio successivo. Per questa guida passo passo, si lavora con i controlli Web Parts che visualizzano solo contenuto statico.

Il layout di una zona Web Parts viene specificato da un <elemento zonetemplate>. All'interno del modello di zona è possibile aggiungere qualsiasi controllo ASP.NET, indipendentemente dal fatto che si tratti di un controllo Web part personalizzato, di un controllo utente o di un controllo server esistente. Si noti che qui si usa il controllo Etichetta e a questo si aggiunge semplicemente testo statico. Quando si inserisce un normale controllo server in un'area WebPartZone , ASP.NET considera il controllo come controllo Web part in fase di esecuzione, che abilita le funzionalità web part nel controllo.

Per creare contenuto per la zona principale

1. Nella visualizzazione Struttura, trascinare un controllo Etichetta dalla scheda Standard della Casella degli strumenti nell'area dei contenuti della zona di cui la proprietà ID è impostata su MainZone.

2. Passare alla visualizzazione Origine . Si noti che è stato aggiunto un <elemento zonetemplate> per avvolgere il controllo Label in MainZone.

3. Aggiungere un attributo denominato title all'elemento <asp:label> e impostarne il valore su Content. Rimuovere l'attributo Text="Label" dall'elemento <asp:label> . Tra i tag di apertura e chiusura dell'elemento <asp:label> , aggiungere testo come Welcome to my Home Page all'interno di una coppia di tag di <elemento h2> . Il codice dovrebbe essere simile al seguente.

   <asp:webpartzone id="MainZone" runat="server" headertext="Main">
       <zonetemplate>
           <asp:label id="Label1" runat="server" title="Content">
               <h2>Welcome to My Home Page</h2>
           </asp:label>
       </zonetemplate>
   </asp:webpartzone>
   

4. Salva il file.

Creare quindi un controllo utente che può essere aggiunto alla pagina anche come controllo Web Parts.

Per creare un controllo utente

1. Aggiungere un nuovo controllo utente Web al sito per fungere da controllo di ricerca. Deselezionare l'opzione Inserire il codice sorgente in un file separato. Aggiungerlo nella stessa directory della pagina WebPartsDemo.aspx e denominarlo SearchUserControl.ascx.

   Annotazioni

   Il controllo utente per questa procedura dettagliata non implementa le funzionalità di ricerca effettive; viene usato solo per illustrare le funzionalità delle Web Parts.

2. Passare alla visualizzazione Struttura. Dalla scheda Standard della casella degli strumenti trascinare un controllo TextBox nella pagina.

3. Posizionare il punto di inserimento dopo la casella di testo appena aggiunta e premere INVIO per aggiungere una nuova riga.

4. Trascina un controllo pulsante nella nuova riga sotto la casella di testo che hai appena aggiunto nella pagina.

5. Passare alla visualizzazione Origine . Verificare che il codice sorgente per il controllo utente sia simile all'esempio seguente.

   <%@ control language="C#"
       classname="SearchUserControl" %>
   <asp:textbox runat="server"
     id=" TextBox1"></asp:textbox>
   <br />
   <asp:button runat="server"
     id=" Button1" text="Search" />
   

6. Salva e chiudi il file.

È ora possibile aggiungere controlli Web part all'area Barra laterale. Si aggiungono due controlli all'area Barra laterale, una contenente un elenco di collegamenti e un'altra che è il controllo utente creato nella procedura precedente. I collegamenti vengono aggiunti come controllo server Etichetta standard, in modo simile a come è stato creato il testo statico per la zona Main. Tuttavia, anche se i singoli controlli server contenuti nel controllo utente potrebbero essere contenuti direttamente nella zona (ad esempio il controllo etichetta), in questo caso non lo sono. Fanno invece parte del controllo utente creato nella procedura precedente. In questo modo viene illustrato un modo comune per creare un pacchetto dei controlli e delle funzionalità aggiuntive desiderate in un controllo utente e quindi fare riferimento a tale controllo in una zona come controllo Web part.

In fase di esecuzione, il set di controlli Web Parts avvolge entrambi i controlli con controlli GenericWebPart. Quando un controllo GenericWebPart esegue il wrapping di un controllo server Web, il controllo della parte generico è il controllo padre ed è possibile accedere al controllo server tramite la proprietà ChildControl del controllo padre. Questo uso di controlli di parti generici consente ai controlli server Web standard di avere lo stesso comportamento di base e gli attributi dei controlli Web part che derivano dalla classe WebPart .

Per aggiungere controlli Web part all'area della barra laterale

1. Aprire la pagina WebPartsDemo.aspx.

2. Passare alla visualizzazione Struttura.

3. Trascinare la pagina di controllo utente creata, SearchUserControl.ascx, da Esplora soluzioni nella zona la cui proprietà ID è impostata su SidebarZone e rilasciarla lì.

4. Salvare la pagina WebPartsDemo.aspx.

5. Passare alla visualizzazione Origine .

6. All'interno dell'elemento <asp:webpartzone> per SidebarZone, appena sopra il riferimento al controllo utente, aggiungere un <elemento asp:label> con collegamenti contenuti, come illustrato nell'esempio seguente. Aggiungere anche un attributo Title al tag di controllo utente, con il valore Search, come illustrato.

   <asp:WebPartZone id="SidebarZone" runat="server"
                    headertext="Sidebar">
       <zonetemplate>
           <asp:label runat="server" id="linksPart" title="My Links">
               <a href="http://www.asp.net">ASP.NET site</a>
               <br />
               <a href="http://www.gotdotnet.com">GotDotNet</a>
               <br />
               <a href="http://www.contoso.com">Contoso.com</a>
               <br />
           </asp:label>
           <uc1:SearchUserControl id="searchPart"
             runat="server" title="Search" />
       </zonetemplate>
   </asp:WebPartZone>
   

7. Salva e chiudi il file.

È ora possibile testare la pagina selezionandola nel browser. Nella pagina vengono visualizzate le due zone. La schermata seguente mostra la pagina.

Pagina demo di Web Parts con due zone

Figura 3: Screenshot di Web Parts VS Walkthrough 1

Nella barra del titolo di ogni controllo è presente una freccia verso il basso che consente di accedere a un menu verbi delle azioni disponibili che è possibile eseguire su un controllo. Fare clic sul menu dei verbi per uno dei controlli, quindi fare clic sul verbo Riduci a icona e osservare che il controllo viene ridotto a icona. Dal menu dei verbi fare clic su Ripristina e il controllo torna alle dimensioni normali.

Consentire agli utenti di modificare le pagine e modificare il layout

Web part offre agli utenti la possibilità di modificare il layout dei controlli Web part trascinandoli da una zona a un'altra. Oltre a consentire agli utenti di spostare i controlli WebPart da un'area a un'altra, è possibile consentire agli utenti di modificare varie caratteristiche dei controlli, tra cui aspetto, layout e comportamento. Il set di controlli Web part fornisce funzionalità di modifica di base per i controlli WebPart . Anche se in questa procedura dettagliata non lo farai, è comunque possibile creare editor personalizzati di controlli che consentono agli utenti di personalizzare le proprietà dei controlli WebPart. Come per modificare la posizione di un controllo WebPart , la modifica delle proprietà di un controllo si basa su ASP.NET personalizzazione per salvare le modifiche apportate dagli utenti.

In questa parte della procedura dettagliata si aggiunge la possibilità agli utenti di modificare le caratteristiche di base di qualsiasi controllo WebPart nella pagina. Per abilitare queste funzionalità, aggiungere un altro controllo utente personalizzato alla pagina, insieme a un <elemento asp:editorzone> e a due controlli di modifica.

Per creare un controllo utente che consente di modificare il layout di pagina

1. In Visual Studio scegliere il sottomenu Nuovo dal menu File e fare clic sull'opzione File.

2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare Controllo utente Web. Assegnare al nuovo file il nome DisplayModeMenu.ascx. Deselezionare l'opzione Inserire il codice sorgente in un file separato.

3. Fare clic su Aggiungi per creare il nuovo controllo.

4. Passare alla visualizzazione Origine .

5. Rimuovere tutto il codice esistente nel nuovo file e incollarlo nel codice seguente. Questo codice di controllo utente usa funzionalità del set di controlli Web part che consentono a una pagina di modificarne la visualizzazione o la modalità di visualizzazione e consente inoltre di modificare l'aspetto fisico e il layout della pagina mentre si sono in determinate modalità di visualizzazione.

   <%@ Control Language="C#" ClassName="DisplayModeMenuCS" %>
   
   <script runat="server">
   
       // Use a field to reference the current WebPartManager control.
       WebPartManager _manager;
       void Page_Init(object sender, EventArgs e) {
           Page.InitComplete += new EventHandler(InitComplete);
       }
       void InitComplete(object sender, System.EventArgs e) {
           _manager = WebPartManager.GetCurrentWebPartManager(Page);
           String browseModeName = WebPartManager.BrowseDisplayMode.Name;
           // Fill the drop-down list with the names of supported display modes.
           foreach (WebPartDisplayMode mode in
           _manager.SupportedDisplayModes) {
               String modeName = mode.Name;
               // Make sure a mode is enabled before adding it.
               if (mode.IsEnabled(_manager)) {
                   ListItem item = new ListItem(modeName, modeName);
                   DisplayModeDropdown.Items.Add(item);
               }
           }
           // If Shared scope is allowed for this user, display the
           // scope-switching UI and select the appropriate radio
           // button for the current user scope.
           if (_manager.Personalization.CanEnterSharedScope) {
               Panel2.Visible = true;
               if (_manager.Personalization.Scope ==
               PersonalizationScope.User)
                   RadioButton1.Checked = true;
               else
                   RadioButton2.Checked = true;
           }
       }
   
       // Change the page to the selected display mode.
       void DisplayModeDropdown_SelectedIndexChanged(object sender,
           EventArgs e) {
           String selectedMode = DisplayModeDropdown.SelectedValue;
           WebPartDisplayMode mode =
               _manager.SupportedDisplayModes[selectedMode];
           if (mode != null)
               _manager.DisplayMode = mode;
       }
       // Set the selected item equal to the current display mode.
       void Page_PreRender(object sender, EventArgs e) {
           ListItemCollection items = DisplayModeDropdown.Items;
           int selectedIndex =
           items.IndexOf(items.FindByText(_manager.DisplayMode.Name));
           DisplayModeDropdown.SelectedIndex = selectedIndex;
       }
       // Reset all of a user's personalization data for the page.
       protected void LinkButton1_Click(object sender, EventArgs e) {
           _manager.Personalization.ResetPersonalizationState();
       }
       // If not in User personalization scope, toggle into it.
       protected void RadioButton1_CheckedChanged(object sender, EventArgs e) {
           if (_manager.Personalization.Scope == PersonalizationScope.Shared)
               _manager.Personalization.ToggleScope();
       }
   
       // If not in Shared scope, and if user has permission, toggle
       // the scope.
       protected void RadioButton2_CheckedChanged(object sender,
       EventArgs e) {
           if (_manager.Personalization.CanEnterSharedScope &&
               _manager.Personalization.Scope == PersonalizationScope.User)
               _manager.Personalization.ToggleScope();
       }
   </script>
   
   <div>
       <asp:Panel ID="Panel1" runat="server"
         BorderWidth="1" Width="230" BackColor="lightgray"
           Font-Names="Verdana, Arial, Sans Serif">
           <asp:Label ID="Label1" runat="server"
             Text=" Display Mode" Font-Bold="true"
               Font-Size="8" Width="120" />
           <asp:DropDownList ID="DisplayModeDropdown"
             runat="server" AutoPostBack="true" Width="120"
               OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" />
           <asp:LinkButton ID="LinkButton1" runat="server"
                Text="Reset User State"
                ToolTip="Reset the current user's personalization data for the page."
                Font-Size="8" OnClick="LinkButton1_Click" />
           <asp:Panel ID="Panel2" runat="server"
               GroupingText="Personalization Scope" Font-Bold="true"
               Font-Size="8" Visible="false">
               <asp:RadioButton ID="RadioButton1" runat="server"
                   Text="User" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton1_CheckedChanged" />
               <asp:RadioButton ID="RadioButton2" runat="server"
                   Text="Shared" AutoPostBack="true"
                   GroupName="Scope"
                   OnCheckedChanged="RadioButton2_CheckedChanged" />
           </asp:Panel>
       </asp:Panel>
   </div>
   

6. Salvare il file facendo clic sull'icona Salva sulla barra degli strumenti oppure scegliendo Salva dal menu File .

Per consentire agli utenti di modificare il layout

1. Aprire la pagina WebPartsDemo.aspx e passare alla visualizzazione Progettazione.

2. Posizionare il punto di inserimento nella visualizzazione Progettazione subito dopo il controllo WebPartManager aggiunto in precedenza. Aggiungere una restituzione hard dopo il testo in modo che sia presente una riga vuota dopo il controllo WebPartManager . Posizionare il punto di inserimento sulla riga vuota.

3. Trascinare il controllo utente appena creato (il file è denominato DisplayModeMenu.ascx) nella pagina WebPartsDemo.aspx e rilasciarlo nella riga vuota.

4. Trascinare un controllo EditorZone dalla sezione WebParts della casella degli strumenti alla cella della tabella aperta rimanente nella pagina WebPartsDemo.aspx.

5. Dalla sezione WebParts della Casella degli strumenti trascinare un controllo AppearanceEditorPart e un controllo LayoutEditorPart nel controllo EditorZone .

6. Passare alla visualizzazione Origine . Il codice risultante nella cella della tabella dovrebbe essere simile al codice seguente.

   <td valign="top">
       <asp:EditorZone ID="EditorZone1" runat="server">
           <ZoneTemplate>
               <asp:AppearanceEditorPart ID="AppearanceEditorPart1"
                 runat="server" />
               <asp:LayoutEditorPart ID="LayoutEditorPart1"
                 runat="server" />
           </ZoneTemplate>
       </asp:EditorZone>
   </td>
   

7. Salvare il file WebPartsDemo.aspx. È stato creato un controllo utente che consente di modificare le modalità di visualizzazione e modificare il layout di pagina e di aver fatto riferimento al controllo nella pagina Web primaria.

È ora possibile testare la funzionalità per modificare le pagine e modificare il layout.

Per testare le modifiche del layout

1. Caricare la pagina in un browser.
2. Fare clic sul menu a discesa Modalità di visualizzazione e selezionare Modifica. Vengono visualizzati i titoli delle zone.
3. Trascina il controllo My Links dalla barra del titolo dalla zona Sidebar alla parte inferiore della zona Principale. La pagina dovrebbe essere simile alla schermata seguente.

Pagina demo Web Part con il controllo Mio collegamenti spostato

Figura 4: Screenshot della procedura dettagliata 2 di Visual Studio Web Parts

1. Fare clic sul menu a discesa Modalità di visualizzazione e selezionare Sfoglia. La pagina viene aggiornata, i nomi delle zone scompaiono e il controllo Collegamenti personali rimane nella posizione in cui è stata posizionata.

2. Per dimostrare che la personalizzazione funziona, chiudere il browser e quindi caricare di nuovo la pagina. Le modifiche apportate vengono salvate per le sessioni future del browser.

3. Scegliere Modifica dal menu Modalità di visualizzazione.

   Ogni controllo della pagina viene ora visualizzato con una freccia verso il basso nella relativa barra del titolo, che contiene il menu a discesa dei verbi.

4. Fare clic sulla freccia per visualizzare il menu dei verbi nel controllo Collegamenti personali . Fare clic sul verbo Modifica .

   Viene visualizzato il controllo EditorZone che visualizza i controlli EditorPart aggiunti.

5. Nella sezione Aspetto del controllo di modifica impostare Titolo su Preferiti, usare l'elenco a discesa Tipo di Chrome per selezionare Solo titolo e quindi fare clic su Applica. La schermata seguente mostra la pagina in modalità di modifica.

Pagina Demo Web Parts in modalità di modifica

Figura 5: Screenshot di Web Parts VS Walkthrough 3

1. Fare clic sul menu Modalità di visualizzazione e selezionare Sfoglia per tornare alla modalità di esplorazione.
2. Il controllo ha ora un titolo aggiornato e nessun bordo, come illustrato nella schermata seguente.

Pagina demo dei Web Parts modificati

Figura 4: Screenshot di Web Parts VS procedura dettagliata 4

Aggiunta di web part in fase di esecuzione

È anche possibile consentire agli utenti di aggiungere controlli Web part alla pagina in fase di esecuzione. A tale scopo, configurare la pagina con un catalogo web part, che contiene un elenco di controlli Web part che si desidera rendere disponibili agli utenti.

Per consentire agli utenti di aggiungere web part in fase di esecuzione

1. Aprire la pagina WebPartsDemo.aspx e passare alla visualizzazione Progettazione.

2. Dalla scheda WebParts della Casella degli strumenti trascinare un controllo CatalogZone nella colonna destra della tabella sotto il controllo EditorZone .

   Entrambi i controlli possono trovarsi nella stessa cella della tabella perché non verranno visualizzati contemporaneamente.

3. Nel riquadro Proprietà assegnare la stringa Aggiungi web part alla proprietà HeaderText del controllo CatalogZone .

4. Dalla sezione WebParts della Casella degli Strumenti trascinare un controllo DeclarativeCatalogPart nell'area dei contenuti del controllo CatalogZone.

5. Fare clic sulla freccia nell'angolo in alto a destra del controllo DeclarativeCatalogPart per esporre il relativo menu Attività e quindi selezionare Modifica modelli.

6. Dalla sezione Standard della casella degli strumenti trascinare un controllo FileUpload e un controllo Calendar nella sezione WebPartsTemplate del controllo DeclarativeCatalogPart .

7. Passare alla visualizzazione Origine . Esaminare il codice sorgente dell'elemento <asp:catalogzone> . Si noti che il controllo DeclarativeCatalogPart contiene un <elemento webpartstemplate> con i due controlli server racchiusi che sarà possibile aggiungere alla pagina dal catalogo.

8. Aggiungere una proprietà Title a ognuno dei controlli aggiunti al catalogo, usando il valore stringa mostrato per ogni titolo nell'esempio di codice seguente. Anche se il titolo non è una proprietà che in genere è possibile impostare su questi due controlli server in fase di progettazione, quando un utente aggiunge questi controlli a una zona WebPartZone dal catalogo in fase di esecuzione, ognuno viene sottoposto a wrapping con un controllo GenericWebPart . In questo modo possono fungere da controlli Web part, in modo che possano visualizzare i titoli.

   Il codice per i due controlli contenuti nel controllo DeclarativeCatalogPart dovrebbe essere simile al seguente.

   <asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
       <WebPartsTemplate>
           <asp:Calendar ID="Calendar1" runat="server" title="My Calendar" />
           <asp:FileUpload ID="FileUpload1" runat="server" title="Upload Files" />
       </WebPartsTemplate>
   </asp:DeclarativeCatalogPart>
   

9. Salva la pagina.

È ora possibile testare il catalogo.

Per testare il catalogo web part

1. Caricare la pagina in un browser.

2. Fare clic sul menu a discesa Modalità di visualizzazione e selezionare Catalogo.

   Viene visualizzato il catalogo denominato Aggiungi Web Parts.

3. Trascina il controllo I miei Preferiti dalla zona Principale verso la parte superiore della zona Barra laterale e rilascialo lì.

4. Nel catalogo Aggiungi Web part selezionare entrambe le caselle di controllo e quindi selezionare Main nell'elenco a discesa contenente le zone disponibili.

5. Fare clic su Aggiungi nel catalogo. I controlli vengono aggiunti alla zona principale. Se si vuole, è possibile aggiungere più istanze di controlli dal catalogo alla pagina.

   La schermata seguente mostra la pagina con il controllo di caricamento del file e il calendario nell'area Principale.

Figura 5: Controlli aggiunti alla zona principale dal catalogo 6. Fare clic sul menu a discesa Modalità di visualizzazione e selezionare Sfoglia. Il catalogo scompare e la pagina viene aggiornata. 7. Chiudere il browser. Caricare di nuovo la pagina. Le modifiche che hai apportato persistono.