Comment : générer et exécuter l'exemple de contrôle WebPart lié aux données
Mise à jour : novembre 2007
Cette rubrique contient des instructions pour générer et exécuter le contrôle WebPart lié aux données pour lequel un exemple de code complet est fourni dans la rubrique Contrôle WebPart lié aux données, exemple. L'exemple de code illustre comment créer un contrôle serveur personnalisé qui lie un contrôle GridView à une source de données, mais hérite également de la classe WebPart de façon à pouvoir participer aux applications WebPart. Cette rubrique procure les informations connexes dont vous aurez besoin pour compiler l'exemple de code et configurer une application Web ASP.NET afin d'exécuter le contrôle comme un contrôle WebPart.
Compilation du contrôle WebPart
Pour exécuter l'exemple de code, vous devez compiler ce code source. Vous pouvez le compiler explicitement et mettre l'assembly résultant dans le dossier Bin de votre site Web ou dans le Global Assembly Cache. Vous pouvez également mettre le code source dans le dossier App_Code de votre site où il sera compilé dynamiquement au moment de l'exécution. Cet exemple de code utilise la compilation dynamique. Pour obtenir une procédure pas à pas qui illustre le processus de compilation, consultez Procédure pas à pas : développement et utilisation d'un contrôle serveur personnalisé.
Pour compiler dynamiquement le contrôle WebPart lié aux données
Dans le dossier racine de votre application Web, créez un dossier nommé App_Code.
Obtenez le code source du contrôle WebPart lié aux données personnalisé dans la rubrique Contrôle WebPart lié aux données, exemple. Placez le fichier de code source dans le dossier App_Code. Le nom du fichier importe peu car vous utilisez la compilation dynamique, mais le fichier doit avoir une extension appropriée au langage que vous utilisez (telle que .cs ou .vb).
Utilisation du contrôle dans une application WebPart
La configuration d'une application pour utiliser des WebParts nécessite uniquement que vous disposiez d'un site Web ASP.NET permettant d'authentifier les utilisateurs individuels et une base de données autorisée à gérer les services d'application, y compris la personnalisation. Pour cet exemple (parce qu'il utilise un contrôle lié aux données), vous devez également créer une chaîne de connexion dans le fichier Web.config qui permet à la source de données de se connecter à l'exemple de base de données Northwind. Après avoir configuré l'application, vous devez ajouter dans chaque application WebPart un contrôle WebPartManager et au moins un contrôle WebPartZone à chaque page Web qui hébergera les WebPart et les contrôles serveur dans votre application WebPart. La deuxième procédure ci-dessous illustre comment ajouter ces contrôles et effectuer les autres étapes requises pour préparer la page à exécuter le contrôle lié aux données.
Pour configurer une application ASP.NET pour exécuter des contrôles WebPart
Assurez-vous que votre application Web ASP.NET est configurée pour reconnaître les utilisateurs individuels. Si vous avez besoin d'aide pour savoir comment créer un tel site, 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.
Assurez-vous que votre fournisseur de personnalisations et votre base de données sont 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 Express (SSE) pour stocker des données de personnalisation. Cette rubrique 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 de Microsoft.com Pour utiliser l'une des versions complètes de Microsoft 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 se 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 pour obtenir un exemple de code, consultez Implémentation d'un fournisseur d'appartenances.
Créez une chaîne de connexion afin que le contrôle lié aux données puisse se connecter à l'exemple de base de données Northwind. Pour exécuter l'exemple, vous aurez besoin d'accéder à l'exemple de base de données Northwind fournie avec SQL Server. Si l'exemple de base de données Northwind n'est pas installé, vous pouvez télécharger des scripts pour créer et installer la base de données depuis le Centre de téléchargement Microsoft.
Une méthode recommandée pour les chaînes de connexion consiste à les placer dans le fichier Web.config de votre application. Pour plus d'informations sur les fichiers de configuration, consultez Fichiers de configuration ASP.NET. L'exemple de code suivant montre une chaîne de connexion dans le fichier Web.config se connectant à une instance locale de Northwind exécutée sur SSE. Notez que les guillemets simples (') qui délimitent normalement le chemin d'accès au fichier de base de données sont restitués sous la forme d'entités ("). Cela est nécessaire car Web.config est un fichier XML.
<connectionStrings> <add name="nwind" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename= "C:\SQL Server 2000 Sample Databases\NORTHWND.MDF"; Initial Catalog=Northwind;Integrated Security=True;" providerName="System.Data.SqlClient" /> </connectionStrings>.gif "Remarque")
Remarque :Il est recommandé de chiffrer toutes les informations sensibles, telles qu'un mot de passe, contenues dans une chaîne de connexion. Pour plus d'informations sur le chiffrement des données de configuration, consultez Procédure pas à pas : chiffrement des informations de configuration à l'aide de la configuration protégée.
Dans la section <system.web> du fichier Web.config, ajoutez un élément <webparts>. Cela n'est pas nécessaire pour toutes les applications WebPart, mais certaines fonctionnalités d'applications WebPart doivent être configurées dans cette section si vous souhaitez les utiliser. L'exemple de contrôle WebPart lié aux données est activé pour exporter un fichier de configuration contenant ses données d'état et de propriété. La fonctionnalité d'exportation étant désactivée par défaut dans les applications WebPart, vous devez l'activer dans la section <webParts>. Ajoutez un attribut enabledExport à l'élément <webParts> et affectez-lui la valeur True, comme dans l'exemple de code suivant.
<webParts enableExport="true" />Enregistrez et fermez le fichier Web.config.
Pour préparer une page Web à héberger des contrôles WebPart
Créez un contrôle utilisateur qui permettra aux utilisateurs de basculer entre les modes d'affichage WebParts disponibles sur la page Web. Ce contrôle et l'étape suivante ne sont pas requis pour exécuter le contrôle WebPart lié aux données, mais il s'agit d'une fonctionnalité utile sur beaucoup de pages WebPart. Dans un éditeur, collez le code suivant pour le contrôle utilisateur et enregistrez le fichier dans le dossier racine de votre application Web avec le nom Displaymodemenucs.ascx ou Displaymodemenuvb.ascx (selon le langage que vous utilisez).
<!-- This user control recognizes what display modes are possible on a page, given the zones that are present, and enables users to switch among the display modes. --> <%@ control language="vb" classname="DisplayModeMenuVB"%> <script > ' Use a field to reference the current WebPartManager. 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 dropdown 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 + " Mode", modeName) DisplayModeDropdown.Items.Add(item) End If Next mode 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 Sub Page_PreRender(ByVal sender As Object, ByVal e As EventArgs) DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name End Sub </script> <div> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> </div><!-- This user control recognizes what display modes are possible on a page, given the zones that are present, and enables users to switch among the display modes. --> <%@ control language="C#" classname="DisplayModeMenuCS"%> <script > // Use a field to reference the current WebPartManager. 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 dropdown 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 + " Mode", modeName); DisplayModeDropdown.Items.Add(item); } } } // 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; } void Page_PreRender(object sender, EventArgs e) { DisplayModeDropdown.SelectedValue = _manager.DisplayMode.Name; } </script> <div> <asp:DropDownList ID="DisplayModeDropdown" AutoPostBack="true" OnSelectedIndexChanged="DisplayModeDropdown_SelectedIndexChanged" /> </div>Créez une nouvelle page ASP.NET pour héberger le contrôle WebPart personnalisé et les autres contrôles. Ajoutez une directive Register à la page, juste au-dessous de la directive Page, pour enregistrer le contrôle utilisateur que vous venez de créer. Le contenu de la directive dépend du langage que vous utilisez et doit ressembler à l'exemple suivant.
[Visual Basic]
<%@ register src="displaymodevb.ascx" tagname="displaymodevb" tagprefix="uc1" %>[C#]
<%@ register src="displaymodecs.ascx" tagname="displaymodecs" tagprefix="uc1" %>Ajoutez maintenant une directive Register pour le contrôle WebPart personnalisé. Cette rubrique utilisant la compilation dynamique, vous n'avez pas besoin d'ajouter un attribut Assembly à la directive. Ajoutez une autre directive Register juste au-dessous de la directive précédente dans le fichier, assignez une chaîne arbitraire à son attribut tagprefix et assignez l'espace de noms du contrôle personnalisé à l'attribut namespace, là encore selon le langage que vous avez utilisé, comme dans l'exemple suivant.
[Visual Basic]
<%@ register tagprefix="aspSample" namespace="Samples.AspNet.VB.Controls" %><%@ register tagprefix="aspSample" namespace="Samples.AspNet.CS.Controls" %>Ajoutez un élément <asp:webpartmanager> à la page, dans l'élément <form>, comme indiqué dans l'exemple de code suivant. Un contrôle WebPartManager est requis sur chaque page utilisant des WebParts.
<asp:webpartmanager id="WebPartManager1" > </asp:webpartmanager>Déclarez le contrôle utilisateur pour basculer les modes d'affichage, juste après l'élément <asp:webpartmanager>. La façon dont vous déclarez le contrôle dépend du langage que vous utilisez, comme dans l'exemple de code suivant.
[Visual Basic]
<uc1:displaymodevb id="Displaymodevb1" /><uc1:displaymodecs id="Displaymodecs1" />Après le contrôle utilisateur, ajoutez une table à une ligne et deux colonnes pour structurer la disposition des contrôles sur la page. Le balisage de la table doit se présenter comme dans l'exemple de code suivant.
<table style="width: 80%; position: relative"> <tr valign="top"> <td style="width: 40%"> </td> <td style="width: 40%"> </td> </tr> </table>Dans chaque jeu de balises <td>, ajoutez un élément <asp:webpartzone>. Une zone qui dérive de la classe WebPartZoneBase est requise pour contenir des contrôles WebPart et leur permettre d'avoir toutes les fonctionnalités WebPart. Le balisage de la première zone doit se présenter comme dans l'exemple de code suivant.
<asp:webpartzone id="WebPartZone1" style="position: relative" > <parttitlestyle font-size="14" font-names="Verdana" /> <zonetemplate> </zonetemplate> </asp:webpartzone>Le balisage de la deuxième zone doit se présenter comme suit.
<asp:webpartzone id="WebPartZone2" style="position: relative" > <zonetemplate> </zonetemplate> </asp:webpartzone>Déclarez le contrôle WebPart lié aux données personnalisé dans la première zone, entre les balises <zonetemplate>, comme indiqué dans l'exemple de code suivant. Notez que le balisage utilise le préfixe de balise défini dans la directive Register pour le contrôle, ainsi que le nom de classe pour le contrôle personnalisé. Notez également qu'une propriété personnalisée définie dans le contrôle--ConnectionString--apparaît sous la forme d'un attribut avec la chaîne de connexion du fichier Web.config assignée. Cette approche permet aux développeurs de pages de déterminer la chaîne de connexion à utiliser pour le contrôle. Le balisage se présente comme suit.
<aspSample:SmallGridWebPart id="grid1" title="Customer Phone List" width="300" connectionstring="<%$ ConnectionStrings:nwind %>" />À des fins de comparaison, déclarez un contrôle serveur de calendrier ordinaire dans la deuxième zone, entre les balises <zonetemplate>. Étant donné que vous placez le contrôle dans un contrôle WebPartZone, il se comportera comme un contrôle WebPart au moment de l'exécution. Pour plus d'informations sur l'utilisation de contrôles serveur dans les applications WebPart, consultez Utilisation de contrôles serveur ASP.NET dans les applications WebPart. Le balisage doit se présenter comme dans l'exemple de code suivant.
<asp:calendar id="Calendar1" style="position: relative"></asp:calendar>Enregistrez et fermez la page. Vous êtes maintenant prêt pour exécuter la page et tester le contrôle WebPart personnalisé. Le code complété de la page doit ressembler à l'exemple de code suivant.
<%@ Page Language="VB" %> <!-- Register the user control to change display modes. --> <%@ register src="displaymodevb.ascx" tagname="displaymodevb" tagprefix="uc1" %> <!-- Register the namespace that contains the custom WebPart control. Note there is no assembly attribute because this example uses dynamic compilation, by placing the source file for the control in an App_Code subfolder. --> <%@ register tagprefix="aspSample" namespace="Samples.AspNet.VB.Controls" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head > <title>Untitled Page</title> </head> <body> <form id="form1" > <div> <asp:webpartmanager id="WebPartManager1" > </asp:webpartmanager> <uc1:displaymodevb id="Displaymodevb1" /> <br /> <table style="width: 80%; position: relative"> <tr valign="top"> <td style="width: 40%"> <asp:webpartzone id="WebPartZone1" style="position: relative" > <parttitlestyle font-size="14" font-names="Verdana" /> <zonetemplate> <aspSample:SmallGridWebPart id="grid1" title="Customer Phone List" width="300" connectionstring="<%$ ConnectionStrings:nwind %>" /> </zonetemplate> </asp:webpartzone> </td> <td style="width: 40%"> <asp:webpartzone id="WebPartZone2" style="position: relative"> <zonetemplate> <asp:calendar id="Calendar1" style="position: relative"></asp:calendar> </zonetemplate> </asp:webpartzone> </td> </tr> </table> </div> </form> </body> </html><%@ Page Language="C#" %> <!-- Register the user control to change display modes. --> <%@ register src="displaymodecs.ascx" tagname="displaymodecs" tagprefix="uc1" %> <!-- Register the namespace that contains the custom WebPart control. Note there is no assembly attribute because this example uses dynamic compilation, by placing the source file for the control in an App_Code subfolder. --> <%@ register tagprefix="aspSample" namespace="Samples.AspNet.CS.Controls" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head > <title>Untitled Page</title> </head> <body> <form id="form1" > <div> <asp:webpartmanager id="WebPartManager1" > </asp:webpartmanager> <uc1:displaymodecs id="Displaymodecs1" /> <br /> <table style="width: 80%; position: relative"> <tr valign="top"> <td style="width: 40%"> <asp:webpartzone id="WebPartZone1" style="position: relative" > <parttitlestyle font-size="14" font-names="Verdana, Arial" /> <zonetemplate> <aspSample:SmallGridWebPart id="grid1" title="Customer Phone List" width="300" connectionstring="<%$ ConnectionStrings:nwind %>" /> </zonetemplate> </asp:webpartzone> </td> <td style="width: 40%"> <asp:webpartzone id="WebPartZone2" style="position: relative"> <zonetemplate> <asp:calendar id="Calendar1" style="position: relative"></asp:calendar> </zonetemplate> </asp:webpartzone> </td> </tr> </table> </div> </form> </body> </html>