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 miglioramento sostanziale 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

ASP.NET profili 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 è che i profili sono fortemente tipizzati, pertanto offrono 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 in una sottocartella web.config file. Il codice seguente definisce un profilo per archiviare i visitatori del sito Web e il cognome.

<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 del 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 configura una proprietà FirstName e LastName per due gruppi; Acquirenti e prospettive.

<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à su 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 inherits , 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

ASP.NET profili usano il modello del 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, è consigliabile sviluppare il proprio provider di profili. La funzionalità profilo ASP.NET consente di usare facilmente provider diversi.

Si crea un provider di profili personalizzato quando:

• È necessario archiviare le informazioni del 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 di ProviderBase

Membro	Descrizione
Initialize (metodo)	Accetta come input il nome dell'istanza del provider e un Oggetto NameValueCollection delle impostazioni di configurazione. Consente di impostare le opzioni e i valori delle proprietà per l'istanza del provider, inclusi i valori e le opzioni specifici dell'implementazione specificati nella configurazione del computer o Web.config file.

Membri settingsProvider

Membro	Descrizione
Proprietà ApplicationName	Nome dell'applicazione archiviato con ogni profilo. Il provider di profili usa il nome dell'applicazione per archiviare le informazioni del profilo separatamente per ogni applicazione. Ciò consente a più applicazioni ASP.NET di usare la stessa origine dati senza conflitti se lo stesso nome utente viene creato in applicazioni diverse. In alternativa, più applicazioni ASP.NET possono condividere un'origine dati del profilo specificando lo stesso nome dell'applicazione.
Metodo GetPropertyValues	Accetta come input un oggetto SettingsContext e settingsPropertyCollection. SettingsContext fornisce informazioni sull'utente. È possibile usare le informazioni come chiave primaria per recuperare le informazioni sulle proprietà del profilo per l'utente. Utilizzare l'oggetto SettingsContext per ottenere il nome utente e se l'utente è autenticato o anonimo. SettingsPropertyCollection contiene un insieme di oggetti SettingsProperty. Ogni oggetto SettingsProperty fornisce il nome e il tipo della proprietà, nonché informazioni aggiuntive, ad esempio il valore predefinito per la proprietà e se la proprietà è di sola lettura. Il metodo GetPropertyValues popola un oggetto SettingsPropertyValueCollection con oggetti SettingsPropertyValue basati sugli oggetti SettingsProperty forniti come input. I valori dell'origine dati per l'utente specificato vengono assegnati alle proprietà PropertyValue per ogni oggetto SettingsPropertyValue e viene restituita l'intera raccolta. La chiamata al metodo aggiorna anche il valore LastActivityDate per il profilo utente specificato alla data e all'ora correnti.
Metodo SetPropertyValues	Accetta come input un oggetto SettingsContext e un oggetto SettingsPropertyValueCollection . SettingsContext fornisce informazioni sull'utente. È possibile usare le informazioni come chiave primaria per recuperare le informazioni sulle proprietà del profilo per l'utente. Utilizzare l'oggetto SettingsContext per ottenere il nome utente e se l'utente è autenticato o anonimo. SettingsPropertyValueCollection contiene un insieme di oggetti SettingsPropertyValue. Ogni oggetto SettingsPropertyValue fornisce il nome, il tipo e il valore della proprietà, nonché informazioni aggiuntive, ad esempio il valore predefinito per la proprietà e se la proprietà è di sola lettura. Il metodo SetPropertyValues aggiorna i valori delle proprietà del profilo nell'origine dati per l'utente specificato. La chiamata al metodo aggiorna anche i valori LastActivityDate e LastUpdatedDate per il profilo utente specificato alla data e all'ora correnti.

Membri di ProfileProvider

