Procedura dettagliata: creazione di una pagina Web part in Visual Web Developer
Aggiornamento: novembre 2007
Questa procedura dettagliata è una dimostrazione pratica dei componenti e delle attività essenziali per la creazione di pagine Web che utilizzano controlli Web part in uno strumento di progettazione di pagine grafico quale Microsoft Visual Studio 2005.
In molte applicazioni Web è utile poter modificare l'aspetto del contenuto nonché consentire agli utenti di selezionare e di disporre il contenuto che desiderano visualizzare. Le Web part ASP.NET vengono utilizzate 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 informazioni preliminari sull'insieme di controlli Web part, vedere Cenni preliminari sul set di controlli Web part.
Durante questa procedura dettagliata viene creata una pagina che utilizza l'insieme di controlli Web part per creare una pagina Web che l'utente può 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 e relativo utilizzo come controllo Web part.
Abilitazione degli utenti a personalizzare il layout dei controlli Web part nella pagina.
Abilitazione degli utenti a modificare l'aspetto di un controllo Web part.
Abilitazione degli utenti a selezionare da un catalogo di controlli Web part disponibili.
Prerequisiti
Per completare questa procedura dettagliata è necessario:
Un sito che possa identificare i singoli utenti. Se si dispone di un sito già configurato con appartenenza ASP.NET, è possibile utilizzarlo per questa procedura dettagliata. In caso contrario, nella procedura dettagliata sono fornite istruzioni sulla modalità di configurazione del sito per l'identificazione con il proprio nome account utente di Windows.
Un ambiente di progettazione grafico per la creazione di pagine Web. In questa procedura dettagliata viene utilizzato Visual Studio 2005.
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 Edition per la memorizzazione dei dati di personalizzazione. In questa procedura dettagliata vengono utilizzati SQL Server Express e il provider SQL predefinito. Se SQL Server Express è già installato, non sarà necessaria alcuna configurazione. SQL Server Express è disponibile con Microsoft Visual Studio 2005 come parte facoltativa dell'installazione oppure può essere scaricato gratuitamente dal sito Web Microsoft. Per utilizzare una versione completa 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.
Creazione e configurazione del sito Web
Questa procedura dettagliata richiede che si disponga di un'identità utente in modo che le impostazioni di Web part possano essere adatte all'utente. Se si dispone già di un sito Web configurato per utilizzare l'appartenenza, si consiglia di utilizzarlo. In caso contrario, è possibile crearne uno nuovo e utilizzare il nome utente di Windows corrente come propria identità utente.
Per creare un nuovo sito Web
In Visual Studio creare un nuovo sito Web ASP.NET.
Per informazioni dettagliate, vedere Procedura dettagliata: creazione di un sito Web con appartenenza e accesso utente.
Creazione di una pagina semplice con Web part
In questa parte della procedura dettagliata viene creata una pagina che utilizza i controlli Web part per la visualizzazione del contenuto statico. Il primo passaggio nell'utilizzo di Web part consiste nella creazione di una pagina con due elementi richiesti. In primo luogo, una pagina Web part richiede un controllo WebPartManager per coordinare tutti i controlli Web part. In secondo luogo, tale pagina richiede una o più aree che sono controlli compositi che contengono la classe WebPart o altri controlli server e occupano una determinata area di una pagina.
.gif "Nota") Nota: |
|---|
Non è necessario eseguire alcuna operazione per attivare la personalizzazione di Web part in quanto è 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, in ASP.NET viene impostato un provider di personalizzazioni predefinito per archiviare le impostazioni di personalizzazione dell'utente. Per ulteriori informazioni sulla personalizzazione, vedere Cenni preliminari sulla personalizzazione di Web part. |
Per creare una pagina che contenga i controlli Web part
Chiudere la pagina predefinita e aggiungere una nuova pagina denominata WebPartsDemo.aspx.
Passare alla visualizzazione Progettazione.
Scegliere Strumenti visivi dal menu Visualizza, quindi assicurarsi che siano selezionate le opzioni Controlli ASP.NET non visivi e Dettagli.
In questo modo è possibile visualizzare i tag e i controlli del layout che non presentano un'interfaccia utente.
Aggiungere una nuova riga prima dell'elemento body.
Nota:In caso di problemi, selezionare l'elemento div e preme ESC due volte per selezionare l'elemento body, premere il tasto freccia SINISTRA, quindi premere INVIO.
Posizionare il punto di inserimento prima del carattere di nuova riga.
Selezionare Intestazione 1 dall'elenco Formato blocco della barra degli strumenti.
Nell'intestazione aggiungere il testo Pagina di dimostrazione di Web part.
Dalla scheda WebPart della Casella degli strumenti, trascinare un controllo WebPartManager nella pagina, posizionandolo tra il carattere di nuova riga e il tag <div> di apertura.
Il controllo WebPartManager non esegue il rendering di alcun output e viene visualizzato come casella grigia nell'area di progettazione.
Posizionare il punto di inserimento all'interno dell'elemento div.
Selezionare Inserisci tabella dal menu Tabella per specificare una tabella con una riga e tre colonne, quindi scegliere OK.
Trascinare un controllo WebPartZone nella colonna della tabella di sinistra. Fare clic con il pulsante destro del mouse sul controllo WebPartZone, scegliere Proprietà e impostare le seguenti proprietà:
ID: SidebarZone
HeaderText: Sidebar
Trascinare un secondo controllo WebPartZone nella colonna della tabella centrale e impostare le seguenti proprietà:
ID: MainZone
HeaderText: Main
Salvare il file, ma non chiuderlo ancora.
La pagina presenta a questo punto due aree distinte controllabili separatamente. Tuttavia nessuna delle due aree presenta del contenuto, quindi la creazione di quest'ultimo è il passaggio successivo. Per questa procedura dettagliata sono utilizzati i controlli Web part che visualizzano solo contenuto statico.
Il layout di un'area Web part è specificata da un elemento zonetemplate. All'interno del modello di area è possibile aggiungere un qualsiasi controllo ASP.NET, se si tratta di un controllo Web part personalizzato, un controllo utente o un controllo server esistente. Tenere presente che si sta utilizzando il controllo Label e che si sta aggiungendo semplicemente un testo statico. Quando si inserisce un controllo server regolare in un'area WebPartZone, ASP.NET considera il controllo come un controllo Web part in fase di esecuzione che attiva le funzionalità Web part nel controllo.
Per creare il contenuto dell'area Main
In visualizzazione Progettazione, trascinare un controllo Label dalla scheda Standard della Casella degli strumenti all'interno dell'area di contenuto della zona la cui proprietà ID è impostata su MainZone.
Passare alla visualizzazione Origine.
Tenere presente che un elemento zonetemplate è stato aggiunto per includere il controllo Label in MainZone.
Aggiungere un attributo denominato title all'elemento asp:label e impostare il relativo valore su Content. Rimuovere l'attributo Text="Label" dall'elemento asp:label. All'interno dell'elemento asp:label, aggiungere un testo quale <h2>Welcome to my Home Page</h2>. Il codice dovrebbe risultare analogo al seguente:
<asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> <asp:label id="Label1" title="Content"> <h2>Welcome to My Home Page</h2> </asp:label> </zonetemplate> </asp:webpartzone>Salvare il file.
Successivamente creare un controllo utente che possa anche essere aggiunto alla pagina come controllo Web part.
Per creare un controllo utente
Aggiungere al sito un nuovo controllo utente Web che funzioni da controllo di ricerca denominato SearchUserControl.ascx, accertandosi che l'opzione Inserisci codice in file separato sia deselezionata.
Nota:Il controllo utente per questa procedura dettagliata non implementa la funzionalità di ricerca effettiva; viene utilizzato solo per dimostrare le funzionalità Web part.
Passare alla visualizzazione Progettazione.
Dalla scheda Standard della Casella degli strumenti trascinare un controllo TextBox nella pagina.
Posizionare il punto di inserimento dopo la casella di testo appena aggiunta e premere INVIO per aggiungere una nuova riga.
Trascinare un controllo Button nella pagina sulla nuova riga sotto la casella di testo appena aggiunta.
Passare alla visualizzazione Origine e assicurarsi che il codice sorgente per il controllo utente risulti analogo all'esempio riportato di seguito.
<%@ control language="VB" classname="SearchUserControl" %> <asp:textbox id="TextBox1"></asp:textbox> <br /> <asp:button id="Button1" text="Search" /><%@ control language="C#" classname="SearchUserControl" %> <asp:textbox id=" TextBox1"></asp:textbox> <br /> <asp:button id=" Button1" text="Search" />Salvare e chiudere il file.
.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. L'input dell'utente in una pagina Web potrebbe infatti contenere script client dannosi. Per impostazione predefinita, le pagine Web ASP.NET verificano che l'input dell'utente non includa script o elementi HTML. Se questa convalida è attivata, non occorrerà effettuare un controllo esplicito per escludere che l'input utente contenga script o elementi HTML. Per ulteriori informazioni, vedere Cenni preliminari sugli attacchi tramite script.
A questo punto è possibile aggiungere controlli Web part all'area Sidebar. Vengono aggiunti due controlli a tale area: uno contenente un elenco di collegamenti e un altro che è il controllo utente creato precedentemente nella procedura dettagliata. I collegamenti sono aggiunti come un controllo server Label standard, in modo analogo alla creazione del testo statico nell'area Main. Tuttavia, sebbene i singoli controlli server contenuti nel controllo utente possano essere contenuti direttamente nell'area (come il controllo label), in questo caso non lo sono. Sono parte invece del controllo utente creato nella procedura precedente. In questo modo viene illustrato un modo comune per creare un package di controlli e funzionalità supplementari in un controllo utente e quindi fare riferimento a tale controllo in un'area come controllo Web part.
In fase di esecuzione l'insieme di controlli Web part include entrambi i controlli con i controlli GenericWebPart. Quando un controllo GenericWebPart include un controllo server Web, il controllo della parte generica è il controllo 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 aggiungere i controlli Web part all'area Sidebar
Aprire la pagina WebPartsDemo.aspx.
Passare alla visualizzazione Progettazione.
Trascinare la pagina del controllo utente creata, SearchUserControl.ascx, da Esplora soluzioni nell'area la cui proprietà ID è impostata su SidebarZone.
Salvare la pagina WebPartsDemo.aspx.
Passare alla visualizzazione Origine.
All'interno dell'elemento asp:webpartzone relativo a SidebarZone aggiungere un elemento asp:label contenente collegamenti e nel tag del controllo utente aggiungere un attributo Title con il valore Search, come illustrato nell'esempio seguente:
<asp:WebPartZone id="SidebarZone" headertext="Sidebar"> <zonetemplate> <asp:label id="linksPart" title="My Links"> <a href="https://www.asp.net">ASP.NET site</a> <br /> <a href="https://www.gotdotnet.com">GotDotNet</a> <br /> <a href="https://www.contoso.com">Contoso.com</a> <br /> </asp:label> <uc1:SearchUserControl id="searchPart" title="Search" /> </zonetemplate> </asp:WebPartZone>Salvare e chiudere il file.
È ora possibile eseguire il test della pagina.
Per eseguire il test della pagina
Caricare la pagina in un browser.
Nella pagina sono visualizzate le due aree. Nell'immagine riportata di seguito è illustrata la pagina.
Pagina dimostrativa Web part con due aree
.gif)
Nella barra del titolo di ciascun controllo si trova una freccia giù che fornisce l'accesso a un menu di verbi di operazioni disponibili che si possono effettuare in un controllo. Fare clic sul menu di verbi per uno dei controlli, scegliere il verbo Riduci a icona e notare che il controllo viene ridotto a icona. Dal menu di verbi, fare clic su Ripristina e il controllo ritorna alle dimensioni normali.
Abilitazione degli utenti a modificare le pagine e a cambiare il layout
Le Web part forniscono agli utenti la possibilità di modificare il layout dei controlli Web part trascinandoli da un'area all'altra. Oltre allo spostamento dei controlli WebPart da un'area all'altra, è possibile consentire agli utenti di modificare diverse caratteristiche dei controlli, tra cui l'aspetto, il layout e il comportamento. L'insieme di controlli Web part fornisce la 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 la modifica del percorso di un controllo WebPart, la modifica delle proprietà di un controllo si basa sulla personalizzazione ASP.NET per salvare le modifiche apportate dagli utenti.
In questa parte della procedura dettagliata viene consentito agli utenti anche di modificare le caratteristiche di base di qualsiasi controllo WebPart nella pagina. Per attivare 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 della pagina
In Visual Studio scegliere Nuovo dal menu File, quindi File.
Nella finestra di dialogo Aggiungi nuovo elemento selezionare Controllo utente Web. Denominare il nuovo file DisplayModeMenu.ascx. Deselezionare la casella Inserisci codice in file separato.
Scegliere Aggiungi per creare il nuovo controllo.
Passare alla visualizzazione Origine.
Rimuovere tutto il codice presente nel nuovo file e incollare nel codice riportato di seguito. Questo codice del controllo utente consente di utilizzare le funzionalità dell'insieme di controlli Web part che permettono a una pagina di modificare la relativa visualizzazione o modalità di visualizzazione e inoltre consente di modificare l'aspetto fisico e il layout della pagina mentre si è in 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" /> <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><%@ 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" /> <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>Salvare il file.
Nota:Sebbene questo controllo utente possa consentire agli utenti della pagina Web part di passare dalla modalità di condivisione a quella di personalizzazione utente, la funzionalità di personalizzazione prevede che l'utente disponga delle autorizzazioni appropriate, come specificato nel file Web.config. Poiché in questa procedura dettagliata non viene illustrato come concedere tali autorizzazioni, la funzionalità non è attivata. Per questo motivo, i pulsanti di opzione dell'utente e condivisi sul controllo utente sono nascosti quando si esegue la pagina. Per ulteriori informazioni sulla personalizzazione, vedere Personalizzazione di Web part.
Per consentire agli utenti di modificare il layout
Aprire la pagina WebPartsDemo.aspx.
Passare alla visualizzazione Progettazione.
Posizionare il punto di inserimento subito dopo il controllo WebPartManager aggiunto in precedenza. Premere INVIO per creare una riga vuota dopo il controllo WebPartManager.
Trascinare il controllo utente appena creato (DisplayModeMenu.ascx) nella pagina WebPartsDemo.aspx e rilasciarlo nella riga vuota.
Trascinare un controllo EditorZone dalla scheda WebPart della Casella degli strumenti alla rimanente cella della tabella aperta nella pagina WebPartsDemo.aspx.
Dalla scheda WebPart della Casella degli strumenti, trascinare un controllo AppearanceEditorPart e un controllo LayoutEditorPart nel controllo EditorZone.
Passare alla visualizzazione Origine.
Il codice risultante nella cella della tabella risulterà simile al codice riportato di seguito.
<td valign="top"> <asp:EditorZone ID="EditorZone1" > <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" /> </ZoneTemplate> </asp:EditorZone> </td>Nota:Anche se i controlli AppearanceEditorPart e LayoutEditorPart sono utilizzati in questa procedura dettagliata, i controlli BehaviorEditorPart e PropertyGridEditorPart non lo sono in quanto richiedono l'installazione 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 di cambiare il layout di pagina ed è stato fatto riferimento al 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.
Scegliere Modifica nel menu Modalità di visualizzazione.
Verranno visualizzati i titoli delle aree.
Trascinare il controllo My Links con la relativa barra del titolo dall'area Sidebar alla parte inferiore dell'area Main.
La pagina risulterà simile alla seguente:
Pagina dimostrativa Web part con il controllo My Links spostato
.gif)
Fare clic su Modalità di visualizzazione, quindi su Sfoglia.
La pagina viene aggiornata, i nomi delle aree non sono più visualizzati e il controllo My Links rimane dove posizionato.
Per verificare che la personalizzazione sia stata eseguita, chiudere il browser e quindi caricare di nuovo la pagina. Le modifiche apportate sono state salvate per le successive sessioni del browser.
Scegliere Modifica nel menu Modalità di visualizzazione.
Ogni controllo nella pagina viene visualizzato con una freccia giù nella relativa barra del titolo che contiene il menu a discesa di verbi.
Fare clic sulla freccia per visualizzare il menu di verbi nel controllo My Links, quindi scegliere Modifica.
Verrà visualizzato il controllo EditorZone contenente i controlli EditorPart che sono stati aggiunti.
Nella sezione Aspetto del controllo di modifica, sostituire Titolo con My Favorites. Nell'elenco Tipo di colore selezionare Solo titolo, quindi fare clic su Applica.
Nell'immagine riportata di seguito è illustrata la pagina nella modalità di modifica.
Pagina dimostrativa Web part nella modalità Modifica
.gif)
Scegliere Sfoglia dal menu Modalità di visualizzazione per tornare alla modalità di visualizzazione.
Il controllo presenta a questo punto un titolo aggiornato e nessun bordo, come illustrato nell'immagine riportata di seguito.
Pagina dimostrativa Web part modificata
.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 Web o utente personalizzato, è possibile sostituirlo al contenuto statico. |
Per consentire agli utenti l'aggiunta di Web part in fase di esecuzione
Aprire la pagina WebPartsDemo.aspx.
Passare alla visualizzazione Progettazione.
Dalla scheda WebPart della Casella degli strumenti, trascinare un controllo CatalogZone nella colonna di destra della tabella, sotto il controllo EditorZone.
Entrambi i controlli possono trovarsi nella stessa cella della tabella in quanto non verranno visualizzati contemporaneamente.
Nel riquadro Proprietà, assegnare la stringa Add Web Parts alla proprietà HeaderText del controllo CatalogZone.
Dalla scheda WebPart della Casella degli strumenti, trascinare un controllo DeclarativeCatalogPart nell'area del contenuto del controllo CatalogZone.
Fare clic sulla freccia nell'angolo in alto a destra del controllo DeclarativeCatalogPart per esporre il relativo menu Attività e selezionare Modifica modelli.
Dalla scheda Standard della Casella degli strumenti, trascinare un controllo FileUpload e un controllo Calendar nella sezione WebPartsTemplate del controllo DeclarativeCatalogPart.
Passare alla visualizzazione Origine ed esaminare il codice sorgente dell'elemento asp:catalogzone.
Notare che il controllo DeclarativeCatalogPart contiene un elemento webpartstemplate con i due controlli server racchiusi che potranno essere aggiunti alla pagina dal catalogo.
Nota:Se si dispone di un controllo personalizzato, questo è il posto per sostituirlo a uno dei controlli server nell'esempio, sebbene ciò richieda passaggi oltre all'ambito di questa procedura dettagliata. Per ulteriori informazioni, vedere il codice di esempio nella documentazione per la classe WebPart.
Aggiungere una proprietà Title a ognuno dei controlli aggiunti al catalogo, utilizzando il valore di stringa illustrato per ciascun titolo nell'esempio di codice riportato di seguito. Anche se il titolo non è una proprietà che si può normalmente impostare su questi due controlli server in fase di progettazione, quando un utente aggiunge tali controlli a un'area WebPartZone dal catalogo in fase di esecuzione, questi sono ognuno incluso con un controllo GenericWebPart. In questo modo possono fungere da controlli Web part in modo che potranno visualizzare i titoli.
Il codice per i due controlli contenuti nel controllo DeclarativeCatalogPart risulterà analogo al seguente:
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" > <WebPartsTemplate> <asp:Calendar ID="Calendar1" title="My Calendar" /> <asp:FileUpload ID="FileUpload1" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart>Salvare la pagina.
È ora possibile eseguire il test del catalogo.
Per eseguire il test del catalogo Web part
Caricare la pagina in un browser.
Scegliere Catalogo nel menu Modalità di visualizzazione.
Verrà visualizzato il catalogo denominato Add Web Parts.
Trascinare il controllo My Favorites dall'area Main di nuovo nella parte superiore dell'area Sidebar.
Nel catalogo Add Web Parts selezionare entrambe le caselle di controllo, quindi Main dall'elenco delle aree disponibili.
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:
Controlli aggiunti all'area Main dal catalogo
.gif)
Scegliere Sfoglia nel menu Modalità di visualizzazione.
Il catalogo non sarà più visibile e la pagina verrà aggiornata.
Chiudere il browser e quindi 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 altre funzionalità Web part più sofisticate. Suggerimenti per un'ulteriore analisi:
- Creare controlli Web part che offrono funzionalità più avanzate di Web part statici di questa procedura dettagliata. È 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
Concetti
Cenni preliminari su Web part ASP.NET