Procédure pas à pas : création d'une page WebPart dans Visual Web Developer
Mise à jour : novembre 2007
Cette procédure pas à pas est une illustration pratique des composants et des tâches essentielles à la création de pages Web qui utilisent des contrôles WebPart dans un outil de design visuel tel que Microsoft Visual Studio 2005.
Dans beaucoup d'applications Web, il s'avère utile de pouvoir modifier l'apparence du contenu et de permettre aux utilisateurs de sélectionner et réorganiser le contenu qu'ils souhaitent voir. Les WebParts ASP.NET vous permettent de créer des pages Web qui présentent du contenu modulaire et qui permettent aux utilisateurs de modifier l'apparence et le contenu en fonction de leurs préférences. Pour obtenir une introduction générale aux WebParts, consultez Vue d'ensemble des WebParts ASP.NET. Pour une vue d'ensemble du jeu de composants WebParts, consultez Vue d'ensemble de jeu de composants WebPart.
Pendant cette procédure pas à pas, vous créez une page qui utilise les 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 :
ajout de contrôles WebPart à une page ;
création d'un contrôle utilisateur personnalisé et utilisation de celui-ci en tant que contrôle WebPart ;
autorisation des utilisateurs à personnaliser la disposition des contrôles WebPart sur la page ;
autorisation des utilisateurs à modifier l'apparence d'un contrôle WebPart ;
autorisation des utilisateurs à sélectionner dans un catalogue de contrôles WebPart disponibles.
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :
Un site capable d'identifier des utilisateurs individuels. Si vous avez déjà configuré un site avec l'appartenance d'ASP.NET, vous pouvez l'utiliser pour cette procédure pas à pas. Sinon, la procédure pas à pas fournit des instructions sur la configuration de votre site permettant de vous identifier grâce à votre nom de compte d'utilisateur Windows.
Un environnement de design visuel pour créer des pages Web. Cette procédure pas à pas utilise Visual Studio 2005.
Une base de données et un fournisseur de personnalisations configuré. La personnalisation WebPart est activée par défaut et elle utilise le fournisseur de personnalisations SQL (SqlPersonalizationProvider) avec Microsoft SQL Server Express Edition pour stocker des données de personnalisation. Cette procédure pas à pas utilise SQL Server Express et le fournisseur SQL par défaut. Si SQL Server Express est installé, aucune configuration n'est requise. SQL Server Express est disponible avec Microsoft Visual Studio 2005 en tant que partie facultative de l'installation ou en sous forme de téléchargement libre sur Microsoft.com. Pour utiliser une version complète 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.
Création et configuration du site Web
Cette procédure pas à pas requiert que vous ayez une identité d'utilisateur, afin que vos paramètres WebPart puissent être indexés pour vous. Si vous disposez déjà d'un site Web configuré pour utiliser l'appartenance, il est recommandé de l'utiliser. Sinon, vous pouvez créer un site et utiliser votre nom d'utilisateur Windows actuel comme votre identité d'utilisateur.
Pour créer un site Web
Dans Visual Studio, créez un site Web ASP.NET.
Pour plus d'informations, consultez Procédure pas à pas : création d'un site Web avec appartenance et connexion utilisateur.
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 contrôles WebPart pour afficher du contenu statique. La première étape pour utiliser des WebParts consiste à créer une page avec deux éléments requis. Tout d'abord, une page WebPart requiert un contrôle WebPartManager pour coordonner tous les contrôles WebPart. Ensuite, une page WebPart requiert une ou plusieurs zones qui sont des contrôles composites qui contiennent WebPart ou d'autres contrôles serveur et occupent une région spécifiée d'une page.
.gif "Remarque") Remarque : |
|---|
Vous n'avez rien besoin de faire pour activer la personnalisation WebPart ; celle-ci est activée par défaut pour le jeu de composants 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. Pour plus d'informations sur la personnalisation, consultez Vue d'ensemble de la personnalisation des WebParts. |
Pour créer une page contenant des contrôles WebPart
Fermez la page par défaut et ajoutez une nouvelle page nommée WebPartsDemo.aspx.
Basculez en mode Design.
Dans le menu Affichage, cliquez sur Aides visuelles puis assurez-vous que les options Contrôles non visuels ASP.NET et Détails sont sélectionnées.
Ceci vous permet de voir les balises de disposition et les contrôle qui ne possèdent pas d'interface utilisateur.
Ajoutez un retour à la ligne juste avant l'élément body.
Remarque :Si vous avez des difficultés à faire ceci, sélectionnez l'élément div et appuyez sur Échap deux fois pour sélectionner l'élément body, appuyez sur la touche de direction GAUCHE, puis sur ENTRÉE.
Placez le point d'insertion avant le caractère de saut de ligne.
Dans la liste Format du bloc dans la barre d'outils, sélectionnez Titre 1.
Dans le titre, ajoutez le texte Page de démonstration WebParts.
À partir de l'onglet WebParts de la Boîte à outils, faites glisser un contrôle WebPartManager sur la page, en le positionnant entre le caractère de nouvelle ligne et la balise <div> ouvrante.
Le contrôle WebPartManager ne restitue aucune sortie, il apparaît donc sous la forme d'une zone grise sur l'aire du concepteur.
Positionnez le point d'insertion dans l'élément div.
Dans le menu Tableau, cliquez sur Insérer un tableau, spécifiez un tableau d'une ligne et de trois colonnes, puis cliquez sur OK.
Faites glisser un contrôle WebPartZone dans la colonne gauche du tableau. Cliquez avec le bouton droit sur le contrôle WebPartZone, choisissez Propriétés, puis définissez les propriétés suivantes :
ID: SidebarZone
HeaderText: Sidebar
Faites glisser un deuxième contrôle WebPartZone dans la colonne centrale du tableau, puis définissez les propriétés suivantes :
ID: MainZone
HeaderText: Main
Enregistrez le fichier, mais ne le fermez pas.
Votre page dispose maintenant de deux zones distinctes 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 d'une 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 ASP.NET, si c'est un contrôle WebPart personnalisé, un contrôle utilisateur ou un contrôle serveur existant. Notez que vous utilisez ici le contrôle Label et que vous y ajoutez simplement du texte statique. Lorsque vous placez un contrôle serveur classique dans une zone WebPartZone, ASP.NET traite le contrôle comme un contrôle WebPart au moment de l'exécution, ce qui active des fonctions WebPart sur le contrôle.
Pour créer du contenu pour la zone Main
En mode Design, faites glisser un contrôle Label à partir de l'onglet Standard de la boîte à outils dans la partie contenu de la zone dont la propriété ID a la valeur MainZone.
Basculez en mode Source.
Notez qu'un élément zonetemplate a été ajouté pour encapsuler le contrôle Label dans la MainZone.
Ajoutez un attribut nommé title à l'élément asp:label, puis affectez-lui la valeur Content. Supprimez l'attribut Text="Label" de l'élément asp:label. À l'intérieur de l'élément asp:label, ajoutez du texte, par exemple <h2>Welcome to my Home Page</h2>. Votre code doit se présenter comme suit :
<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>Enregistrez le fichier.
Ensuite, créez un contrôle utilisateur qui peut également être ajouté à la page en tant que contrôle WebPart.
Pour créer un contrôle utilisateur
Ajoutez à votre site un nouveau contrôle utilisateur Web nommé SearchUserControl.ascx, qui servira de contrôle de recherche et assurez-vous que l'option Placer le code dans un fichier distinct est désactivée.
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 uniquement utilisé pour illustrer des fonctionnalités WebPart.
Basculez en mode Design.
À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle TextBox dans la page.
Placez le point d'insertion après la zone de texte que vous venez d'ajouter, puis appuyez sur ENTRÉE pour ajouter une nouvelle ligne.
Faites glisser un contrôle Button sur la page sur la nouvelle ligne au-dessous de la zone de texte que vous venez d'ajouter.
Basculez en mode Source puis vérifiez que le code source du contrôle utilisateur ressemble à l'exemple suivant :
<%@ 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" />Enregistrez et fermez le fichier.
.gif "Note de sécurité")
Note de sécurité :Ce contrôle a une zone de texte qui accepte l'entrée d'utilisateur, qui constitue une menace éventuelle pour la sécurité. Les entrées d'utilisateur dans une page Web peuvent inclure un script client nuisible. 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. Tant que cette vérification est activée, vous n'avez pas besoin de vérifier explicitement la présence d'un script ou d'éléments HTML dans les entrées d'utilisateur. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.
À présent, vous pouvez ajouter des contrôles WebPart à la zone SideBar. Vous ajoutez deux contrôles à la zone SideBar, l'un contenant une liste de liens et l'autre représentant le contrôle utilisateur que vous avez précédemment créé dans la procédure pas à pas. Les liens sont ajoutés en tant que contrôle serveur Label standard, de la même manière que lorsque 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 (comme le contrôle label), ce n'est pas le cas. À la place, ils font partie du contrôle utilisateur que vous avez créé dans la procédure précédente. C'est là une méthode courante permettant d'empaqueter tous les contrôles et les fonctionnalités supplémentaires requis dans un contrôle utilisateur, puis de référencer ce contrôle dans une zone en tant que contrôle WebPart.
Au moment de l'exécution, le jeu de composants WebPart encapsule des 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 contrôle parent et vous pouvez accéder au contrôle serveur par la propriété ChildControl du contrôle parent. L'utilisation des contrôles WebPart génériques permet 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 ajouter des contrôles WebPart à la zone SideBar
Ouvrez la page WebPartsDemo.aspx.
Basculez en mode Design.
Faites glisser la page de contrôle utilisateur que vous avez créée, SearchUserControl.ascx, de l'Explorateur de solutions vers la zone dont la propriété ID a la valeur SidebarZone.
Enregistrez la page WebPartsDemo.aspx.
Basculez en mode Source.
À l'intérieur de l'élément asp:webpartzone de SidebarZone, ajoutez un élément asp:label qui contient des liens et, dans la balise de contrôle utilisateur, ajoutez un attribut Title dont la valeur est Search, comme l'illustre l'exemple suivant :
<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>Enregistrez et fermez le fichier.
Vous pouvez à présent tester votre page.
Pour tester la page
Chargez la page dans un navigateur.
La page affiche les deux zones. La capture d'écran suivante illustre la page.
Page de démonstration WebPart avec deux zones
.gif)
Dans la barre de titre de chaque contrôle se trouve une flèche vers le bas qui permet d'accéder à un menu d'actions verbales disponibles que vous pouvez exécuter sur un contrôle. Cliquez sur le menu d'actions verbales pour l'un des contrôles, puis cliquez sur le verbe Minimize et notez que le contrôle est réduit. Dans le menu d'actions verbales, cliquez sur Restaurer, puis le contrôle retourne à sa taille normale.
Autorisation des utilisateurs à modifier les pages et la disposition
Les WebParts fournissent aux utilisateurs la possibilité de modifier la disposition des contrôles WebPart en les faisant glisser d'une zone vers une autre. En plus de permettre aux utilisateurs de déplacer les contrôles WebPart d'une zone vers une autre, vous pouvez permettre aux utilisateurs de modifier différentes caractéristiques des contrôles, y compris leur apparence, leur disposition et leur comportement. Le jeu de composants WebPart fournit des fonctionnalités 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 des propriétés d'un contrôle 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 ajoutez la possibilité pour les utilisateurs de modifier les caractéristiques de base de tout contrôle WebPart de la page. Pour activer ces fonctionnalités, vous ajoutez un autre contrôle utilisateur personnalisé à la page, ainsi qu'un élément asp:editorzone et deux contrôles d'édition.
Pour créer un contrôle utilisateur qui permet de modifier la présentation de la page
Dans le menu Fichier de Visual Studio, cliquez sur Nouveau, puis sur Fichier.
Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Contrôle utilisateur Web. Donnez au nouveau fichier le nom DisplayModeMenu.ascx. Désactivez la case à cocher Placer le code dans un fichier distinct.
Cliquez sur Ajouter pour créer le nouveau contrôle.
Basculez en mode Source.
Supprimez tout le code existant dans le nouveau fichier, puis collez le code suivant. Ce code de contrôle utilisateur utilise des fonctionnalités du jeu de composants WebPart qui permettent à une page de modifier son mode d'affichage et vous permettent également de modifier l'apparence et la présentation physiques de la page 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" /> <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>Enregistrez le fichier.
Remarque :Même si ce contrôle utilisateur permet aux utilisateurs de la page WebPart de basculer entre le mode partagé et le mode personnalisable par l'utilisateur, la fonctionnalité de personnalisation requiert que l'utilisateur bénéficie des autorisations appropriées, comme spécifié dans le fichier Web.config. Cette procédure pas à pas n'illustre pas comment accorder ces droits ; la fonctionnalité n'est donc pas activée. Par conséquent, les cases d'option partagées et utilisateur sur le contrôle utilisateur sont masquées lorsque vous exécutez la page. Pour plus d'informations sur la personnalisation, consultez Personnalisation des WebParts.
Pour permettre aux utilisateurs de modifier la disposition
Ouvrez la page WebPartsDemo.aspx.
Basculez en mode Design.
Placez le point d'insertion juste après le contrôle WebPartManager précédemment ajouté. Appuyez sur ENTRÉE pour créer une ligne vierge après le contrôle WebPartManager.
Faites glisser le contrôle utilisateur que vous venez de créer (DisplayModeMenu.ascx) dans la page WebPartsDemo.aspx et placez-le sur la ligne vierge.
Faites glisser un contrôle EditorZone à partir de l'onglet WebParts de la boîte à outils vers la cellule de tableau encore ouverte de la page WebPartsDemo.aspx.
À partir de l'onglet WebParts de la boîte à outils, faites glisser un contrôle AppearanceEditorPart et un contrôle LayoutEditorPart dans le contrôle EditorZone.
Basculez en mode Source.
Le code résultant dans la cellule de tableau doit se présenter comme le code suivant :
<td valign="top"> <asp:EditorZone ID="EditorZone1" > <ZoneTemplate> <asp:AppearanceEditorPart ID="AppearanceEditorPart1" /> <asp:LayoutEditorPart ID="LayoutEditorPart1" /> </ZoneTemplate> </asp:EditorZone> </td>Remarque :Bien que les contrôles AppearanceEditorPart et LayoutEditorPart soient utilisés dans cette procédure pas à pas, les contrôles BehaviorEditorPart et PropertyGridEditorPart ne le sont pas parce qu'ils nécessitent une installation qui sorte du 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.
Dans le menu Mode d'affichage, cliquez sur Édition.
Les titres de zone sont affichés.
Faites glisser le contrôle My Links par sa barre de titre à partir de la zone Sidebar vers le bas de la zone Main.
La page ressemblera à ce qui suit :
Page de démonstration WebParts où le contrôle My Links est déplacé
.gif)
Cliquez sur Mode d'affichage, puis cliquez sur Parcourir.
La page est actualisée, les noms de zones disparaissent et le contrôle My Links reste à l'endroit où vous l'avez positionné.
Pour illustrer que la personnalisation fonctionne, fermez le navigateur, puis chargez de nouveau la page. Les modifications que vous avez apportées sont enregistrées pour les sessions ultérieures du navigateur.
Dans le menu Mode d'affichage, cliquez sur Édition.
Chaque contrôle sur la page est à présent affiché avec une flèche vers le bas dans sa barre de titre qui contient le menu déroulant des verbes.
Cliquez sur la flèche pour afficher le menu d'actions verbales dans le contrôle My Links puis cliquez sur Modifier.
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 Titre par Mes favoris. Dans la liste Type de chrome, sélectionnez **Titre uniquement,**puis cliquez sur Appliquer.
La capture d'écran suivante illustre la page en mode édition.
Page de démonstration WebPart en mode édition
.gif)
Cliquez sur le menu Mode d'affichage et cliquez sur 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.
Page de démonstration WebPart modifiée
.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 disponibles aux utilisateurs.
| Remarque : |
|---|
Dans cette procédure pas à pas, vous créez un modèle contenant des contrôles FileUpload et 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
Ouvrez la page WebPartsDemo.aspx.
Basculez en mode Design.
À partir de l'onglet WebParts de la boîte à outils, faites glisser un contrôle CatalogZone dans la colonne de droite du tableau, sous le contrôle EditorZone.
Les contrôles peuvent se trouver dans la même cellule de tableau, car ils ne seront pas affichés en même temps.
Dans le volet Propriétés, assignez la chaîne Ajouter des WebParts à la propriété HeaderText du contrôle CatalogZone.
À partir de l'onglet WebParts de la boîte à outils, faites glisser un contrôle DeclarativeCatalogPart dans la zone de contenu du contrôle CatalogZone.
Cliquez sur la flèche dans le coin supérieur droit du contrôle DeclarativeCatalogPart pour exposer son menu Tâches, puis sélectionnez Modifier les modèles.
À partir de l'onglet Standard de la boîte à outils, faites glisser un contrôle FileUpload et un contrôle Calendar dans la section WebPartsTemplate du contrôle DeclarativeCatalogPart.
Basculez en mode Source et examinez le code source de l'élément asp:catalogzone.
Notez que le contrôle DeclarativeCatalogPart contient un élément webpartstemplate avec les deux contrôles serveur délimités que vous pourrez ajouter à votre page à partir du catalogue.
Remarque :Si vous avez un contrôle personnalisé, c'est le moment de le substituer à l'un des contrôles serveur de l'exemple, bien que cela nécessite des étapes sortant du cadre de cette procédure pas à pas. Pour plus d'informations, consultez l'exemple de code dans la documentation de la classe WebPart.
Ajoutez une propriété Title à chacun des contrôles que vous avez ajoutés au catalogue, à l'aide de la valeur de chaîne affichée pour chaque titre dans l'exemple de code ci-dessous. Même si le titre n'est pas une propriété que vous pouvez définir normalement sur ces deux contrôles serveur au moment du design, lorsqu'un utilisateur ajoute ces contrôles à une zone WebPartZone du catalogue au moment de l'exécution, ils sont chacun encapsulés dans un contrôle GenericWebPart. Cela leur permet de jouer le rôle de contrôles WebPart ; ils seront donc en mesure d'afficher des titres.
Le code des deux contrôles contenus dans le contrôle DeclarativeCatalogPart doit se présenter comme suit :
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" > <WebPartsTemplate> <asp:Calendar ID="Calendar1" title="My Calendar" /> <asp:FileUpload ID="FileUpload1" title="Upload Files" /> </WebPartsTemplate> </asp:DeclarativeCatalogPart>Enregistrez la page.
Vous pouvez à présent tester le catalogue.
Pour tester le catalogue WebPart
Chargez la page dans un navigateur.
Dans le menu Mode d'affichage, cliquez sur Catalogue.
Le catalogue intitulé Ajouter des WebParts 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 des zones disponibles.
Cliquez sur Ajouter 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 :
Contrôles ajoutés à la zone Main du catalogue
.gif)
Dans le menu Mode d'affichage, cliquez sur Parcourir.
Le catalogue disparaît et la page est actualisée.
Fermez le navigateur puis chargez à 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. Voici quelques suggestions pour une exploration plus approfondie :
- Créez des contrôles WebPart qui offrent des fonctionnalités plus sophistiquées que les contrôles WebPart statiques de cette procédure pas à pas. 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
Concepts
Vue d'ensemble des WebParts ASP.NET