Procedura dettagliata: modifica delle modalità di visualizzazione in una pagina Web part
Aggiornamento: novembre 2007
In questa procedura dettagliata vengono illustrati due metodi per modificare la modalità di visualizzazione di una pagina Web part ASP.NET e viene inoltre descritto come passare da una modalità di visualizzazione all'altra. In particolare, vengono illustrate le seguenti operazioni:
Creare un controllo utente personalizzato che consenta di modificare la modalità di visualizzazione di una pagina Web contenente controlli Web part.
Selezionare le diverse modalità di visualizzazione in una pagina Web part.
Per ulteriori informazioni sulle modalità di visualizzazione e sul loro utilizzo, vedere Modalità di visualizzazione di pagine Web part.
Prerequisiti
Per completare questa procedura dettagliata è necessario:
Internet Information Services (IIS) installato e configurato sul computer che ospiterà il sito. Per informazioni dettagliate sull'installazione e sulla configurazione di IIS, vedere la Guida di IIS inclusa nel prodotto o la documentazione in linea di IIS disponibile sul sito Microsoft TechNet, Internet Information Services 6.0 Technical Resources (informazioni in lingua inglese).
Un sito Web ASP.NET in grado di identificare i singoli utenti. Se un sito di questo tipo è già configurato, è possibile utilizzarlo come punto di partenza per questa procedura dettagliata. In caso contrario, per informazioni dettagliate sulla creazione di una directory o un sito virtuale, vedere Procedura: creare e configurare directory virtuali in IIS 5.0 e 6.0.
Un database e un provider di personalizzazioni configurati. La personalizzazione di Web part è attivata per impostazione predefinita e utilizza il provider di personalizzazioni SQL (SqlPersonalizationProvider) con Microsoft SQL Server Express (SSE) per la memorizzazione dei dati di personalizzazione. In questa procedura dettagliata vengono utilizzati SSE e il provider SQL predefinito. Se SSE è già installato non è necessaria alcuna configurazione. SSE è disponibile con Microsoft Visual Studio 2005 come parte facoltativa dell'installazione oppure può essere scaricato gratuitamente. Per informazioni dettagliate, vedere la pagina Web Microsoft SQL Server 2005 Express Edition (informazioni in lingua inglese). Per utilizzare una delle versioni complete di SQL Server, è necessario installare e configurare un database dei servizi dell'applicazione ASP.NET e configurare il provider di personalizzazioni SQL per la connessione a tale database. Per informazioni dettagliate, vedere Creazione e configurazione del database dei servizi dell'applicazione per SQL Server. È inoltre possibile creare e configurare un provider personalizzato da utilizzare con altri database o soluzioni di memorizzazione non basati su SQL. Per informazioni dettagliate e il codice di esempio, vedere Implementazione di un provider di appartenenze.
Un controllo Web part personalizzato derivato dalla classe WebPart da potere aggiungere al catalogo nella pagina Web part. Per un esempio di controllo WebPart personalizzato e di riferimento ad esso in una pagina, vedere l'esempio di codice per il controllo TextDisplayWebPart nella documentazione per la classe WebPartDisplayMode.
Creazione di un controllo utente per la modifica della modalità di visualizzazione
In questa sezione verrà creato un controllo utente che può essere aggiunto in qualsiasi pagina contenente controlli Web part, in modo che gli utenti possano facilmente selezionare le diverse modalità di visualizzazione della pagina.
Per creare un controllo utente per la modifica della modalità di visualizzazione
Creare un nuovo file in un editor di testo.
All'inizio del file aggiungere una dichiarazione di controllo come illustrato nell'esempio di codice riportato di seguito:
<%@ control language="vb" classname="DisplayModeMenuVB"%>
<%@ control language="C#" classname="DisplayModeMenuCS"%>
Sotto la dichiarazione del controllo aggiungere alla pagina il codice riportato di seguito,
che crea l'interfaccia utente per il controllo, costituita da tre parti principali:
Un elenco a discesa (elemento <asp:dropdownlist>) che consente agli utenti di modificare la modalità di visualizzazione.
Un collegamento ipertestuale (elemento <asp:linkbutton>) che consente di reimpostare i dati di personalizzazione specifici dell'utente in una pagina, restituendo alla pagina l'aspetto e il layout predefiniti prima delle modifiche apportate dall'utente.
Una coppia di pulsanti di opzione (due elementi <asp:radiobutton>) che consentono agli utenti di passare dall'ambito di personalizzazione utente a quello condiviso (l'ambito utente è quello predefinito). Quando l'utente corrente personalizza la pagina, l'ambito di personalizzazione determina a quali utenti risulteranno visibili gli effetti della personalizzazione.
Il codice sarà analogo a quello riportato nell'esempio seguente:
<div> <asp:Panel ID="Panel1" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" AssociatedControlID="DisplayModeDropdown"/> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" 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" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div>
<div> <asp:Panel ID="Panel1" Borderwidth="1" Width="230" BackColor="lightgray" Font-Names="Verdana, Arial, Sans Serif" > <asp:Label ID="Label1" Text=" Display Mode" Font-Bold="true" Font-Size="8" Width="120" AssociatedControlID="DisplayModeDropdown"/> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" Width="120" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> <asp:LinkButton ID="LinkButton1" 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" GroupingText="Personalization Scope" Font-Bold="true" Font-Size="8" Visible="false" > <asp:RadioButton ID="RadioButton1" Text="User" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton1_CheckedChanged" /> <asp:RadioButton ID="RadioButton2" Text="Shared" AutoPostBack="true" GroupName="Scope" OnCheckedChanged="RadioButton2_CheckedChanged" /> </asp:Panel> </asp:Panel> </div>
Denominare il file DisplaymodemenuCS.ascx o DisplaymodemenuVB.ascx (a seconda del linguaggio utilizzato) e salvarlo nella cartella della directory virtuale o del sito Web che si sta utilizzando per questa procedura dettagliata.
Per aggiungere funzionalità di modalità di visualizzazione al controllo utente
Nel file di origine del controllo utente aggiungere una coppia di tag <script> appena sopra il tag <div> di apertura della pagina e aggiungere un attributo all'interno del tag <script> di apertura.
Nella sezione <script> aggiungere il codice seguente per consentire agli utenti di modificare la modalità di visualizzazione della pagina, reimpostare i dati di personalizzazione della pagina e passare dall'ambito di personalizzazione condiviso a quello utente e viceversa:
<script > ' Use a field to reference the current WebPartManager. Dim _manager As WebPartManager Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) AddHandler Page.InitComplete, AddressOf InitComplete End Sub Sub InitComplete(ByVal sender As Object, ByVal e As System.EventArgs) _manager = WebPartManager.GetCurrentWebPartManager(Page) Dim browseModeName As String = WebPartManager.BrowseDisplayMode.Name ' Fill the dropdown with the names of supported display modes. Dim mode As WebPartDisplayMode For Each mode In _manager.SupportedDisplayModes Dim modeName As String = mode.Name ' Make sure a mode is enabled before adding it. If mode.IsEnabled(_manager) Then Dim item As New ListItem(modeName, modeName) DisplayModeDropdown.Items.Add(item) End If Next mode ' 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 Then Panel2.Visible = True If _manager.Personalization.Scope = PersonalizationScope.User Then RadioButton1.Checked = True Else RadioButton2.Checked = True End If End If End Sub ' Change the page to the selected display mode. Sub DisplayModeDropdown_SelectedIndexChanged(ByVal sender As Object, _ ByVal e As EventArgs) Dim selectedMode As String = DisplayModeDropdown.SelectedValue Dim mode As WebPartDisplayMode = _ _manager.SupportedDisplayModes(selectedMode) If Not (mode Is Nothing) Then _manager.DisplayMode = mode End If End Sub ' Set the selected item equal to the current display mode. Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) Dim items As ListItemCollection = DisplayModeDropdown.Items Dim selectedIndex As Integer = _ items.IndexOf(items.FindByText(_manager.DisplayMode.Name)) DisplayModeDropdown.SelectedIndex = selectedIndex End Sub ' Reset all of a user's personalization data for the page. Protected Sub LinkButton1_Click(ByVal sender As Object, _ ByVal e As EventArgs) _manager.Personalization.ResetPersonalizationState() End Sub ' If not in User personalization scope, toggle into it. Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, _ ByVal e As EventArgs) If _manager.Personalization.Scope = PersonalizationScope.Shared Then _manager.Personalization.ToggleScope() End If End Sub ' If not in Shared scope, and if user is allowed, toggle the scope. Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, _ ByVal e As EventArgs) If _manager.Personalization.CanEnterSharedScope AndAlso _ _manager.Personalization.Scope = PersonalizationScope.User Then _manager.Personalization.ToggleScope() End If End Sub </script>
<script > // Use a field to reference the current WebPartManager. 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 dropdown 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 is allowed, toggle the scope. protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { if (_manager.Personalization.CanEnterSharedScope && _manager.Personalization.Scope == PersonalizationScope.User) _manager.Personalization.ToggleScope(); } </script>
Di seguito sono riportate alcune considerazioni relative a questo codice:
Nel metodo InitComplete vengono specificate le modalità di visualizzazione disponibili nella pagina e inserite nel controllo dell'elenco a discesa. Viene inoltre specificato se l'utente corrente può scegliere l'ambito di personalizzazione condiviso nella pagina e viene selezionato il controllo del pulsante di opzione appropriato.
Nel metodo DisplayModeDropdown_SelectedIndexChanged viene effettivamente modificata la modalità di visualizzazione della pagina utilizzando il controllo WebPartManager e la modalità selezionata dall'utente.
Nel metodo LinkButton1_Click viene reimpostato lo stato di personalizzazione della pagina, ossia tutti i dati di personalizzazione utente della pagina vengono eliminati dall'archivio e viene ripristinato lo stato predefinito della pagina.
Nei metodi RadioButton1_CheckChanged e RadioButton2_CheckChanged l'ambito di personalizzazione viene impostato su utente o condiviso.
Salvare e chiudere il file.
Creazione di una pagina Web per contenere il controllo delle modalità di visualizzazione
Una volta creato un controllo utente per modificare la modalità di visualizzazione, è possibile creare una pagina Web che conterrà tale controllo oltre ad aree Web part e altri controlli che forniscono le funzionalità Web part.
Per creare una pagina Web che consenta di modificare la modalità di visualizzazione
Salvare l'assembly compilato per il controllo personalizzato nella cartella Bin del sito Web.
Come prerequisito per questa parte della procedura dettagliata, è richiesto un controllo WebPart personalizzato compilato. In questa procedura dettagliata viene utilizzato il controllo personalizzato TextDisplayWebPart, disponibile nell'argomento relativo ai cenni preliminari sulla classe WebPartDisplayMode. All'assembly compilato deve essere assegnato il nome TextDisplayWebPartCS.dll o TextDisplayWebPartVB.dll, a seconda del linguaggio utilizzato.
Nota sulla sicurezza: Il controllo include una casella di testo che accetta l'input dell'utente e rappresenta quindi una potenziale minaccia alla sicurezza. Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.
Creare un nuovo file in un editor di testo.
All'inizio del file aggiungere una dichiarazione di pagina e due direttive register. Una direttiva register è per il controllo utente e l'altra è per il controllo WebPart personalizzato utilizzato in questa procedura dettagliata. L'attributo Assembly della direttiva deve fare riferimento al nome del file di assembly del controllo personalizzato, senza l'estensione.
<%@ page language="VB" %> <%@ register TagPrefix="uc1" TagName="DisplayModeMenuVB" Src="DisplayModeMenuVB.ascx" %> <%@ register tagprefix="aspSample" Namespace="Samples.AspNet.VB.Controls" Assembly="TextDisplayWebPartVB"%>
<%@ page language="C#" %> <%@ register TagPrefix="uc1" TagName="DisplayModeMenuCS" Src="DisplayModeMenuCS.ascx" %> <%@ register tagprefix="aspSample" Namespace="Samples.AspNet.CS.Controls" Assembly="TextDisplayWebPartCS"%>
Sotto le direttive register aggiungere il seguente blocco di codice, che consente di passare manualmente alla modalità di catalogo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script > Sub Button1_Click(Byval sender As Object, _ ByVal e As EventArgs) WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode End Sub </script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script > void Button1_Click(object sender, EventArgs e) { WebPartManager1.DisplayMode = WebPartManager.CatalogDisplayMode; } </script>
Dopo il blocco di codice aggiungere il seguente codice al file.
In questo esempio di codice sono presenti diverse funzionalità necessarie per una pagina Web part, compreso un elemento <asp:webpartmanager>, le aree Web part corrispondenti alle possibili modalità di visualizzazione della pagina e vari controlli. Per ulteriori informazioni su tali funzionalità, vedere Procedura dettagliata: creazione di una pagina Web part.
Il codice per la parte restante della pagina sarà analogo a quello riportato nel blocco seguente.
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" > <title>Web Parts Display Modes</title> </head> <body> <form id="Form2" > <asp:webpartmanager id="WebPartManager1" /> <uc1:DisplayModeMenuVB ID="DisplayModeMenu1" /> <asp:webpartzone id="WebPartZone1" BackImageUrl="~/MyImage.gif"> <zonetemplate> <asp:Calendar ID="Calendar1" Runat="server" Title="My Calendar" /> </zonetemplate> </asp:webpartzone> <asp:WebPartZone ID="WebPartZone2" Runat="server"> </asp:WebPartZone> <asp:EditorZone ID="editzone1" Runat="server"> <ZoneTemplate> <asp:AppearanceEditorPart ID="appearanceeditor1" Runat="server" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" Runat="server" /> </ZoneTemplate> </asp:EditorZone> <asp:CatalogZone ID="catalogzone1" Runat="server"> <ZoneTemplate> <asp:DeclarativeCatalogPart ID="declarativepart1" Runat="server"> <WebPartsTemplate> <aspSample:TextDisplayWebPart id="textwebpart" title = "Text Content WebPart"/> </WebPartsTemplate> </asp:DeclarativeCatalogPart> </ZoneTemplate> </asp:CatalogZone> <br /> <asp:button id="button1" text="Catalog Mode" OnClick="Button1_Click" /> </form> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" > <title>Web Parts Display Modes</title> </head> <body> <form id="Form2" > <asp:webpartmanager id="WebPartManager1" /> <uc1:DisplayModeMenuCS ID="DisplayModeMenu1" /> <asp:webpartzone id="WebPartZone1" BackImageUrl="~/MyImage.gif"> <zonetemplate> <asp:Calendar ID="Calendar1" Runat="server" Title="My Calendar" /> </zonetemplate> </asp:webpartzone> <asp:WebPartZone ID="WebPartZone2" Runat="server"> </asp:WebPartZone> <asp:EditorZone ID="editzone1" Runat="server"> <ZoneTemplate> <asp:AppearanceEditorPart ID="appearanceeditor1" Runat="server" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" Runat="server" /> </ZoneTemplate> </asp:EditorZone> <asp:CatalogZone ID="catalogzone1" Runat="server"> <ZoneTemplate> <asp:DeclarativeCatalogPart ID="declarativepart1" Runat="server"> <WebPartsTemplate> <aspSample:TextDisplayWebPart id="textwebpart" title = "Text Content WebPart" AllowClose="true"/> </WebPartsTemplate> </asp:DeclarativeCatalogPart> </ZoneTemplate> </asp:CatalogZone> <br /> <asp:button id="button1" text="Catalog Mode" OnClick="Button1_Click" /> </form> </body> </html>
Denominare il file Displaymodes.aspx e salvarlo nella directory del sito Web.
Esecuzione del test della pagina Web per modificare la modalità di visualizzazione
A questo punto è stato creato quanto necessario per eseguire una pagina Web contenente controlli Web part in cui sia possibile selezionare diverse modalità di visualizzazione.
Per eseguire il test della pagina e modificare la modalità di visualizzazione
Caricare la pagina in un browser.
La pagina risulterà simile alla schermata riportata di seguito:
Pagina con un controllo per la modifica della modalità di visualizzazione
Fare clic sul controllo elenco a discesa Display Mode.
Verranno visualizzate le diverse modalità di visualizzazione disponibili per la pagina. Poiché la pagina contiene un controllo WebPartZone, un controllo EditorZone e un controllo CatalogZone, nell'elenco a discesa sono incluse le modalità di visualizzazione corrispondenti a questi tipi di aree, oltre a quella predefinita Browse.
Nota: Se la pagina contenesse anche un controllo ConnectionsZone, sarebbe possibile creare connessioni tra i controlli e all'elenco a discesa verrebbe aggiunta una modalità di visualizzazione di connessione. Le connessioni non rientrano tuttavia nell'ambito di questa procedura dettagliata.
Selezionare la modalità Catalog dall'elenco a discesa.
Viene visualizzata l'interfaccia utente della modalità di catalogo, con il controllo TextDisplayWebPart visibile nel catalogo, disponibile per essere aggiunto alla pagina.
Fare clic sul pulsante Close per tornare alla modalità di visualizzazione standard della pagina.
In alternativa, per passare da una modalità di visualizzazione all'altra senza utilizzare il controllo utente, è possibile fare clic sul pulsante Catalog Mode nella parte inferiore della pagina. Il codice per questa opzione è riportato nel metodo Button1_Click della pagina Web.
La pagina verrà visualizzata in modalità di catalogo.
Selezionare la casella di controllo accanto al controllo personalizzato nel catalogo e fare clic sul pulsante Add per aggiungere il controllo alla pagina.
Fare clic su Close per tornare alla modalità di visualizzazione standard della pagina.
Il controllo aggiunto è ora presente nella pagina.
Selezionare Edit dall'elenco a discesa Display Mode.
La pagina verrà visualizzata in modalità di modifica. I titoli delle aree diventano visibili e viene visualizzato un pulsante per i menu dei verbi, simile a un piccolo triangolo, nella barra del titolo di ogni controllo server presente in un'area WebPartZone. Il menu dei verbi fornisce diverse azioni applicabili dall'utente a un controllo.
Fare clic sul menu dei verbi nel controllo TextDisplayWebPart.
Verrà visualizzato un menu a discesa.
Nel menu dei verbi fare clic sull'opzione Edit.
Verrà visualizzata l'interfaccia utente speciale per la modifica, dichiarata nell'elemento <asp:editorzone>. Mediante questi controlli è possibile modificare il layout e l'aspetto del controllo personalizzato.
Utilizzare l'interfaccia utente di modifica per modificare il titolo del controllo personalizzato, quindi fare clic su Apply per applicare le modifiche.
Posizionare il puntatore del mouse nella barra del titolo del controllo personalizzato. Fare clic sulla barra del titolo e trascinare il controllo da WebPartZone1 in WebPartZone2.
Utilizzare l'elenco a discesa Display Mode per tornare alla modalità di visualizzazione standard.
La pagina risulterà simile alla schermata riportata di seguito.
La pagina dopo avere apportato modifiche nelle varie modalità di visualizzazione
Vedere anche
Attività
Procedura dettagliata: creazione di una pagina Web part
Concetti
Modalità di visualizzazione di pagine Web part