Procédure pas à pas : implémentation de la personnalisation de WebParts avec un contrôle utilisateur
Mise à jour : novembre 2007
Cette procédure pas à pas vous montre comment créer un contrôle utilisateur ASP.NET qui s'appuie sur la personnalisation des WebParts pour fournir des valeurs par défaut spécifiques à l'utilisateur sur une page Web.
Les WebParts ASP.NET vous permettent de générer des pages Web avec des dispositions modulaires dans lesquelles les utilisateurs peuvent modifier l'apparence et le contenu selon leurs préférences. Une fonctionnalité WebPart clé, connue sous le nom de personnalisation, vous permet d'enregistrer des paramètres spécifiques à l'utilisateur pour chaque page et de réutiliser ces paramètres dans les futures sessions de navigateur.
À l'aide des WebParts et de la personnalisation, vous pouvez générer des pages Web qui incluent une fonctionnalité utile pour de nombreuses applications Web : la possibilité de fournir dans un formulaire des valeurs par défaut spécifiques à l'utilisateur. Cette procédure pas à pas montre comment fournir des valeurs par défaut spécifiques à l'utilisateur en implémentant un contrôle utilisateur qui peut être traité comme un contrôle WebPart personnalisable. Cette approche de développement est utile si vous créez, par exemple, une application pour que les agents du service client puissent remplir des formulaires en ligne. Les WebParts et les fonctionnalités de personnalisation permettent à votre page de reconnaître chaque agent. Le contrôle utilisateur permet à chaque agent d'enregistrer des valeurs par défaut pour les champs du formulaire, ensuite les valeurs par défaut peuvent être remplies automatiquement lors de visites ultérieures sur la page.
.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. Mais dans cette procédure pas à pas, vous apprenez qu'un contrôle utilisateur peut fonctionner comme un contrôle WebPart. Pendant la procédure pas à pas, vous ajoutez le 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 sur un formulaire d'une page Web.
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 avez besoin de :
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 É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 SQ. 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'un contrôle utilisateur personnalisable
Dans cette partie de la procédure pas à pas, vous créez un contrôle utilisateur qui fournit l'interface utilisateur pour un formulaire d'informations de l'agent. Le contrôle expose également des propriétés personnalisables selon les informations de nom et de téléphone.
| Remarque : |
|---|
Vous n'avez pas besoin d'activer la personnalisation des WebParts ; 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 des propriétés personnalisables pour le contrôle utilisateur
Dans un éditeur de texte, créez un fichier et ajoutez la déclaration de contrôle suivante au début du fichier, avec les balises <script> d'ouverture et de fermeture :
<%@ control language="VB" classname="AccountUserControl" %> <script > </script><%@ control language="C#" classname="AccountUserControl" %> <script > </script>À l'intérieur des balises <script>, ajoutez le code pour créer deux propriétés personnalisables : l'une appelée UserName, l'autre appelée Phone, comme indiqué dans l'exemple suivant.
Remarque :Chaque propriété a un attribut Personalizable. Cela permet à la personnalisation des WebParts de stocker les valeurs de propriété dans une base de données.
<Personalizable()> _ Property UserName() As String Get If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then Return String.Empty Else Return Textbox1.Text End If End Get Set(ByVal value As String) Textbox1.Text = value End Set End Property <Personalizable()> _ Property Phone() As String Get If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then Return String.Empty Else Return Textbox2.Text End If End Get Set(ByVal value As String) Textbox2.Text = value End Set End Property[Personalizable] public string UserName { get { if(Textbox1.Text == null | Textbox1.Text.Length < 0) return String.Empty; else return Textbox1.Text; } set { Textbox1.Text = value; } } [Personalizable] public string Phone { get { if(Textbox2.Text == null | Textbox2.Text.Length < 0) return String.Empty; else return Textbox2.Text; } set { Textbox2.Text = value; } }.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 AccountUserControlCS.ascx ou AccountUserControlVB.ascx (selon le langage que vous utilisez) et enregistrez-le dans le répertoire racine de votre site Web.
Maintenant que vous avez ajouté des propriétés personnalisables permettant d'enregistrer les valeurs par défaut, vous pouvez ajouter des contrôles d'interface utilisateur au contrôle utilisateur pour afficher le nom d'un utilisateur et le numéro de téléphone.
Pour ajouter des contrôles d'interface utilisateur au contrôle utilisateur
Après les balises <script>, ajoutez un contrôle Label et un contrôle TextBox encapsulé par les balises <div> pour contenir le nom de l'utilisateur, comme illustré dans l'exemple de code suivant :
<div> <asp:label id="Label1" >Name</asp:label> <asp:textbox id="Textbox1" /> </div>Sous le contrôle que vous venez d'ajouter, ajoutez un contrôle Label et un contrôle TextBox encapsulé par les balises <div> pour contenir le numéro de téléphone de l'utilisateur, comme illustré dans l'exemple suivant :
<div> <asp:label id="Label2" >Phone</asp:label> <asp:textbox id="Textbox2" /> </div>Sous le contrôle que vous venez d'ajouter, ajoutez un élément <asp:button> encapsulé par les balises <div> pour enregistrer les informations relatives à l'utilisateur en exécutant une publication (postback) :
<div> <asp:button id="Button1" text="Save Form Values" /> </div>Enregistrez le fichier.
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 ASP.NET pour héberger le contrôle utilisateur comme un contrôle WebPart. Il est nécessaire d'héberger le contrôle en tant que contrôle WebPart pour que les fonctionnalités de personnalisation puissent fonctionner.
Pour référencer le contrôle utilisateur en tant que contrôle WebPart
Dans un éditeur de texte, créez un fichier et ajoutez la déclaration de page suivante au début du fichier :
<%@ 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 illustré dans l'exemple suivant :
<%@ register tagprefix="uc1" tagname="AccountUserControl" src="AccountUserControlvb.ascx"%><%@ register tagprefix="uc1" tagname="AccountUserControl" src="AccountUserControlcs.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>.
<html> <head > <title>Personalizable User Control</title> </head> <body> <form id="form1" > <asp:webpartmanager id="WebPartManager1" /> <asp:webpartzone id="zone1" headertext="Main"> <zonetemplate> <uc1:AccountUserControl id="accountwebpart" title="Agent Information" /> </zonetemplate> </asp:webpartzone> </form> </body> </html>Nommez le fichier Hostaccountcontrol.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 Hostaccountcontrol.aspx dans un navigateur.
Entrez les valeurs dans les champs Nom et Téléphone et 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 s'affichent dans le formulaire. Il s'agit des valeurs qui ont été enregistrées dans les propriétés personnalisables 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 sont celles qui réapparaissent dans le formulaire, car vous n'avez pas enregistré les nouvelles valeurs.
É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.