Membro	Descrizione
DeleteProfiles, metodo	Accetta come input una matrice di stringhe di nomi utente ed elimina dall'origine dati tutte le informazioni sul profilo e i valori delle proprietà per i nomi specificati in cui il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Se l'origine dati supporta le transazioni, è consigliabile includere tutte le operazioni di eliminazione in una transazione e eseguire il rollback della transazione e generare un'eccezione in caso di errore di eliminazione.
DeleteProfiles, metodo	Accetta come input una raccolta di oggetti ProfileInfo ed elimina dall'origine dati tutti i valori di proprietà e informazioni del profilo per ogni profilo in cui il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Se l'origine dati supporta le transazioni, è consigliabile includere tutte le operazioni di eliminazione in una transazione ed eseguire il rollback della transazione e generare un'eccezione in caso di errore di eliminazione.
Metodo DeleteInactiveProfiles	Accetta come input un valore ProfileAuthenticationOption e un oggetto DateTime ed elimina dall'origine dati tutti i valori delle informazioni e delle proprietà del profilo in cui la data dell'ultima attività è minore o uguale alla data e all'ora specificata e dove il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono eliminati solo profili anonimi, solo profili autenticati o tutti i profili. Se l'origine dati supporta le transazioni, è consigliabile includere tutte le operazioni di eliminazione in una transazione e eseguire il rollback della transazione e generare un'eccezione se un'operazione di eliminazione ha esito negativo.
Metodo GetAllProfiles	Accetta come input un valore ProfileAuthenticationOption , un intero che specifica l'indice di pagina, un intero che specifica le dimensioni della pagina e un riferimento a un numero intero che verrà impostato sul numero totale di profili. Restituisce un oggetto ProfileInfoCollection che contiene oggetti ProfileInfo per tutti i profili nell'origine dati in cui il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono restituiti solo profili anonimi, solo profili autenticati o tutti i profili. I risultati restituiti dal metodo GetAllProfiles sono vincolati dai valori delle dimensioni della pagina e dell'indice della pagina. Il valore delle dimensioni della pagina specifica il numero massimo di oggetti ProfileInfo da restituire in ProfileInfoCollection. Il valore dell'indice di pagina specifica la pagina dei risultati da restituire, dove 1 identifica la prima pagina. Il parametro per i record totali è un parametro out (è possibile usare ByRef in Visual Basic) impostato sul numero totale di profili. Ad esempio, se l'archivio dati contiene 13 profili per l'applicazione e il valore dell'indice di pagina è 2 con una dimensione di pagina pari a 5, profileInfoCollection restituito contiene il sesto al decimo profilo. Il valore totale dei record è impostato su 13 quando il metodo restituisce.
Metodo GetAllInactiveProfiles	Accetta come input un valore ProfileAuthenticationOption , un oggetto DateTime , un intero che specifica l'indice della pagina, un intero che specifica le dimensioni della pagina e un riferimento a un numero intero che verrà impostato sul conteggio totale dei profili. Restituisce un oggetto ProfileInfoCollection che contiene oggetti ProfileInfo per tutti i profili nell'origine dati in cui la data dell'ultima attività è minore o uguale a DateTime specificata e dove il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono restituiti solo profili anonimi, solo profili autenticati o tutti i profili. I risultati restituiti dal metodo GetAllInactiveProfiles sono vincolati dai valori dell'indice della pagina e delle dimensioni della pagina. Il valore delle dimensioni della pagina specifica il numero massimo di oggetti ProfileInfo da restituire in ProfileInfoCollection. Il valore dell'indice di pagina specifica la pagina dei risultati da restituire, dove 1 identifica la prima pagina. Il parametro per i record totali è un parametro out (è possibile usare ByRef in Visual Basic) impostato sul numero totale di profili. Ad esempio, se l'archivio dati contiene 13 profili per l'applicazione e il valore dell'indice di pagina è 2 con una dimensione di pagina pari a 5, profileInfoCollection restituito contiene il sesto al decimo profilo. Il valore totale dei record è impostato su 13 quando il metodo restituisce.
Metodo FindProfilesByUserName	Accetta come input un valore ProfileAuthenticationOption , una stringa contenente un nome utente, un intero che specifica l'indice della pagina, un intero che specifica le dimensioni della pagina e un riferimento a un numero intero che verrà impostato sul numero totale di profili. Restituisce un profileInfoCollection che contiene oggetti ProfileInfo per tutti i profili nell'origine dati in cui il nome utente corrisponde al nome utente specificato e dove il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono restituiti solo profili anonimi, solo profili autenticati o tutti i profili. Se l'origine dati supporta funzionalità di ricerca aggiuntive, ad esempio caratteri jolly, è possibile fornire funzionalità di ricerca più estese per i nomi utente. I risultati restituiti dal metodo FindProfilesByUserName sono vincolati dai valori dell'indice della pagina e delle dimensioni della pagina. Il valore delle dimensioni della pagina specifica il numero massimo di oggetti ProfileInfo da restituire in ProfileInfoCollection. Il valore dell'indice di pagina specifica la pagina dei risultati da restituire, dove 1 identifica la prima pagina. Il parametro per i record totali è un parametro out (è possibile usare ByRef in Visual Basic) impostato sul numero totale di profili. Ad esempio, se l'archivio dati contiene 13 profili per l'applicazione e il valore dell'indice di pagina è 2 con una dimensione di pagina pari a 5, profileInfoCollection restituito contiene il sesto al decimo profilo. Il valore totale dei record è impostato su 13 quando il metodo restituisce.
Metodo FindInactiveProfilesByUserName	Accetta come input un valore ProfileAuthenticationOption , una stringa contenente un nome utente, un oggetto DateTime , un intero che specifica l'indice della pagina, un intero che specifica le dimensioni della pagina e un riferimento a un numero intero che verrà impostato sul numero totale di profili. Restituisce un profileInfoCollection che contiene oggetti ProfileInfo per tutti i profili nell'origine dati in cui il nome utente corrisponde al nome utente specificato, in cui la data dell'ultima attività è minore o uguale a DateTime specificata e dove il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono restituiti solo profili anonimi, solo profili autenticati o tutti i profili. Se l'origine dati supporta funzionalità di ricerca aggiuntive, ad esempio caratteri jolly, è possibile fornire funzionalità di ricerca più estese per i nomi utente. I risultati restituiti dal metodo FindInactiveProfilesByUserName sono vincolati dai valori dell'indice della pagina e delle dimensioni della pagina. Il valore delle dimensioni della pagina specifica il numero massimo di oggetti ProfileInfo da restituire in ProfileInfoCollection. Il valore dell'indice di pagina specifica la pagina dei risultati da restituire, dove 1 identifica la prima pagina. Il parametro per i record totali è un parametro out (è possibile usare ByRef in Visual Basic) impostato sul numero totale di profili. Ad esempio, se l'archivio dati contiene 13 profili per l'applicazione e il valore dell'indice di pagina è 2 con una dimensione di pagina pari a 5, profileInfoCollection restituito contiene il sesto al decimo profilo. Il valore totale dei record è impostato su 13 quando il metodo restituisce.
Metodo GetNumberOfInActiveProfiles	Accetta come input un valore ProfileAuthenticationOption e un oggetto DateTime e restituisce un conteggio di tutti i profili nell'origine dati in cui la data dell'ultima attività è minore o uguale a DateTime specificata e dove il nome dell'applicazione corrisponde al valore della proprietà ApplicationName . Il parametro ProfileAuthenticationOption specifica se vengono conteggiati solo profili anonimi, solo profili autenticati o tutti i profili.

