Procédure pas à pas : création d'une page WebPart
Mise à jour : novembre 2007
Cette procédure pas à pas est une démonstration pratique des composants et des tâches essentiels pour créer des pages Web qui utilisent des contrôles WebPart.
Dans de nombreuses applications Web, il est utile de permettre aux utilisateurs de sélectionner et d'organiser le contenu qu'ils souhaitent afficher. La fonctionnalité WebPart ASP.NET est composé d'un ensemble de contrôles de création de pages Web qui présentent un contenu modulaire et qui permet aux utilisateurs de modifier l'apparence et le contenu pour l'adapter à leurs préférences. Pour obtenir une introduction générale aux WebParts, consultez Vue d'ensemble des WebParts ASP.NET. Pour obtenir une description des composants principaux dans le jeu de contrôles WebPart, dont plusieurs sont utilisés dans cette procédure pas à pas, consultez Vue d'ensemble de jeu de composants WebPart.
Au cours de cette procédure pas à pas, vous utilisez des contrôles WebPart pour créer une page Web que les utilisateurs peuvent modifier ou personnaliser. Cette procédure pas à pas illustre les tâches suivantes :
Ajouter des contrôles WebPart à une page.
Créer un contrôle utilisateur personnalisé et l'utiliser en tant que contrôle WebPart.
Autoriser des utilisateurs à personnaliser la disposition des contrôles WebPart sur la page.
Autoriser les utilisateurs à modifier l'apparence d'un contrôle WebPart.
Autoriser les utilisateurs à sélectionner dans un catalogue de contrôles WebPart disponibles.
Composants requis
Pour exécuter cette procédure pas à pas, vous devrez utiliser :
installer et configurer Internet Information Services (IIS) sur l'ordinateur qui hébergera le site. Pour plus d'informations sur l'installation et la configuration d'IIS, consultez la documentation de l'aide IIS incluse avec l'installation ou la documentation IIS en ligne sur le site Microsoft TechNet (en anglais) (Ressources techniques d'Internet Information Services 6.0).
Site Web ASP.NET qui peut identifier les utilisateurs individuels. Si vous l'avez déjà configuré, vous pouvez l'utiliser comme point de départ de cette procédure pas à pas. Sinon, pour plus d'informations sur la création d'un répertoire ou d'un site virtuel, consultez Comment : créer et configurer des répertoires virtuels dans IIS 5.0 et 6.0 ou Comment : créer et configurer des sites Web ASP.NET locaux dans IIS 6.0.
Base de données et fournisseur de personnalisations configurés. La personnalisation des WebParts est activée par défaut et elle utilise le fournisseur de personnalisations SQL (SqlPersonalizationProvider) avec Microsoft SQL Server Édition Standard pour stocker des données de personnalisation. Cette procédure pas à pas utilise SSE et le fournisseur SQL par défaut. Si SSE est installé, aucune configuration n'est requise. SSE est disponible avec Microsoft Visual Studio 2005 en tant que partie facultative de l'installation ou en tant que téléchargement libre. Pour plus d'informations, consultez la page Web Microsoft SQL Server 2005 Express Edition. Pour utiliser l'une des versions complètes de SQL Server, vous devez installer et configurer une base de données des services d'application ASP.NET ainsi que le fournisseur de personnalisations SQL pour la connexion à cette base de données. Pour plus d'informations, consultez Création et configuration de la base de données des services d'application pour SQL Server. Vous pouvez également créer et configurer un fournisseur personnalisé à utiliser avec d'autres solutions de stockage ou bases de données non-SQL. Pour plus d'informations et pour obtenir un exemple de code, consultez Implémentation d'un fournisseur d'appartenances.
Création d'une page simple avec des WebParts
Dans cette partie de la procédure pas à pas, vous créez une page qui utilise des WebParts pour afficher le contenu statique.
.gif "Remarque") Remarque : |
|---|
Vous n'avez rien besoin de faire pour activer la personnalisation des WebParts ; celle-ci est activée par défaut pour le jeu de contrôles WebPart. Lorsque vous exécutez d'abord une page WebPart sur un site, ASP.NET installe un fournisseur de personnalisations par défaut pour stocker les paramètres de personnalisation de l'utilisateur. Le fournisseur par défaut utilise une base de données créée dans un sous-répertoire du répertoire de votre site. Pour plus d'informations sur la personnalisation, consultez Vue d'ensemble de la personnalisation des WebParts. |
Pour créer une page Web
Dans votre éditeur de texte, créez un nouveau fichier et ajoutez la déclaration de page suivante au début du fichier.
<%@ page language="VB" %><%@ page language="C#" %>Entrez les balises sous la déclaration de page pour créer une structure de page complète décrite dans l'exemple de code suivant.
Notez que la page comprend un tableau vide avec une ligne et trois colonnes. Le tableau contiendra les contrôles WebPart que vous ajouterez ultérieurement.
<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>Nommez le fichier WebPartsDemo.aspx et enregistrez-le dans le répertoire de votre site Web.
L'étape suivante consiste à installer des zones. Les zones sont des contrôles composites qui occupent une région spécifiée d'une page et contiennent des contrôles WebPart.
Pour ajouter des zones à la page
En dessous de l'élément <form> dans votre page, ajoutez un élément <asp:webpartmanager>, décrit dans l'exemple suivant.
<asp:webpartmanager id="WebPartManager1" />Le contrôle WebPartManager est requis sur chaque page utilisant des contrôles WebPart.
Ajoutez un élément <asp:webpartzone> à l'intérieur du premier élément <td> dans le tableau et assignez ses valeurs de propriété comme le montre l'exemple de code suivant.
Notez que l'élément <asp:webpartzone> contient également un élément <zonetemplate>. Les contrôles WebPart sont placés dans l'élément <zonetemplate>.
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="top"> <asp:webpartzone id="SideBarZone" headertext="Sidebar"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>Ajoutez un élément <asp:webpartzone> à l'intérieur du deuxième élément <td> de la table et assignez ses valeurs de propriété comme illustré dans l'exemple de code suivant :
<td valign="top"> <asp:webpartzone id="MainZone" headertext="Main"> <zonetemplate> </zonetemplate> </asp:webpartzone> </td>Enregistrez le fichier WebPartsDemo.aspx.
Votre page dispose maintenant de deux zones que vous pouvez contrôler séparément. Toutefois, aucune zone n'ayant de contenu, la création du contenu est donc l'étape suivante. Pour cette procédure pas à pas, vous utilisez les contrôles WebPart qui affichent uniquement le contenu statique.
La disposition de la zone WebPart est spécifiée par un élément <zonetemplate>. À l'intérieur du modèle de la zone, vous pouvez ajouter n'importe quel contrôle serveur Web, si c'est un contrôle WebPart personnalisé, un contrôle utilisateur ou un contrôle serveur existant. Dans cette procédure pas à pas, vous utilisez le contrôle serveur Label et ajoutez simplement du texte statique à l'intérieur de celui-ci. Lorsque vous placez un contrôle serveur ASP.NET normal dans une zone WebPartZone, ASP.NET le traite comme un contrôle WebPart au moment de l'exécution, ce qui vous permet d'utiliser la plupart des fonctionnalités WebPart avec des contrôles serveur standard.
Pour créer le contenu des zones
À l'intérieur de l'élément <zonetemplate> pour la zone Main, ajoutez un élément <asp:label> avec du contenu, comme illustré dans l'exemple de code suivant :
<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>Enregistrez le fichier WebPartsDemo.aspx.
Créez un nouveau fichier dans votre éditeur de texte.
Ce fichier contiendra un contrôle utilisateur qui peut également être ajouté à la page en tant que contrôle WebPart.
En haut du nouveau fichier, ajoutez une déclaration de contrôle, comme le montre l'exemple suivant.
<%@ control language="VB" classname="SearchUserControl" %><%@ control language="C#" classname="SearchUserControl" %>Remarque :Le contrôle de recherche pour cette procédure pas à pas n'implémente pas des fonctionnalités de recherche réelles ; il est utilisé uniquement pour illustrer des fonctionnalités WebPart.
Sous la déclaration de contrôle, ajoutez une paire de balises <script> et entre les deux, ajoutez le code pour créer une propriété personnalisable.
Notez que la propriété ResultsPerPage a un attribut Personalizable. Cette propriété permettrait aux utilisateurs du contrôle de personnaliser le nombre de résultats de la recherche à retourner par page, si vous avez fourni un contrôle d'édition avec l'interface utilisateur pour modifier le paramètre dans le mode Design.
Assurez-vous que le code de votre contrôle ressemble à l'exemple de code suivant :
<%@ 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>Ajoutez une zone de texte et un bouton au-dessous de l'élément <script> pour fournir l'interface utilisateur pour un contrôle de recherche, comme le montre l'exemple de code suivant :
<asp:textbox id="inputBox"></asp:textbox> <br /> <asp:button id="searchButton" text="Search" />.gif "Note de sécurité")
Note de sécurité :Ce contrôle a une zone de texte qui accepte l'entrée d'utilisateur, ce qui constitue une menace éventuelle pour la sécurité. Par défaut, les pages Web ASP.NET valident les entrées d'utilisateur pour vérifier qu'elles ne contiennent pas d'éléments HTML ni de script. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.
Nommez le fichier SearchUserControlVB.ascx ou SearchUserControlCS.ascx (selon le langage que vous utilisez) et enregistrez-le dans le même répertoire que la page WebPartsDemo.aspx.
Vous ajoutez à présent deux contrôles à la zone Sidebar, un contenant une liste de liens et un autre qui est le contrôle utilisateur que vous avez créé lors de la procédure précédente. Les liens sont ajoutés en tant que contrôle serveur Label standard et unique, de la même manière dont vous avez créé le texte statique de la zone Main. Toutefois, bien que les contrôles serveur contenus dans le contrôle utilisateur pourraient être contenus directement dans la zone, ce n'est pas le cas. À la place, ils font partie du contrôle utilisateur que vous avez créé lors de la procédure précédente. Cela illustre une façon courante d'empaqueter tous les contrôles et les fonctionnalités supplémentaires que vous souhaitez dans un contrôle utilisateur, puis de référencer ce contrôle utilisateur dans une zone en tant que contrôle WebPart.
Au moment de l'exécution, ASP.NET encapsule les deux contrôles avec les contrôles GenericWebPart. Lorsqu'un contrôle GenericWebPart encapsule un contrôle serveur Web, le contrôle Part générique est le parent et vous pouvez accéder au contrôle serveur à travers la propriété ChildControl du contrôle parent. Les contrôles WebPart génériques permettent aux contrôles serveur Web standard d'avoir les mêmes comportement et attributs de base que les contrôles WebPart dérivés de la classe WebPart.
Pour créer le contenu pour la zone Sidebar
Ouvrez la page WebPartsDemo.aspx dans votre éditeur de texte.
En haut de la page, après la déclaration de page, ajoutez la déclaration suivante pour référencer le contrôle utilisateur que vous venez de créer :
<%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolvb.ascx" %><%@ register tagprefix="uc1" tagname="SearchUserControl" src="searchusercontrolcs.ascx" %>À l'intérieur de l'élément <zonetemplate> de la zone Sidebar, ajoutez un contrôle Label contenant plusieurs liens. Sous le contrôle, référencez le contrôle utilisateur que vous avez déjà créé, comme le montre l'exemple de code suivant :
<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>Enregistrez le fichier WebPartsDemo.asp.
Vous pouvez à présent tester votre page.
Pour tester la page
Chargez la page dans un navigateur.
La page affiche les deux zones. Chaque contrôle de la page est affiché avec une flèche vers le bas dans sa barre de titre qui contient un menu déroulant appelé menu des verbes. Les verbes sont des actions qu'un utilisateur peut effectuer sur un contrôle serveur, telles que la fermeture, la réduction ou la modification d'un contrôle. Chaque élément dans le menu des verbes est un verbe. La capture d'écran suivante illustre la page.
.gif)
Cliquez sur la flèche vers le bas dans la barre de titre d'un contrôle pour afficher son menu des verbes, puis sur le lien Réduire.
Le contrôle est réduit.
Dans le menu des verbes, cliquez sur Restaurer.
Cela illustre les différents états d'affichage visuel des contrôles WebPart.
Modification de pages et de la disposition par les utilisateurs
Les utilisateurs peuvent modifier la disposition des contrôles WebPart en les faisant glisser d'une zone vers une autre. Vous pouvez également permettre aux utilisateurs de modifier les caractéristiques des contrôles, telles que l'apparence, la disposition et le comportement. Le jeu de contrôles WebPart fournit la fonctionnalité de modification de base pour les contrôles WebPart. (Même si vous ne le ferez pas dans cette procédure pas à pas, vous pouvez également créer des contrôles d'édition personnalisés qui permettent aux utilisateurs de modifier les fonctionnalités des contrôles WebPart.) Comme la modification de l'emplacement d'un contrôle WebPart, la modification de ses propriétés repose sur la personnalisation ASP.NET pour enregistrer les modifications apportées par les utilisateurs.
Dans cette partie de la procédure pas à pas, vous permettez aux utilisateurs de modifier les caractéristiques de base de tout contrôle WebPart de la page.
Pour créer un contrôle utilisateur qui active la modification de la disposition de la page
Créez un fichier dans votre éditeur de texte et copiez-y le code suivant.
Ce code utilise les fonctionnalités du jeu de contrôles WebPart qui permettent à une page de modifier son affichage ou mode d'affichage. Il vous permet également de modifier l'apparence physique et la disposition de la page pendant que vous êtes dans certains modes d'affichage.
<%@ 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>Nommez le fichier Displaymodemenu.ascx et enregistrez-le dans le répertoire utilisé pour les autres pages.
Pour permettre aux utilisateurs de modifier la disposition
À la page WebPartsDemo.aspx, ajoutez une directive <register> pour enregistrer le nouveau contrôle utilisateur sur la page :
<%@ register TagPrefix="uc2" TagName="DisplayModeMenuVB" Src="DisplayModeMenu.ascx" %><%@ register TagPrefix="uc2" TagName="DisplayModeMenuCS" Src="DisplayModeMenu.ascx" %>Ajoutez une référence déclarative au contrôle utilisateur immédiatement sous l'élément <asp:webpartmanager> :
<uc2:DisplayModeMenuVB ID="DisplayModeMenu1" /><uc2:DisplayModeMenuCS ID="DisplayModeMenu1" />Ajoutez un élément <asp:editorzone> à l'intérieur du troisième élément <td> dans le tableau. Ajoutez un élément <zonetemplate>, un élément <asp:appearanceeditorpart> et un élément <asp:layouteditorpart>.
Lorsque vous avez terminé, le code ressemblera à l'exemple suivant :
<td valign="top"> <asp:editorzone id="EditorZone1" > <zonetemplate> <asp:appearanceeditorpart id="AppearanceEditorPart1" /> <asp:layouteditorpart id="LayoutEditorPart1" /> </zonetemplate> </asp:editorzone> </td>Remarque :Deux contrôles supplémentaires, les contrôles BehaviorEditorPart et PropertyGridEditorPart, ne sont pas utilisés, car ils nécessitent une installation qui dépasse le cadre de cette procédure pas à pas.
Enregistrez le fichier WebPartsDemo.aspx.
Vous avez créé un contrôle utilisateur qui vous permet de modifier les modes d'affichage et la présentation de page, et vous avez référencé le contrôle sur la page Web principale.
Vous pouvez maintenant tester la possibilité de modifier des pages et la disposition.
Pour tester les modifications apportées à la disposition
Chargez la page dans un navigateur.
Cliquez sur le menu déroulant Mode d'affichage, puis sélectionnez Édition.
Les titres de zone sont affichés.
Faites glisser le contrôle Liens par sa barre de titre de la zone Sidebar vers le bas de la zone Main.
La page doit ressembler à la capture d'écran suivante :
.gif)
Cliquez sur le menu déroulant Mode d'affichage, puis sélectionnez Parcourir.
La page est actualisée, les noms de zones disparaissent et le contrôle Liens reste où vous l'avez positionné.
Fermez le navigateur, puis chargez à nouveau la page.
Les modifications que vous avez apportées sont enregistrées pour les futures sessions de navigateur, ce qui montre que la personnalisation fonctionne.
Dans le menu Mode d'affichage, cliquez sur Édition.
Cliquez sur la flèche pour afficher le menu des verbes dans le contrôle Links puis sur le verbe Édition.
Le contrôle EditorZone apparaît, en affichant les contrôles EditorPart que vous avez ajoutés.
Dans la section Apparence du contrôle d'édition, remplacez le Titre par Mes favoris, utilisez la liste déroulante Type de chrome pour sélectionner Titre uniquement,, puis cliquez sur Appliquer.
La capture d'écran suivante illustre la page modifiée, toujours en mode édition :
.gif)
Cliquez sur le menu Mode d'affichage et sélectionnez Parcourir pour revenir au mode de navigation.
Le contrôle a maintenant un titre mis à jour et pas de bordures, comme le montre la capture d'écran suivante :
.gif)
Ajout de WebParts au moment de l'exécution
Vous pouvez également offrir aux utilisateurs la possibilité d'ajouter des contrôles WebPart à leur page au moment de l'exécution. Pour cela, configurez la page avec un catalogue WebPart qui contient une liste des contrôles WebPart que vous souhaitez rendre disponible aux utilisateurs.
| Remarque : |
|---|
Dans cette procédure pas à pas, vous créez un modèle contenant FileUpload et des contrôles Calendar. Cela vous permettra de tester les fonctionnalités de base du catalogue, mais les contrôles WebPart résultants n'ont aucune fonctionnalité réelle. Si vous avez un contrôle Web ou un contrôle utilisateur personnalisé, vous pouvez le substituer au contenu statique. |
Pour permettre aux utilisateurs d'ajouter des WebParts au moment de l'exécution
Dans le fichier WebPartsDemo.aspx, ajoutez le code suivant :
Un élément <asp:catalogzone> dans la troisième colonne de la table, juste sous l'élément <asp:editorzone>.
Un élément <zonetemplate> et, dans celui-ci, un élément <asp:declarativecatalogpart> et un élément <webpartstemplate>.
Un élément <asp:fileupload> et un élément <asp:calendar>.
Votre code doit ressembler à l'exemple de code suivant :
<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>Remarque :Les contrôles EditorZone et CatalogZone peuvent être dans la même cellule du tableau étant donné qu'ils ne sont pas affichés au même moment.
Enregistrez le fichier WebPartsDemo.aspx.
Vous pouvez à présent tester le catalogue.
Pour tester le catalogue WebPart
Chargez la page dans un navigateur.
Cliquez sur le menu déroulant Mode d'affichage, puis sélectionnez Catalogue.
Le catalogue nommé Add Web Parts est affiché.
Faites glisser le contrôle Mes favoris de la zone Main vers le haut de la zone Sidebar.
Dans le catalogue Add Web Parts, activez les deux cases à cocher, puis sélectionnez Main dans la liste déroulante Add to.
Cliquez sur Add dans le catalogue.
Les contrôles sont ajoutés à la zone Main. Si vous le souhaitez, vous pouvez ajouter plusieurs instances de contrôles du catalogue à votre page.
La capture d'écran suivante illustre la page avec le contrôle de téléchargement de fichiers et le calendrier dans la zone Main:
.gif)
Cliquez sur le menu déroulant Mode d'affichage, puis sélectionnez Parcourir.
Le catalogue disparaît et la page est actualisée.
Fermez le navigateur. Chargez de nouveau la page.
Les modifications que vous avez apportées persistent.
Étapes suivantes
Cette procédure pas à pas a illustré les principes de base de l'utilisation des contrôles WebPart simples sur une page Web ASP.NET. Vous pouvez essayer d'autres fonctionnalités WebPart plus sophistiquées. Par exemple, vous pouvez créer des contrôles WebPart en tant que contrôles utilisateur ou contrôles personnalisés. Pour plus d'informations, consultez la documentation de la classe WebPart.
Voir aussi
Tâches
Procédure pas à pas : création d'une page WebPart dans Visual Web Developer
Concepts
Vue d'ensemble des WebParts ASP.NET