Procedura dettagliata: creazione di una pagina Web part
Aggiornamento: novembre 2007
Questa procedura dettagliata è una dimostrazione pratica dei componenti e delle attività principali utilizzati per la creazione di pagine Web che utilizzano controlli Web part.
In molte applicazioni Web è utile consentire agli utenti di selezionare e disporre il contenuto come desiderano. La funzionalità Web part ASP.NET è costituita da un insieme di controlli per la creazione di pagine Web che presentano contenuto modulare e consentono agli utenti di modificare l'aspetto e il contenuto in base alle proprie esigenze. Per un'introduzione generale alle Web part, vedere Cenni preliminari su Web part ASP.NET. Per una descrizione dei componenti principali dell'insieme di controlli Web part, molti dei quali vengono utilizzati in questa procedura dettagliata, vedere Cenni preliminari sul set di controlli Web part.
Durante questa procedura dettagliata vengono utilizzati controlli Web part per creare una pagina Web che gli utenti possono modificare o personalizzare. Di seguito sono elencate le attività illustrate nella procedura dettagliata:
Aggiunta di controlli Web part a una pagina.
Creazione di un controllo utente personalizzato utilizzato come controllo Web part.
Abilitazione della personalizzazione del layout dei controlli Web part nella pagina da parte degli utenti.
Abilitazione degli utenti a modificare l'aspetto di un controllo Web part.
Abilitazione della selezione da un catalogo di controlli Web part disponibili da parte degli utenti.
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 un sito o di una directory virtuale, vedere Procedura: creare e configurare directory virtuali in IIS 5.0 e 6.0 o Procedura: creare e configurare siti Web ASP.NET locali in IIS 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 Standard Edition (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.
Creazione di una pagina semplice con controlli Web part
In questa parte della procedura dettagliata verrà creata una pagina che utilizza Web part per mostrare contenuto statico.
.gif "Nota") Nota: |
|---|
Non è necessario intraprendere alcuna azione per attivare la personalizzazione di Web part, poiché è già attivata per impostazione predefinita per l'insieme di controlli Web part. Quando si esegue per la prima volta una pagina Web part in un sito, ASP.NET imposta un provider di personalizzazioni predefinito per memorizzare le impostazioni di personalizzazione dell'utente. Il provider predefinito utilizza un database creato in una sottodirectory della directory del sito. Per ulteriori informazioni sulla personalizzazione, vedere Cenni preliminari sulla personalizzazione di Web part. |
Per creare una pagina Web
Nell'editor di testo creare un nuovo file e aggiungere la seguente dichiarazione di pagina all'inizio del file.
<%@ page language="VB" %><%@ page language="C#" %>Sotto la dichiarazione di pagina immettere il codice per creare una struttura di pagina completa come illustrato nell'esempio di codice riportato di seguito.
La pagina include una tabella vuota con una riga e tre colonne. La tabella conterrà i controlli Web part che verranno aggiunti in seguito.
<html> <head > <title>Web Parts Page</title> </head> <body> <h1>Web Parts Demonstration Page</h1> <form id="form1"> <br /> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> </tr> </table> </form> </body> </html>Denominare il file WebPartsDemo.aspx e salvarlo nella directory del sito Web.
Il passaggio successivo consiste nella configurazione delle aree. Le aree sono controlli compositi che occupano una specifica regione della pagina e contengono i controlli Web part.
Per aggiungere aree alla pagina
Appena sotto l'elemento <form> nella pagina, aggiungere un elemento <asp:webpartmanager> come illustrato nell'esempio riportato di seguito.
<asp:webpartmanager id="WebPartManager1" />Il controllo WebPartManager è necessario in ogni pagina che utilizza controlli Web part.
Aggiungere un elemento <asp:webpartzone> all'interno del primo elemento <td> nella tabella e assegnare i valori delle proprietà come illustrato nell'esempio di codice riportato di seguito.
Si noti che l'elemento <asp:webpartzone> contiene anche un elemento <zonetemplate> in cui vengono inseriti i controlli Web part.
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <asp:webpartzone id="SideBarZone" headertext="Sidebar"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>Aggiungere un elemento <asp:webpartzone> all'interno del secondo elemento <td> nella tabella e assegnare i valori delle proprietà come illustrato nell'esempio di codice riportato di seguito:
<td valign="top"> <asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>Salvare il file WebPartsDemo.aspx.
La pagina presenta a questo punto due aree controllabili separatamente. Tuttavia nessuna delle due aree presenta del contenuto, quindi la creazione di quest'ultimo è il passaggio successivo. In questa procedura dettagliata si utilizzano controlli Web part che visualizzano solo contenuto statico.
Il layout dell'area Web part è specificato da un elemento <zonetemplate>. All'interno del modello di area è possibile aggiungere qualsiasi controllo server Web, ossia un controllo Web part personalizzato, un controllo utente o un controllo server esistente. In questa procedura dettagliata verrà utilizzato il controllo server Label al cui interno verrà aggiunto del semplice testo statico. Quando si inserisce un controllo server ASP.NET standard in un'area WebPartZone, ASP.NET lo considera un controllo Web part in fase di esecuzione, consentendo di applicare la maggior parte delle funzionalità Web part a tale controllo server standard.
Per creare il contenuto delle aree
Nell'elemento <zonetemplate> per l'area Main aggiungere un elemento <asp:label> con del contenuto, come illustrato nell'esempio riportato di seguito:
<asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> <asp:label id="contentPart" title="Content"> <h2>Welcome to My Home Page</h2> <p>Use links to visit my favorite sites!</p> </asp:label> </zonetemplate> </asp:webpartzone>Salvare il file WebPartsDemo.aspx.
Creare un nuovo file nell'editor di testo.
Il file conterrà un controllo utente che potrà essere aggiunto alla pagina come controllo Web part.
All'inizio del nuovo file aggiungere una dichiarazione di controllo come illustrato nell'esempio riportato di seguito.
<%@ control language="VB" classname="SearchUserControl" %><%@ control language="C#" classname="SearchUserControl" %>Nota:Il controllo di ricerca di questa procedura dettagliata non implementa l'effettiva funzionalità di ricerca, in quanto viene utilizzato solo per illustrare le funzionalità Web part.
Sotto la dichiarazione del controllo, aggiungere una coppia di tag <script> e inserire all'interno degli stessi del codice che crea una proprietà personalizzabile.
La proprietà ResultsPerPage dispone di un attributo Personalizable e consente agli utenti del controllo di personalizzare il numero di risultati di ricerca da restituire per pagina, purché sia stato fornito un controllo di modifica con l'interfaccia utente per consentire la modifica dell'impostazione in visualizzazione di progettazione.
Assicurarsi che il codice per il controllo sia analogo a quello riportato nell'esempio seguente:
<%@ control language="VB" classname="SearchUserControl" %> <script > Private results As Integer <Personalizable()> _ Property ResultsPerPage() As Integer Get Return results End Get Set(ByVal value As Integer) results = value End Set End Property </script><%@ control language="C#" classname="SearchUserControl" %> <script > private int results; [Personalizable] public int ResultsPerPage { get {return results;} set {results = value;} } </script>Aggiungere una casella di testo e un pulsante sotto l'elemento <script> per fornire l'interfaccia utente per un controllo di ricerca, come illustrato nell'esempio di codice riportato di seguito:
<asp:textbox id="inputBox"></asp:textbox> <br /> <asp:button id="searchButton" text="Search" />.gif "Nota sulla sicurezza")
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.
Denominare il file SearchUserControlVB.ascx o SearchUserControlCS.ascx (a seconda del linguaggio utilizzato) e salvarlo nella stessa directory della pagina WebPartsDemo.aspx.
All'area Sidebar verranno aggiunti due controlli, uno contiene un elenco di collegamenti e l'altro è il controllo utente creato nella procedura precedente. I collegamenti vengono aggiunti come un singolo controllo server Label standard, con una modalità simile a quella utilizzata per la creazione del testo statico per l'area Main. Tuttavia, sebbene i singoli controlli server contenuti nel controllo utente possano essere inclusi direttamente nell'area, in questo caso non lo sono. Essi fanno invece parte del controllo utente creato nella procedura precedente. Si tratta di una procedura comunemente utilizzata per creare un package con controlli e funzionalità extra in un controllo utente e per fare quindi riferimento al controllo utente in un'area come fosse un controllo Web part.
In fase di esecuzione ASP.NET incapsula entrambi i controlli con i controlli GenericWebPart. Quando un controllo GenericWebPart incapsula un controllo server Web, il controllo Web part generico è quello padre ed è possibile accedere al controllo server tramite la proprietà ChildControl del controllo padre. L'utilizzo di controlli Web part generici consente ai controlli server Web standard di avere lo stesso comportamento di base e gli stessi attributi dei controlli Web part derivati dalla classe WebPart.
Per creare il contenuto dell'area Sidebar
Aprire la pagina WebPartsDemo.aspx nell'editor di testo.
All'inizio della pagina, subito sotto la dichiarazione di pagina, aggiungere la seguente dichiarazione per fare riferimento al controllo utente appena creato:
<%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolvb.ascx" %><%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolcs.ascx" %>All'interno dell'elemento <zonetemplate> per l'area Sidebar aggiungere un controllo Label contenente diversi collegamenti. Sotto il controllo fare riferimento al controllo utente creato in precedenza, come illustrato nell'esempio di codice riportato di seguito:
<asp:webPartZone id="SidebarZone" headertext="Sidebar"> <zonetemplate> <asp:label id="linksPart" title="Links"> <a href="www.asp.net">ASP.NET site</a> <br /> <a href="www.gotdotnet.com">GotDotNet</a> <br /> <a href="www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" title="Search" /> </zonetemplate> </asp:WebPartZone>Salvare il file WebPartsDemo.aspx.
È ora possibile eseguire il test della pagina.
Per eseguire il test della pagina
Caricare la pagina in un browser.
La pagina visualizza le due aree. Ogni controllo della pagina è visualizzato con una freccia rivolta verso il basso nella barra del titolo, che consente di accedere a un menu a discesa detto menu dei verbi. I verbi sono azioni che un utente può eseguire in relazione a un controllo server, ad esempio la chiusura, la riduzione a icona o la modifica di un controllo. Ogni voce del menu dei verbi è costituita da un verbo. Nell'immagine riportata di seguito è illustrata la pagina.
.gif)
Fare clic sulla freccia rivolta verso il basso nella barra del titolo di un controllo per visualizzare il menu dei verbi e quindi fare clic sul collegamento Minimize.
Il controllo viene ridotto a icona.
Dal menu dei verbi scegliere Restore.
Sono stati così illustrati i differenti stati di visualizzazione dei controlli Web part.
Abilitazione della modifica delle pagine e del layout da parte degli utenti
Gli utenti possono modificare il layout dei controlli Web part trascinandoli da una zona all'altra. È inoltre possibile consentire agli utenti di modificare caratteristiche del controllo quali l'aspetto, il layout e il comportamento. L'insieme di controlli Web part fornisce le funzionalità di modifica di base per i controlli WebPart. Anche se non verrà effettuato in questa procedura dettagliata, è però possibile creare controlli dell'editor personalizzati che consentono agli utenti di modificare le funzionalità dei controlli WebPart. Come per lo spostamento di un controllo WebPart, la modifica delle proprietà utilizza la personalizzazione ASP.NET per salvare le modifiche apportate dall'utente.
In questa parte della procedura dettagliata viene consentito agli utenti di modificare le caratteristiche di base di qualsiasi controllo WebPart nella pagina.
Per creare un controllo utente che consenta la modifica del layout della pagina
Creare un nuovo file in un editor di testo e copiarvi il codice riportato di seguito.
Questo codice utilizza funzionalità dell'insieme di controlli Web part che consentono di modificare la modalità di visualizzazione della pagina. Il codice permette inoltre di modificare il layout e l'aspetto fisico della pagina quando sono attive determinate modalità di visualizzazione.
<%@ control language="vb" classname="DisplayModeMenuVB"%> <script > ' Use a field to reference the current WebPartManager control. 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 drop-down list 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 has permission, 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> <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" /> <div> <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" /> </div> <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><%@ control language="C#" classname="DisplayModeMenuCS"%> <script > // 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" 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" /> <div> <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" /> </div> <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 Displaymodemenu.ascx e salvarlo nella directory utilizzata per le altre pagine.
Per consentire agli utenti di modificare il layout
Nella pagina WebPartsDemo.aspx aggiungere una direttiva <register> per registrare il nuovo controllo utente nella pagina:
<%@ register TagPrefix="uc2" TagName="DisplayModeMenuVB" Src="DisplayModeMenu.ascx" %><%@ register TagPrefix="uc2" TagName="DisplayModeMenuCS" Src="DisplayModeMenu.ascx" %>Aggiungere un riferimento dichiarativo al controllo utente immediatamente sotto l'elemento <asp:webpartmanager>:
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1" /><uc2:DisplayModeMenuCS ID="DisplayModeMenu1" />Aggiungere un elemento <asp:editorzone> all'interno del terzo elemento <td> della tabella. Aggiungere un elemento <zonetemplate>, un elemento <asp:appearanceeditorpart> e un elemento <asp:layouteditorpart>.
Al termine, il codice sarà simile a quello riportato nell'esempio seguente:
<td valign="top"> <asp:editorzone id="EditorZone1" > <zonetemplate> <asp:appearanceeditorpart id="AppearanceEditorPart1" /> <asp:layouteditorpart id="LayoutEditorPart1" /> </zonetemplate> </asp:editorzone> </td>Nota:Due controlli aggiuntivi, i controlli BehaviorEditorPart e PropertyGridEditorPart, non vengono utilizzati perché richiedono una configurazione che va oltre l'ambito di questa procedura dettagliata.
Salvare il file WebPartsDemo.aspx.
È stato creato un controllo utente che consente di modificare le modalità di visualizzazione e il layout della pagina ed è stato aggiunto un riferimento a tale controllo nella pagina Web principale.
A questo punto è possibile eseguire il test delle funzionalità di modifica delle pagine e del layout.
Per eseguire il test della modifica del layout
Caricare la pagina in un browser.
Fare clic sull'elenco a discesa Display Mode e selezionare Edit.
Verranno visualizzati i titoli delle aree.
Trascinare la barra del titolo del controllo Links dall'area Sidebar nella parte inferiore dell'area Main.
La pagina risulterà simile alla schermata riportata di seguito:
.gif)
Fare clic sull'elenco a discesa Display Mode e selezionare Browse.
La pagina verrà aggiornata, i nomi delle aree non saranno più visibili ma il controllo Links rimarrà nella stessa posizione.
Chiudere il browser e quindi caricare di nuovo la pagina.
Le modifiche apportate vengono salvate per sessioni future del browser e ciò è un segno che la personalizzazione funziona.
Scegliere Modifica nel menu Modalità di visualizzazione.
Fare clic sulla freccia per visualizzare il menu di verbi nel controllo Links e quindi scegliere il verbo Edit.
Verrà visualizzato il controllo EditorZone contenente i controlli EditorPart che sono stati aggiunti.
Nella sezione Appearance del controllo di modifica, sostituire Title con "My Favorites", scegliere Title Only dall'elenco a discesa Chrome Type e quindi fare clic su Apply.
Nella schermata riportata di seguito è illustrata la pagina revisionata, sempre in modalità di modifica:
.gif)
Fare clic sull'elenco a discesa Display Mode e selezionare Browse per tornare alla modalità di visualizzazione standard.
Il controllo presenta a questo punto un titolo aggiornato e nessun bordo, come illustrato nella schermata riportata di seguito:
.gif)
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 tal fine, configurare la pagina con un catalogo Web part contenente un elenco dei controlli Web part che si desidera rendere disponibili agli utenti.
| Nota: |
|---|
In questa procedura dettagliata verrà creato un modello contenente i controlli FileUpload e Calendar che consentirà di eseguire il test della funzionalità di base del catalogo, sebbene i controlli Web part non abbiano alcuna funzionalità reale. Se si dispone di un controllo utente o Web personalizzato, è possibile sostituirlo al contenuto statico. |
Per consentire agli utenti l'aggiunta di Web part in fase di esecuzione
Nel file WebPartsDemo.aspx aggiungere il codice riportato di seguito:
Un elemento <asp:catalogzone> nella terza colonna della tabella, appena sotto l'elemento <asp:editorzone>.
Un elemento <zonetemplate> e, all'interno di questo, un elemento <asp:declarativecatalogpart> e un elemento <webpartstemplate>.
Un elemento <asp:fileupload> e un elemento <asp:calendar>.
Il codice dovrebbe risultare simile a quello riportato nell'esempio seguente:
<asp:catalogzone id="CatalogZone1" headertext="Add Web Parts"> <zonetemplate> <asp:declarativecatalogpart id="catalogpart1" Title="My Catalog"> <webPartsTemplate> <asp:fileupload id="upload1" title="Upload Files" /> <asp:calendar id="cal1" Title="Team Calendar" /> </webPartsTemplate> </asp:declarativecatalogpart> </zonetemplate> </asp:catalogzone>Nota:I controlli EditorZone e CatalogZone possono risiedere entrambi nella stessa cella di tabella perché non vengono visualizzati contemporaneamente.
Salvare il file WebPartsDemo.aspx.
È ora possibile eseguire il test del catalogo.
Per eseguire il test del catalogo Web part
Caricare la pagina in un browser.
Fare clic sull'elenco a discesa Display Mode e selezionare Catalog.
Verrà visualizzato il catalogo Add Web Parts.
Trascinare il controllo My Favorites dall'area Main nella parte superiore dell'area Sidebar.
Nel catalogo Add Web Parts selezionare entrambe le caselle di controllo e quindi Main dall'elenco a discesa Add to.
Nel catalogo fare clic su Add.
I controlli verranno aggiunti all'area Main. Nella pagina è possibile aggiungere più istanze di controlli del catalogo.
Nella seguente immagine è riportata la pagina con il controllo per il caricamento del file e il calendario nell'area Main:
.gif)
Fare clic sull'elenco a discesa Display Mode e selezionare Browse.
Il catalogo non sarà più visibile e la pagina verrà aggiornata.
Chiudere il browser. Caricare di nuovo la pagina.
Le modifiche apportate saranno ancora presenti.
Passaggi successivi
In questa procedura dettagliata sono stati illustrati i principi di base sull'utilizzo di controlli Web part semplici in una pagina Web ASP.NET. È possibile tuttavia continuare utilizzando funzionalità Web part più sofisticate. È ad esempio possibile creare controlli Web part come controlli utente o personalizzati. Per informazioni dettagliate, vedere la documentazione della classe WebPart.
Vedere anche
Attività
Procedura dettagliata: creazione di una pagina Web part in Visual Web Developer
Concetti
Cenni preliminari su Web part ASP.NET