Procédure pas à pas : implémentation de la personnalisation des WebParts à l'aide d'IPersonalizable
Mise à jour : novembre 2007
Cette procédure pas à pas montre comment fournir des valeurs par défaut spécifiques à l'utilisateur en implémentant un contrôle utilisateur comme un contrôle WebPart personnalisable.
La caractéristique la plus significative de ce contrôle est que ses propriétés personnalisables sont stockées dans des variables de type autres que des types valeur. Dans ce cas, les valeurs sont stockées dans un contrôle BulletedList. Cela implique que le système n'a aucun moyen de savoir lorsque l'utilisateur modifie les valeurs dans la liste. Cette procédure pas à pas montre comment informer le système que les valeurs sont modifiées afin de pouvoir les conserver pour une future utilisation. Cela peut être utile si vous créez des formulaires en ligne personnalisables au niveau de l'utilisateur. La personnalisation des WebParts permet au système de reconnaître l'utilisateur afin que ses valeurs de formulaire par défaut puissent être restaurées automatiquement lors des visites suivantes sur le site.
.gif "Remarque") Remarque : |
|---|
Le contrôle utilisateur que vous créez dans cette procédure pas à pas n'hérite pas de la classe WebPart ; toutefois, un contrôle utilisateur peut fonctionner comme un contrôle WebPart. Pendant cette procédure pas à pas, vous ajoutez un contrôle utilisateur à une zone WebPartZoneBase. Cela permet à ASP.NET d'encapsuler le contrôle utilisateur dans un contrôle GenericWebPart. Le contrôle utilisateur fonctionnera ensuite comme tout autre contrôle WebPart et vous permettra d'explorer la personnalisation. |
Au cours de cette procédure pas à pas, vous apprendrez à :
Créer un contrôle utilisateur avec les propriétés personnalisables dont les valeurs peuvent être enregistrées dans le stockage à long terme.
Afficher des valeurs par défaut spécifiques à l'utilisateur.
Utiliser le contrôle utilisateur dans une zone comme un véritable contrôle WebPart.
| Remarque : |
|---|
Ce type d'application pourrait être développé à l'aide de profils ASP.NET. Toutefois, dans ce cas, vous ne stockez pas d'informations sur l'utilisateur pour les réutiliser dans une application entière, comme dans une application de panier d'achat. Vous pouvez sinon enregistrer des préférences spécifiques à l'utilisateur ou des paramètres pour chaque contrôle en fonction de chaque page. Pour plus d'informations sur les profils, consultez Vue d'ensemble des propriétés du profil ASP.NET. |
Composants requis
Pour exécuter cette procédure pas à pas, vous devez disposer de la configuration suivante :
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.
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 Standard Edition (SSE) 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 comme téléchargement gratuit à partir de Microsoft.com. Pour utiliser l'une des versions complètes de SQL Server, vous devez installer et configurer une base de données de services d'application ASP.NET et configurer le fournisseur de personnalisations SQL pour vous connecter à 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 un exemple de code, consultez Implémentation d'un fournisseur d'appartenances.
Création d'un contrôle utilisateur personnalisable qui contient des variables de type référence
Dans cette partie de la procédure pas à pas, vous créez un contrôle utilisateur qui vous permet d'entrer un nom convivial et une URL pour un site Web. Lorsque vous cliquez sur le bouton Enregistrer, le nom convivial est ajouté à un contrôle BulletedList. Ces valeurs sont stockées par la fonctionnalité de personnalisation des WebParts au niveau de l'utilisateur. Chaque fois que l'utilisateur accède au contrôle provenant d'une autre page ou dans une nouvelle session, le système affiche les valeurs BulletedList enregistrées.
| Remarque : |
|---|
Vous n'avez pas besoin d'activer la personnalisation WebPart ; elle est activée par défaut. Pour plus d'informations sur la personnalisation, consultez Vue d'ensemble de la personnalisation des WebParts. |
Pour créer le contrôle utilisateur personnalisable
Dans un éditeur de texte, créez un fichier pour contenir un contrôle utilisateur, nommez-le UrlList.ascx et enregistrez-le dans votre répertoire Web. Le code qui implémente le comportement du contrôle est contenu dans un fichier séparé, comme illustré à l'étape 4.
Dans le nouveau fichier, ajoutez une directive de contrôle dans le langage de programmation que vous utilisez, comme illustré dans l'exemple suivant.
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="UrlList.ascx.vb" Inherits="WebParts_UrlList" %><%@ Control Language="C#" AutoEventWireup="true" CodeFile="UrlList.ascx.cs" Inherits="WebParts_UrlList" %>Sous la directive, ajoutez les éléments suivants pour représenter l'interface utilisateur du contrôle.
<table> <tr> <td> <asp:Label ID="NameLabelID" Text="Name: " /> </td> <td> <asp:TextBox ID="NameTextBoxID" /> </td> </tr> <tr> <td> <asp:Label ID="UrlLabelID1" Text="Url: " /> </td> <td> <asp:TextBox ID="UrlTextBoxID" /> </td> </tr> <tr> <td> <asp:Button ID="SaveID" OnClick="SaveButton_Click" Text="Save" /> </td> <td> <asp:Button ID="ResetID" OnClick="ResetButton_Click" Text="Reset" /> </td> </tr> </table> <div> // This is the complex variable whose status // must be preserved. <asp:BulletedList ID="BulletedListID" DisplayMode="HyperLink" Target="_blank" /> </div>Créez un autre fichier qui servira de fichier compagnon et ajoutez-lui le code suivant. L'exemple suivant représente le fichier compagnon (UrlList.ascx.vb ou UrlList.ascx.cs selon le langage que vous utilisez) qui implémente le comportement du contrôle UrlList.ascx précédent. Ce code est divisé en deux parties. Une partie contient le code qui gère l'entrée d'utilisateur et l'événement de chargement de la page ; l'autre contient le code qui implémente l'interface IPersonalizable. Cela permet de conserver les valeurs BulletedList (en d'autres termes, la personnalisation du contrôle utilisateur). Cet exemple implémente Load, Save et les membres d'interface IsDirty.
' UrlList.ascx.vb Imports System Imports System.Collections Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.WebControls.WebParts Partial Class WebParts_VB_UrlList Inherits System.Web.UI.UserControl Implements IPersonalizable Private _userUrls As ArrayList Private _listDirty As Boolean ' This code implements the IPersonalizable members. Public Overridable ReadOnly Property IsDirty() As Boolean _ Implements System.Web.UI.WebControls.WebParts.IPersonalizable.IsDirty Get Return _listDirty End Get End Property Public Overridable Shadows Sub Load(ByVal state As PersonalizationDictionary) _ Implements System.Web.UI.WebControls.WebParts.IPersonalizable.Load If Not (state Is Nothing) Then Dim userUrlsEntry As PersonalizationEntry = state("userUrls") If Not (userUrlsEntry Is Nothing) Then _userUrls = CType(userUrlsEntry.Value, ArrayList) End If End If End Sub 'Load Public Overridable Sub Save(ByVal state As PersonalizationDictionary) _ Implements System.Web.UI.WebControls.WebParts.IPersonalizable.Save If Not (_userUrls Is Nothing) AndAlso _userUrls.Count <> 0 Then state("userUrls") = New PersonalizationEntry(_userUrls, _ PersonalizationScope.User) End If End Sub ' This code handles the user's input. Protected Sub SaveButton_Click(ByVal sender As Object, _ ByVal e As EventArgs) Dim name As String = NameTextBoxID.Text.Trim() Dim url As String = UrlTextBoxID.Text.Trim() Dim p As New Pair(name, url) If _userUrls Is Nothing Then _userUrls = New ArrayList() End If _userUrls.Add(p) BulletedListID.Items.Add(New ListItem(CStr(p.First), _ CStr(p.Second))) _listDirty = True End Sub 'SaveButton_Click Protected Sub ResetButton_Click(ByVal sender As Object, _ ByVal e As EventArgs) _userUrls = New ArrayList() BulletedListID.Items.Clear() _listDirty = True End Sub 'ResetButton_Click Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As EventArgs) If Not (_userUrls Is Nothing) Then BulletedListID.Items.Clear() Dim p As Pair For Each p In _userUrls BulletedListID.Items.Add(New _ ListItem(CStr(p.First), CStr(p.Second))) Next p End If End Sub 'Page_Load End Class// UrlList.ascx.cs using System; using System.Collections; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; public partial class WebParts_UrlList : System.Web.UI.UserControl, IPersonalizable { private ArrayList _userUrls; private bool _listDirty; // This code implements the IPersonalizable members. public new void Load(PersonalizationDictionary state) { if (state != null) { PersonalizationEntry userUrlsEntry = state["userUrls"]; if (userUrlsEntry != null) { _userUrls = (ArrayList)userUrlsEntry.Value; } } } public void Save(PersonalizationDictionary state) { if ((_userUrls != null) && (_userUrls.Count != 0)) { state["userUrls"] = new PersonalizationEntry(_userUrls, PersonalizationScope.User); } } public virtual bool IsDirty { get { return _listDirty; } } // This code handles the user's input. protected void Page_Load(object sender, EventArgs e) { if (_userUrls != null) { BulletedListID.Items.Clear(); foreach (Pair p in _userUrls) { BulletedListID.Items.Add( new ListItem((string)p.First, (string)p.Second)); } } } protected void SaveButton_Click(object sender, EventArgs e) { string name = NameTextBoxID.Text.Trim(); string url = UrlTextBoxID.Text.Trim(); Pair p = new Pair(name, url); if (_userUrls == null) { _userUrls = new ArrayList(); } _userUrls.Add(p); BulletedListID.Items.Add( new ListItem((string)p.First, (string)p.Second)); _listDirty = true; } protected void ResetButton_Click(object sender, EventArgs e) { _userUrls = new ArrayList(); BulletedListID.Items.Clear(); _listDirty = true; } }Nommez le fichier UrlList.ascx.vb ou UrlList.ascx.cs (selon le langage que vous utilisez) et enregistrez-le dans le répertoire racine de votre site Web.
.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é. 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.
Référencement du contrôle utilisateur en tant que contrôle WebPart
Maintenant que vous avez créé un contrôle utilisateur avec les propriétés personnalisables, vous pouvez créer une page Web Forms pour héberger le contrôle utilisateur comme un contrôle WebPart.
| Remarque : |
|---|
Vous devez héberger le contrôle comme un contrôle WebPart pour que la personnalisation fonctionne. |
Pour référencer le contrôle utilisateur en tant que contrôle WebPart
Dans l'éditeur de texte, créez un fichier. Ajoutez une déclaration de page au début du fichier, comme illustré dans l'exemple suivant.
<%@ page language="VB" %><%@ page language="C#" %>Sous la déclaration de page, ajoutez une déclaration pour référencer le contrôle utilisateur que vous avez créé précédemment, comme montré dans l'exemple suivant.
<%@ Register tagprefix="UserControl" tagname="UrlList" src="UrlList.ascx" %><%@ Register tagprefix="UserControl" tagname="UrlList" src="UrlList.ascx" %>Sous la référence de contrôle, ajoutez la structure de page de base suivante pour héberger le contrôle utilisateur en tant que contrôle WebPart.
Remarque :Pour que le contrôle utilisateur fonctionne comme un contrôle WebPart, la page doit contenir un élément <asp:webpartmanager> et le contrôle utilisateur doit être contenu entre un élément <asp:webpartzone> et un élément <zonetemplate>, comme illustré dans l'exemple suivant.
<html> <head > <title>Personalizable User Control</title> </head> <body> <form id="form1" > <asp:WebPartManager ID="mgr" /> <div> <asp:WebPartZone ID="WebPartZone1" > <ZoneTemplate> < UserControl:UrlList ID="AccUserID" title="URL List WebPart" /> </ZoneTemplate> </asp:WebPartZone> </div> </form> </body> </html>Nommez le fichier UrlList.aspx et enregistrez-le dans le même répertoire que le contrôle utilisateur.
Vous avez maintenant créé un contrôle utilisateur personnalisable et l'avez référencé comme un contrôle WebPart dans une page Web Forms.
La dernière étape consiste à tester votre contrôle utilisateur.
Pour tester le contrôle utilisateur personnalisable
Chargez la page UrlList.aspx dans un navigateur.
Entrez les valeurs dans les champs Nom et URL, puis cliquez sur le bouton Enregistrer les valeurs du formulaire.
Fermez le navigateur.
Chargez de nouveau la page dans un navigateur.
Les valeurs que vous avez précédemment entrées doivent apparaître dans le formulaire. Il s'agit des valeurs enregistrées dans le contrôle BulletedList et restaurées à partir de la base de données lorsque vous avez rechargé la page dans le navigateur.
Entrez de nouvelles valeurs dans le formulaire, mais ne cliquez pas sur le bouton pour les enregistrer. Fermez le navigateur.
Chargez de nouveau la page dans un navigateur. Les valeurs d'origine que vous êtes entrées et enregistrées dans les propriétés personnalisées doivent être celles qui réapparaissent dans le formulaire.
Étapes suivantes
Cette procédure pas à pas a montré les tâches de base permettant la création d'un contrôle utilisateur avec les propriétés personnalisables. Vous avez créé un contrôle qui vous permet d'enregistrer des paramètres spécifiques à l'utilisateur pour le contrôle et la page spécifiques et d'afficher ces paramètres lorsque l'utilisateur visite de nouveau la page dans une nouvelle session de navigateur. Voici quelques suggestions pour une exploration plus approfondie :
Recherchez les autres composants impliqués dans la création d'une page WebPart. Pour une introduction, consultez Procédure pas à pas : création d'une page WebPart.
En savoir plus sur l'utilisation des contrôles utilisateur. Pour plus d'informations, consultez Vue d'ensemble des contrôles utilisateur ASP.NET.
Apprenez à créer vos propres contrôles WebPart personnalisés qui offrent plus de contrôle par programmation qu'un contrôle utilisateur et fournissent la gamme complète des fonctionnalités WebPart. Pour plus d'informations, consultez Comment : traiter un contrôle utilisateur comme un contrôle WebPart.