ApplicationName

Poiché i provider di profili archiviano le informazioni sul profilo separatamente per ogni applicazione, è necessario assicurarsi che lo schema dati includa il nome dell'applicazione e che le query e gli aggiornamenti includono 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

Quali sono ASP.NET temi 2.0?

Uno degli aspetti più importanti di un'applicazione Web è un aspetto coerente e si sente nel sito. ASP.NET sviluppatori 1.x in genere usano fogli di stile cascading (CSS) per implementare un aspetto coerente. ASP.NET temi 2.0 migliorano significativamente su CSS perché offrono agli sviluppatori 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 le immagini. Il file di interfaccia controlla l'aspetto visivo dei controlli server di ASP.NET.

Dove sono archiviati i temi?

La posizione in cui i temi vengono archiviati differiscono in base all'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 per un'applicazione specifica viene archiviato in una App\_Themes\<Theme\_Name> directory nella radice del sito Web.

Nota

Un file di interfaccia deve modificare solo le proprietà del controllo server che influiscono sull'aspetto.

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 in ASP. DIRECTORY NETClientfiles\Themes all'interno della directory v2.x.xxxxx. In alternativa, è possibile spostare i file di tema nella cartella aspnet_client/system_web/[version]/Theme/[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, un file di interfaccia di interfaccia facoltativo e 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 temi. I file CSS vengono usati per definire classi e attributi CSS comuni per i selettore specifici. Per applicare una delle classi CSS a un elemento di pagina, viene usata la proprietà CSSClass .

