Procédure pas à pas : affichage et mise en forme des données avec le contrôle serveur Web DataList

Mise à jour : novembre 2007

Une tâche courante dans les pages Web consiste à afficher des données - en fait de créer des rapports de données. Dans cette procédure pas à pas, vous utiliserez le contrôle DataList qui vous permet de créer une présentation de formulaire libre pour les enregistrements que vous affichez dans une page Web ASP.NET.

Au cours de cette procédure pas à pas, vous apprendrez à :

• ajouter un contrôle DataList et utiliser des modèles pour présenter les données qui sont affichées par le contrôleDataList ;

• lier le contrôle DataList à la source de données ;

• ajouter un contrôle de données enfant et du code au contrôle DataList pour afficher des données dans une relation maître/détail.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

• Microsoft Visual Web Developer (Visual Studio).

• Accéder à la base de données Northwind SQL Server. Pour plus d'informations sur le téléchargement et l'installation de l'exemple de base de données Northwind SQL Server, consultez Installation d'exemples de bases de données sur le site Web Microsoft SQL Server.

  Remarque :
  Si vous avez besoin d'informations sur la façon de se connecter à un ordinateur qui exécute SQL Server, contactez l'administrateur du serveur.

• Microsoft Data Access Components (MDAC) version 2.7 ou ultérieure.

  Si vous utilisez Microsoft Windows XP ou Windows Server 2003, MDAC 2.7 est déjà installé. Toutefois, si vous utilisez Microsoft Windows 2000, vous devrez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez « Microsoft Data Access Components (MDAC) Installation » dans MSDN Library.

Création du site Web

Créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

1. Ouvrez Visual Web Developer.

2. Dans le menu Fichier, cliquez sur Nouveau, puis sur Site Web. Si vous utilisez Visual Web Developer Express, dans le menu Fichier, cliquez sur Nouveausite Web.

   La boîte de dialogue Nouveau site Web s'affiche.

3. Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.

4. Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

   Par exemple, tapez le nom de dossier C:\SitesWeb\ListeDonnéesFormat.

5. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

   Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement le langage de programmation pour chaque page.

6. Cliquez sur OK.

   Visual Web Developer crée le dossier et une page nommée Default.aspx.

Ajout d'un contrôle DataList

Pour la première partie de cette procédure pas à pas, vous ajouterez un contrôle DataList, puis configurerez sa source de données.

Pour ajouter et configurer un contrôle DataList pour afficher des données dans une grille

1. Basculez en mode Design.

2. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle DataList sur la page.

3. Cliquez avec le bouton droit sur le contrôle DataList, puis cliquez sur Afficher la balise active.

4. Dans le menu Tâches DataList, dans la liste Choisir la source de données, cliquez sur Nouvelle source de données.

   L'Assistant Configurer la source de données s'affiche.

5. Cliquez sur Base de données.

   Cela spécifie que vous souhaitez obtenir des données à partir d'une base de données qui prend en charge des instructions SQL. (Cela inclut le SQL Server et d'autres bases de données compatibles OLEDB.)

6. Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle de source de données par défaut est affiché (SqlDataSource1). Vous pouvez laisser ce nom.

7. Cliquez sur OK.

   L'Assistant Configurer la source de données affiche une page dans laquelle vous pouvez créer une connexion.

8. Cliquez sur Nouvelle connexion.

   • Si la page Choisir la source de données s'affiche, dans la liste Source de données, sélectionnez le type de source de données que vous utiliserez. Pour cette procédure pas à pas, le type de source de données est Microsoft SQL Server. Dans la liste Fournisseur de données, cliquez sur Fournisseur de données .NET Framework pour SQL Server, puis sur Continuer.

   La page Ajouter une connexion apparaît.

9. Sur la page Ajouter une connexion, dans la zone de texte Nom du serveur, tapez le nom de l'ordinateur exécutant la base de données SQL Server.

10. Pour obtenir les informations d'identification de connexion, sélectionnez l'option qui est appropriée pour accéder à l'ordinateur exécutant la base de données SQL Server (sécurité intégrée ou ID et mot de passe spécifiques) et, si besoin est, entrez un nom d'utilisateur et un mot de passe.

11. Activez la case à cocher Enregistrer mon mot de passe.

12. Cliquez sur le bouton Sélectionnez ou entrez un nom de base de données, puis entrez Northwind.

13. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.

    L'Assistant Configurer la source de données apparaît avec les informations de connexion.

14. Cliquez sur Suivant.

    L'Assistant Configurer la source de données affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration. Le stockage de la chaîne de connexion dans le fichier de configuration présente deux avantages :

    • Le stockage dans la page est plus sécurisé.

    • Vous pouvez réutiliser la même chaîne de connexion dans plusieurs pages.

15. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que soit activée, puis cliquez sur Suivant. Vous pouvez laisser la chaîne de connexion par défaut.

    L'Assistant Configurer la source de données affiche une page dans laquelle vous pouvez spécifier les données à récupérer à partir de la base de données.

16. Assurez-vous que Spécifiez les colonnes d'une table ou d'une vue est sélectionné.

17. Dans la liste Nom, cliquez sur Catégories.

18. Sous Colonnes, activez les cases CategoryID et CategoryName.

    L'Assistant Configurer la source de données affiche l'instruction SQL que vous créez dans une zone en bas de la page.

    Remarque :
    L'Assistant Configurer la source de données vous permet de spécifier des critères de sélection (clause WHERE) et d'autres options de requête SQL. Pour cette partie de la procédure pas à pas, vous créerez une instruction unique sans option de sélection ou de tri.

19. Cliquez sur Suivant.

20. Cliquez sur Tester la requête pour vous assurer d'obtenir les données que vous souhaitez.

21. Cliquez sur Terminer.

    L'Assistant Configurer la source de données se ferme et vous retournez au contrôle SqlDataSource. Si vous consultez les propriétés du contrôle SqlDataSource, vous pouvez voir que l'Assistant Configurer la source de données a créé des valeurs pour les propriétés ConnectionString et SelectQuery. Bien que Propriétés dans Visual Web Developer affiche la chaîne de connexion complète, seul l'identificateur de chaîne de connexion est enregistré dans la page (dans ce cas, NorthwindConnectionString).

Mise en forme du contrôle DataList

À ce stade, vous avez un contrôle DataList sur la page avec une disposition par défaut pour les informations provenant de la table Categories. L'avantage du contrôle DataList est que vous pouvez créer une disposition de formulaire libre pour les données. Dans cette section, vous utiliserez un modèle et le configurerez avec le texte et les contrôles pour personnaliser l'affichage de données.

Pour mettre en forme la disposition du contrôle DataList