Il file skin è un file XML che contiene definizioni di proprietà per i controlli server di 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 esplorata senza un tema applicato. La figura 2 mostra lo stesso file con un tema applicato. Il colore di sfondo e il colore di testo vengono configurati tramite un file CSS. L'aspetto del pulsante e della casella di testo sono configurati usando il file di pelle elencato sopra.

Figura 1: Nessun tema

Figura 2: Tema applicato

Il file skin elencato sopra definisce una pelle predefinita per tutti i controlli TextBox e Button. Ciò significa che ogni controllo TextBox e il controllo Button inseriti in una pagina avranno un 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 un'interfaccia per un controllo Button. Solo i controlli Button con una proprietà SkinID di goButton avranno l'aspetto della pelle.

<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 sono necessarie altre interfacce, è consigliabile usare la proprietà SkinID.

Applicazione di temi alle pagine

È possibile applicare un tema usando uno dei metodi seguenti:

• Nell'elemento <pages> del file di web.config
• @Page Nella direttiva di una pagina
• 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 una delle posizioni indicate 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 pagina

È 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 avvisa 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 la si applica dopo questo punto, il tema delle pagine sarà già stato applicato dal runtime e 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 i controlli server hanno una proprietà SkinID specificata. Questo avviso è destinato a informare 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.

Importante

Se si usa Microsoft Word per immettere informazioni in un file di interfaccia, assicurarsi di non sostituire le virgolette regolari con virgolette intelligenti. Le virgolette intelligenti causano problemi con i file di pelle.

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 di interfaccia e fare clic su Aggiungi.

6. Fare clic su Sì quando viene chiesto se si vuole 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 StyleSheet.css.

12. Sostituire tutto il testo in esso 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. Salvare la pagina. Passare ora alla pagina Default.aspx. Dovrebbe essere visualizzato come normale modulo 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. Deve 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. Salvare la pagina. Ora visualizzare nuovamente la pagina nel browser. Il pulsante dovrebbe ora dire "vai" e dovrebbe essere più ampio in aspetto.

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

StyleSheetTheme, proprietà

Finora, abbiamo parlato solo di applicare temi usando la proprietà Theme. Quando si usa la proprietà Theme, il file skin eseguirà l'override di eventuali impostazioni dichiarative per i controlli server. Ad esempio, nell'esercizio 1 è stato specificato un SkinID di "goButton" per il controllo Button e che ha modificato il testo del pulsante in "go". Si potrebbe notare che la proprietà Text del pulsante nella finestra di progettazione è stata impostata su "Button", ma il tema sovrasodo. Il tema eseguirà sempre l'override di tutte le impostazioni delle proprietà nella finestra di progettazione.

Se si vuole essere in grado di eseguire l'override delle proprietà definite nel file di interfaccia del tema con proprietà specificate nella finestra di progettazione, è possibile usare la proprietà StyleSheetTheme anziché la proprietà Theme. La proprietà StyleSheetTheme è la stessa della 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 di web.config dal progetto nell'esercizio 1 e modificare l'elemento <pages> nel seguente:

<pages styleSheetTheme="CoolTheme" />

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

Override dei temi

Un tema globale può essere sottoposto a override applicando un tema allo stesso nome nella cartella App_Themes dell'applicazione. Tuttavia, il tema non viene applicato in uno scenario di override vero. Se il runtime rileva i file di tema nella cartella App_Themes, verrà applicato il tema usando tali file e ignora il tema globale.

La proprietà StyleSheetTheme è sostituibile e può essere sostituita 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 part

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 conservare 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 intervento di sviluppatore o 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 part a una pagina, rimuoverli, nasconderli o ridurli al minimo come finestre normali.
• Personalizzare il layout della pagina. Gli utenti possono trascinare un controllo Web part in una zona diversa in una pagina oppure modificarne l'aspetto, le proprietà e il comportamento.
• Esportare e importare controlli. Gli utenti possono importare o esportare le impostazioni di controllo web part da usare in altre pagine o siti, mantenendo le proprietà, l'aspetto e anche i dati nei controlli. Ciò riduce le richieste di immissione e configurazione dei dati sugli utenti finali.
• Creare connessioni. Gli utenti possono stabilire connessioni tra controlli in modo che, ad esempio, un controllo grafico possa visualizzare un grafico per i dati in un controllo ticker di magazzino. 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 basato sul 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 personalizzate, 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, ad esempio Visual Studio, è che il set di controlli Web part offre funzionalità per la creazione e la selezione dei controlli web part in una finestra di progettazione visiva. Ad esempio, è possibile usare la finestra di progettazione per trascinare un'area 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. In questo modo è possibile velocizzare lo sviluppo di applicazioni Web part e ridurre la quantità di codice da scrivere.

Sviluppo di controlli

È possibile usare qualsiasi controllo ASP.NET esistente come controllo Web part, inclusi i controlli server Web standard, i controlli server personalizzati e i 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 singole web part, in genere si creerà un controllo utente e lo userà come controllo Web part o si sviluppa un controllo Web part personalizzato.

Come esempio di sviluppo di un controllo Web part personalizzato, è possibile creare un controllo per fornire una delle funzionalità fornite da altri controlli server di ASP.NET che potrebbero essere utili per creare un pacchetto come controllo Web part personalizzabile: calendari, elenchi, informazioni finanziarie, notizie, calcolatori, controlli di testo avanzati per l'aggiornamento del contenuto, griglia modificabili che si connettono ai database, grafici che aggiornano dinamicamente i loro display o le informazioni meteorologiche e di viaggio. Se si fornisce una finestra di progettazione visiva con il controllo, qualsiasi sviluppatore di pagine usando 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 principale e i servizi necessari per tutti i controlli Web part. Un componente strutturale dell'interfaccia utente richiesto in ogni pagina web part è il controllo WebPartManager. Sebbene non sia 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 traccia e controlla anche le diverse modalità di visualizzazione in cui può trovarsi una pagina, ad esempio sfoglia, connettere, modificare o gestire la modalità catalogo e se le modifiche alla personalizzazione si applicano a tutti gli utenti o a singoli utenti. Infine, avvia e tiene traccia delle connessioni e delle comunicazioni tra controlli Web part.