1. Cliquez avec le bouton droit sur le contrôle DataList, cliquez sur Modifier un modèle, puis sur Modèles d'élément.

   Le contrôle DataList bascule vers le mode de modification de modèle et affiche des zones de modèle pour ces modèles :

   • ItemTemplate qui contient le texte et les contrôles qui sont affichés par défaut dans le contrôle DataList.

   • AlternatingItemTemplate qui est un modèle facultatif dans lequel vous pouvez créer une disposition pour chaque autre enregistrement de données. En général, la propriété AlternatingItemTemplate est semblable à la propriété ItemTemplate, mais la propriété AlternatingItemTemplate utilise une couleur d'arrière-plan différente pour un effet de bandes.

   • SelectedItemTemplate, qui définit la disposition d'un enregistrement de données qui est sélectionné explicitement à l'aide d'un clic sur un bouton ou d'une autre opération. Les utilisations types pour ce modèle consistent à fournir un affichage étendu d'un enregistrement de données ou de servir d'enregistrement maître pour une relation maître/détail. Vous devez écrire le code pour prendre en charge le passage d'un enregistrement dans le mode sélectionné. (Vous le ferez différemment dans cette procédure pas à pas. Pour plus d'informations, consultez Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList et Procédure pas à pas : création de pages Web maître/détail dans Visual Studio.)

   • EditItemTemplate, qui définit la disposition du mode édition pour un enregistrement de données. En général, la propriété EditItemTemplate inclut des contrôles modifiables, tels que les contrôles TextBox et CheckBox dans lesquels les utilisateurs peuvent modifier l'enregistrement de données. Vous devez écrire le code pour prendre en charge le passage d'un enregistrement en mode édition et gérer les enregistrements lorsque les modifications sont terminées. (Vous le ferez différemment dans cette procédure pas à pas. Pour plus d'informations sur le code d'écriture pour l'enregistrement des modifications, consultez Comment : permettre aux utilisateurs de modifier des éléments dans des contrôles serveur Web DataList.)

   Par défaut, Visual Web Developer remplit le modèle d'élément avec un contrôle Label lié aux données pour chaque colonne de données dans la source de données. De plus, Visual Web Developer génère le texte statique pour que chaque étiquette serve de légende.

2. Faites glisser la poignée de redimensionnement droite pour élargir le contrôle DataList afin qu'il prenne la plupart de la largeur de page.

3. Modifiez le modèle d'élément pour réordonner les contrôles Label et créer une légende afin que le contenu du modèle soit similaire à l'exemple de code suivant.

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Cliquez sur le contrôle CategoryNameLabel. Dans Propriétés, développez le nœud Font, puis affectez true à Bold.

5. En mode Design, sur le contrôle DataList, cliquez avec le bouton droit sur la barre de titre, cliquez sur Modifier un modèle, puis sur Modèle de séparateur.

   Le modèle de séparateur vous permet de spécifier le texte ou les autres éléments affichés entre des enregistrements de données.

6. Dans la Boîte à outils, à partir du groupe HTML, faites glisser un élément Horizontal Rule dans le modèle de séparateur.

7. Sur le contrôle DataList, cliquez avec le bouton droit sur la barre de titre, puis cliquez sur Terminer la modification du modèle.

Test du contrôle DataList

Vous pouvez maintenant tester la disposition que vous avez créée.

Pour tester le contrôle DataList

• Appuyez sur CTRL+F5 pour exécuter la page.

  La page affiche une liste de noms de catégories et d'ID, avec une ligne entre chaque enregistrement.

Affichage d'informations connexes dans le contrôle DataList

Le contrôle DataList que vous utilisez actuellement affiche les enregistrements des catégories, à l'aide de la disposition personnalisée que vous avez définie précédemment. Vous avez à peine modifié la disposition par défaut, mais vous pouvez voir qu'en utilisant le modèle, vous pouvez réorganiser le texte et les contrôles, mettre en forme le contenu et modifier l'affichage d'enregistrement de données de manières différentes.

La disposition peut inclure l'enregistrement en cours, aussi bien que des enregistrements connexes. Dans cette partie de la procédure pas à pas, vous modifierez la disposition afin que chaque ligne affiche une catégorie et les produits de cette catégorie. En effet, vous afficherez une relation maître/détail dans chaque ligne du contrôle DataList. Vous devrez écrire un peu de code pour activer ce scénario.

Pour afficher des informations connexes à l'intérieur du contrôle DataList

1. Cliquez avec le bouton droit sur le contrôle DataList, cliquez sur Modifier les modèles, puis sur Modèles d'élément.

2. Dans la Boîte à outils, à partir du groupe Standard, faites glisser un contrôle BulletedList sur le modèle d'élément, puis déposer le contrôle BulletedList en-dessous des informations de catégorie.

   Le contrôle BulletedList peut afficher des données, avec une colonne de données par élément à puce.

3. Cliquez avec le bouton droit sur le contrôle BulletedList, puis cliquez sur Afficher la balise active.

4. Cliquez sur Choisir la source de données.

   Vous créerez un deuxième contrôle de source de données pour lire les enregistrements connexes.

5. Dans la boîte de dialogue Choisir la source de données, dans la liste Sélectionner une source de données, cliquez sur Nouvelle source de données.

6. Cliquez sur Base de données.

7. Dans la zone Spécifiez un ID pour la source de données, tapez bulletedListDataSource.

   Bien que vous puissiez habituellement laisser le nom par défaut de la source de données, dans ce cas il est utile d'assigner un nom spécifique, prévisible à la source de données afin que vous puissiez le référencer ultérieurement dans le code.

8. Cliquez sur OK.

   L'Assistant Configurer la source de données s'affiche.

9. Dans la liste Quelle connexion de données votre application doit-elle utiliser pour établir une connexion à la base de données ?, cliquez sur le nom de la connexion que vous avez créée précédemment dans cette procédure pas à pas, puis cliquez sur Suivant.

   L'Assistant Configurer la source de données affiche une page dans laquelle vous pouvez créer une instruction SQL.

10. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom, cliquez sur Produits.

11. Dans la zone Colonnes, sélectionnez la zone ProductName.

    Le contrôle BulletedList affiche une seule colonne.

12. Cliquez sur le bouton WHERE.

    La boîte de dialogue Ajouter une clause WHERE s'affiche.

13. Dans la liste Colonne, cliquez sur CategoryID.

14. Dans la liste Opérateur, cliquez sur =.

15. Dans la liste Source, cliquez sur Aucune.

    Cela indique que la valeur de la colonne CategoryID sera fournie dans une variable.

16. Cliquez sur Ajouter, puis sur OK, sur Suivant, et enfin sur Terminer.

    Le test de la requête ne fonctionnera pas avec la variable.

17. Dans la liste Sélectionnez un champ de données à afficher dans BulletedList, cliquez sur ProductName. Cliquez sur OK.

18. Sur le contrôle DataList, cliquez avec le bouton droit sur la barre de titre, puis cliquez sur Terminer la modification du modèle.

Écriture du code pour définir l'ID de la catégorie

Instruction SQL que vous avez créée pour que le contrôle bulletedListDataSource soit semblable au code suivant :

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

Au moment de l'exécution, le contrôle DataList affiche une liste d'enregistrements de catégories qui inclut à la fois le nom et l'ID de la catégorie. Dans la section précédente, vous avez ajouté un contrôle BulletedList qui affichera tous les produits pour chaque catégorie. Comme chaque enregistrement de catégorie est affiché, le contrôle DataList exécute une requête pour obtenir les produits de cette catégorie, à l'aide de la requête précédente.

Pour chaque enregistrement affiché, vous devez fournir l'ID de catégorie à la requête. Pour ce faire, vous pouvez écrire un morceau de code qui obtient l'ID de catégorie de l'enregistrement affiché actuellement et qui passe l'ID de catégorie en paramètre à la requête du contrôle bulletedListDataSource.

Pour écrire le code pour définir l'ID de catégorie

1. Cliquez sur le contrôle DataList, et puis dans Propriétés, sur la barre d'outils, cliquez sur Événements.

2. Double-cliquez sur ItemDataBound pour créer un gestionnaire d'événements pour cet événement.

3. Copiez le code suivant dans le gestionnaire :

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   L'événement ItemDataBound est déclenché pour chaque enregistrement de données affiché, vous fournissant une possibilité de lire ou de modifier les données. Ce code fait les choses suivantes :

   1. Vérifie que l'événement se produit lors de la liaison d'un objet ItemTemplate ou AlternatingItemTemplate (et non d'un objet SeparatorTemplate ou de tout autre type de modèle).

   2. Utilise la méthode FindControl pour obtenir une référence à l'instance de contrôle SqlDataSource créée dans chaque modèle d'élément.

   3. Obtient la valeur de la colonne de données CategoryID en évaluant la propriété DataItem actuelle.

   4. Définit la variable CategoryID de la requête paramétrée en définissant sa propriété DefaultValue dans la collection SelectParameters.

Test du code

Vous pouvez à présent tester votre code.

Pour tester le code pour définir l'ID de catégorie

• Appuyez sur CTRL+F5 pour exécuter la page.

  Le contrôle DataList affiche chaque enregistrement de catégorie, et pour chaque enregistrement, il affiche également, dans une liste à puce, les produits qui appartiennent à cette catégorie.

Étapes suivantes

Cette procédure pas à pas a illustré un scénario simple, mais complet pour afficher et mettre en forme les données avec le contrôle serveur Web DataList. Vous pouvez créer des pages et des applications pilotées par des données plus sophistiquées en utilisant les techniques et les contrôles illustrés dans cette procédure pas à pas. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :

• Écrivez le code pour permettre aux utilisateurs de sélectionner des éléments dans le contrôle serveur Web DataList. Pour plus d'informations, consultez Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList.

• Créez un enregistrement maître pour une relation maître/détail. Pour plus d'informations, consultez Procédure pas à pas : création de pages Web maître/détail dans Visual Studio.

• Apprenez à utiliser la mise en cache de sortie dans vos applications de données pour améliorer vos performances. Pour plus d'informations, consultez Procédure pas à pas : utilisation de la mise en cache de sortie pour améliorer les performances d'un site Web.

Voir aussi

Tâches

Comment : permettre aux utilisateurs de sélectionner des éléments dans des contrôles serveur Web DataList

Procédure pas à pas : création de pages Web maître/détail dans Visual Studio

Référence

DataList