Il secondo tipo di componente strutturale dell'interfaccia utente è la zona. Le zone fungono da manager di layout in una pagina web part. Contengono e organizzano controlli che derivano dalla classe Part (controlli parte) e offrono la possibilità di eseguire il layout di pagina modulare in orientamento orizzontale o verticale. Le zone offrono anche elementi comuni e coerenti dell'interfaccia utente (ad esempio lo stile intestazione e il 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 chrome 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 Controlli essenziali web part di seguito.

I controlli interfaccia utente web part, tutti derivati dalla classe Part , costituiscono l'interfaccia utente primaria in una pagina web part. Il set di controlli Web part è flessibile e inclusivo nelle opzioni che offre per la creazione di controlli parte. Oltre a creare controlli Web part personalizzati, è anche possibile usare controlli server di 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 part

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 più frequentemente usati 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.

controllo Web part	Descrizione
Webpartmanager	Gestisce tutti i controlli web part in una pagina. È necessario un controllo WebPartManager (e solo uno) per ogni pagina web part.
Catalogzone	Contiene controlli CatalogPart. Usare questa zona per creare un catalogo di controlli Web part da cui gli utenti possono selezionare i controlli da aggiungere a una pagina.
Editorzone	Contiene controlli EditorPart. Usare questa zona per consentire agli utenti di modificare e personalizzare i controlli web part in una pagina.
Webpartzone	Contiene e fornisce il layout complessivo per i controlli WebPart che compongono l'interfaccia utente principale di una pagina. Usare questa zona ogni volta che si creano pagine con controlli Web part. Le pagine possono contenere una o più zone.
Connectionszone	Contiene controlli WebPartConnection e fornisce un'interfaccia utente per la gestione delle connessioni.
WebPart (GenericWebPart)	Esegue il rendering dell'interfaccia utente primaria; la maggior parte dei controlli interfaccia utente web part rientra in questa categoria. Per il controllo massimo a livello di codice, è possibile creare controlli Web part personalizzati che derivano dal controllo WebPart di base. È anche possibile usare controlli server esistenti, controlli utente o controlli personalizzati come controlli Web part. Ogni volta che uno di questi controlli viene inserito in una zona, il controllo WebPartManager li esegue automaticamente con i controlli GenericWebPart in fase di esecuzione in modo che sia possibile usarli con funzionalità web part.
Catalogpart	Contiene un elenco di controlli Web part disponibili che gli utenti possono aggiungere alla pagina.
Webpartconnection	Crea una connessione tra due controlli Web part in una pagina. La connessione definisce uno dei controlli web part come provider (di dati) e l'altro come consumer.
Editorpart	Funge da classe di base per i controlli editor specializzati.
Controlli EditorPart (AppearanceEditorPart, LayoutEditorPart, BehaviorEditorPart e PropertyGridEditorPart)	Consentire agli utenti di personalizzare vari aspetti dei controlli dell'interfaccia utente delle web part in una pagina

Lab: Creare una pagina web part

In questo lab verrà creata una pagina web part che conterrà le informazioni tramite profili di ASP.NET.

Creazione di una pagina semplice con web part

In questa parte della procedura dettagliata si crea una pagina che usa i controlli Web part per visualizzare il contenuto statico. Il primo passaggio in uso con 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 occupare un'area specificata di una pagina.

Nota

Non è necessario eseguire alcuna operazione per abilitare la personalizzazione delle web part; è abilitato per impostazione predefinita per il set di controlli Web part. Quando si esegue prima una pagina web part in un sito, ASP.NET configura un provider di personalizzazione predefinito per archiviare le impostazioni di personalizzazione utente. Per altre informazioni sulla personalizzazione, vedere Panoramica sulla personalizzazione delle web part.

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 Progettazione .

3. Dal menu Visualizza assicurarsi che le opzioni Controlli non visivi e Dettagli siano selezionate in modo da visualizzare i tag di layout e i controlli 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 Blocca formato nel menu e selezionare l'opzione Intestazione 1 . Nell'intestazione aggiungere la pagina dimostrativa delle web part di testo.

5. Nella scheda WebParts della casella degli strumenti trascinare un controllo WebPartManager nella pagina, posizionandolo subito dopo il nuovo carattere di riga e prima dei <div>tag.

   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 un controllo WebPartZone nella colonna della tabella sinistra. 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: Main

10. Salvare il file.

La pagina ora include due zone distinte che è possibile controllare separatamente. Tuttavia, nessuna zona ha alcun contenuto, quindi la creazione di contenuto è il passaggio successivo. Per questa procedura dettagliata, è possibile usare i controlli Web part che visualizzano solo contenuto statico.

Il layout di una zona web part viene specificato da un <elemento zonetemplate> . All'interno del modello di zona è possibile aggiungere qualsiasi controllo ASP.NET, indipendentemente dal fatto che sia un controllo Web part personalizzato, un controllo utente o 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 controllo server regolare 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 Progettazione trascinare un controllo Etichetta dalla scheda Standard della casella degli strumenti nell'area contenuto della zona la cui proprietà ID è impostata su MainZone.

2. Passare alla visualizzazione Origine . Si noti che un <elemento zonetemplate> è stato aggiunto per eseguire il wrapping del 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, ad esempio 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. Salvare il file.

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

Per creare un controllo utente

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

   Nota

   Il controllo utente per questa procedura dettagliata non implementa la funzionalità di ricerca effettiva; viene usato solo per illustrare le funzionalità delle web part.

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. Trascinare un controllo Pulsante nella pagina nella nuova riga sotto la casella di testo appena aggiunta.

5. Passare alla visualizzazione Origine . Assicurarsi 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. Salvare e chiudere il file.

È ora possibile aggiungere controlli Web part all'area Barra laterale. Si aggiungono due controlli all'area Barra laterale, uno contenente un elenco di collegamenti e un altro controllo utente creato nella procedura precedente. I collegamenti vengono aggiunti come controllo server Label standard, analogamente al modo in cui è 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 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 part esegue il wrapping di 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 web part 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 del controllo utente creata, SearchUserControl.ascx, da Esplora soluzioni all'area 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 del 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. Salvare e chiudere 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 web part con due aree

Figura 3: Screenshot della procedura dettagliata di Visual Studio 1 web part

Nella barra del titolo di ogni controllo è presente una freccia verso il basso che consente l'accesso a un menu di verbi di 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 notare che il controllo è ridotto a icona. Dal menu dei verbi fare clic su Ripristina e il controllo torna alla dimensione normale.

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 questa procedura dettagliata non verrà eseguita, è anche possibile creare controlli editor personalizzati che consentono agli utenti di modificare le funzionalità 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 consenta la modifica del 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 Inserisci 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 le funzionalità del set di controlli Web part che consentono a una pagina di modificarne la visualizzazione o la modalità di visualizzazione e consente anche 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 selezionando Salva dal menu File .

Per consentire agli utenti di modificare il layout

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

2. Posizionare il punto di inserimento nella visualizzazione Progettazione subito dopo il controllo WebPartManager aggiunto in precedenza. Aggiungere un ritorno fisso 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. Trascinare il controllo My Links dalla relativa barra del titolo dall'area Barra laterale nella parte inferiore della zona Main. La pagina dovrebbe essere simile alla schermata seguente.

Pagina demo web part con il controllo Collegamenti personali spostato

Figura 4: Screenshot della procedura dettagliata di Visual Studio 2 web part

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 dove è stato posizionato.

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

3. Scegliere Modifica dal menu Modalità di visualizzazione.

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

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 modificare titolo in 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 part in modalità di modifica

Figura 5: Schermata dettagliata di Visual Studio 3 web part

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 web part modificata

Figura 4: Screenshot della procedura dettagliata di Visual Studio 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 Struttura .

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 contenuto del controllo CatalogZone .

5. Fare clic sulla freccia nell'angolo superiore destro 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 un'area 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. Salvare 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 part .

3. Trascinare il controllo Preferiti personali dalla zona Principale all'inizio della zona Barra laterale e rilasciarlo 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 Main. Se si desidera, è possibile aggiungere più istanze di controlli dal catalogo alla pagina.

   La schermata seguente mostra la pagina con il controllo caricamento file e il calendario nella zona 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. Modifiche apportate in modo permanente.