Partager via

Procédure pas à pas : création d'un contrôle GridView imbriqué

  • Article

Mise à jour : novembre 2007

Le contrôle GridView affiche des lignes de données dans une grille (un tableau HTML), en affichant une ligne de données par ligne de grille. Cette procédure pas à pas explique comment étendre les fonctionnalités du contrôle GridView pour autoriser les lignes de grille individuelles à afficher des données provenant d'une table de données associée. Dans cette procédure pas à pas, vous afficherez des données associées dans un contrôle GridView imbriqué, c'est-à-dire un contrôle GridView à l'intérieur de la ligne de grille du contrôle GridView parent.

Un exemple de données imbriquées pourrait être un contrôle GridView qui affiche une liste de clients, où chaque ligne du contrôle GridView inclut un autre contrôle GridView qui affiche les commandes de ce client.

Dans cette procédure pas à pas, les deux contrôles GridView utilisent des contrôles SqlDataSource pour récupérer les données de la source de données.

Au cours de cette procédure pas à pas, vous allez apprendre à effectuer les tâches suivantes :

  • vous connecter à une base de données SQL Server dans Microsoft Visual Web Developer ;

  • utiliser le contrôle SqlDataSource pour gérer l'accès aux données et la liaison des données ;

  • afficher des données retournées de la base de données dans le contrôle GridView ;

  • créer un TemplateField avec des contrôles imbriqués affichés par le contrôle GridView ;

  • personnaliser dynamiquement l'affichage de chaque ligne en fonction des conditions d'exécution ;

  • utiliser éventuellement la mise en cache de données avec le contrôle SqlDataSource pour réduire les demandes envoyées à la base de données.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin des éléments suivants :

  • Visual Web Developer (Visual Studio).

  • 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.

  • 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.

Création du site Web

Si vous avez déjà créé un site Web dans Visual Web Developer en effectuant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer, vous pouvez utiliser ce site Web et passer à la section suivante. Sinon, 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, cliquez sur Site Web ASP.NET.

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

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

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

  6. Cliquez sur OK.

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

Ajout d'une source de données pour le contrôle GridView

Pour afficher des données dans une page Web ASP.NET, vous avez besoin des éléments suivants :

  • Connexion à une source de données (telle qu'une base de données). Dans la procédure suivante, vous créerez une connexion à la base de données Northwind SQL Server.

  • Un contrôle sur la page pour afficher les données.

Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données du contrôle SqlDataSource.

Pour ajouter une source de données au contrôle GridView

  1. Ouvrez ou basculez vers la page Default.aspx.

  2. Basculez en mode Design.

  3. À partir du groupe Data de la Boîte à outils, faites glisser un contrôle SqlDataSource sur la page.

    Si la balise active Tâches SqlDataSource n'apparaît pas, cliquez avec le bouton droit sur le contrôle SqlDataSource et cliquez sur Afficher la balise active.

  4. Dans le volet Tâches SqlDataSource, cliquez sur Configurer la source de données.

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

  5. Cliquez sur Nouvelle connexion.

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

    • Si la liste Source de données n'affiche pas Microsoft SQL Server (SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server.

    • Si la boîte de dialogue Choisir la source de données apparaît au lieu de la boîte de dialogue Propriétés de connexion, 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.

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

  7. Sous Connexion au serveur, sélectionnez l'option appropriée pour accéder à la base de données SQL Server (sécurité intégrée ou identificateur et mot de passe spécifiques). Si nécessaire, entrez un nom d'utilisateur et un mot de passe.

  8. Si vous avez entré un mot de passe, activez la case à cocher Enregistrer mon mot de passe.

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

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

  11. Dans l'Assistant Configurer la source de données, cliquez sur Suivant.

  12. Assurez-vous que la case à cocher Oui, enregistrez cette connexion en tant que est activée.

  13. Nommez la connexion NorthwindConnectionString, puis cliquez sur Suivant.

  14. Dans l'Assistant Configurer l'instruction Select, sélectionnez Spécifiez les colonnes d'une table ou d'une vue.

  15. Dans la zone de liste Nom, sélectionnez Customers.

  16. Dans le panneau Colonnes, sélectionnez les colonnes CustomerID et CompanyName.

  17. Cliquez sur Suivant.

  18. Cliquez sur Terminer.

Ajout d'un contrôle GridView pour afficher les données

Après avoir défini une source de données pour récupérer les données, vous devez ajouter un contrôle à la page pour afficher les données.

Dans la procédure suivante, vous afficherez des données dans un contrôle GridView. Le contrôle GridView obtiendra ses données du contrôle SqlDataSource que vous avez ajouté précédemment.

Pour ajouter et configurer un contrôle GridView pour afficher des données

  1. Vérifiez que vous êtes en mode Design pour la page Default.aspx.

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

  3. Dans la zone de liste Choisir la source de données du menu Tâches GridView, sélectionnez le contrôle SqlDataSource que vous avez ajouté précédemment, SqlDataSource1.

  4. Activez la case à cocher Activer la pagination.

  5. Dans la fenêtre Propriétés, développez la propriété RowStyle du contrôle GridView, puis définissez la propriété VerticalAlign à Top. Cette procédure alignera le texte dans la ligne de grille en haut des cellules, car la grille imbriquée affichera plusieurs lignes.

Ajout d'un contrôle GridView imbriqué pour afficher les données associées

Vous devez à présent créer une source de données imbriquée et un contrôle GridView pour afficher les données associées dans chaque ligne. Pour cela, vous exécuterez les étapes suivantes :

Pour ajouter et configurer un contrôle GridView imbriqué pour afficher des données

  1. Vérifiez que vous êtes en mode Design pour la page Default.aspx.

  2. Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez Afficher la balise active.

  3. Cliquez sur Modifier les colonnes.

    La boîte de dialogue Champs s'affiche.

  4. Dans le panneau Champs disponibles, sélectionnez un TemplateField, puis cliquez sur Ajouter.

  5. Dans le panneau Propriétés de TemplateField, définissez HeaderText à Orders.

  6. Cliquez sur OK.

  7. Dans le panneau Tâches GridView, cliquez sur Modifier les modèles.

  8. Dans le panneau Mode de modification de modèle de la zone de liste Afficher, sélectionnez ItemTemplate.

  9. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle SqlDataSource sur la page vers la zone modifiable de ItemTemplate.

    Si la balise active Tâches SqlDataSource n'apparaît pas, cliquez avec le bouton droit sur le contrôle SqlDataSource et cliquez sur Afficher la balise active.

  10. Dans la balise active Tâches SqlDataSource, cliquez sur Configurer la source de données.

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

  11. Pour l'étape Choisir votre connexion de données, sélectionnez le NorthwindConnectionString créé précédemment dans cette procédure pas à pas, puis cliquez sur Suivant.

  12. Dans l'étape Configurer l'instruction Select de l'Assistant, sélectionnez Spécifiez les colonnes d'une table ou d'une vue.

  13. Dans la liste Nom, sélectionnez Orders.

  14. Dans le panneau Colonnes, sélectionnez les colonnes OrderID et OrderDate.

  15. Cliquez sur WHERE pour ajouter un paramètre à l'instruction SELECT.

  16. Dans la fenêtre Ajouter une clause WHERE, sélectionnez CustomerID dans la zone de liste Colonne.

  17. Sélectionnez Aucun dans la zone de liste Source.

  18. Cliquez sur Ajouter.

    Cette opération crée un paramètre de sélection auquel vous affecterez la valeur CustomerID pour chaque ligne liée au contrôle GridView parent.

  19. Cliquez sur OK.

  20. Cliquez sur Suivant.

  21. Cliquez sur Terminer.

  22. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle GridView vers la zone modifiable de ItemTemplate.

    Si la balise active Tâches GridView n'apparaît pas, cliquez avec le bouton droit sur le contrôle GridView et cliquez sur Afficher la balise active.

  23. Dans la balise active Tâches GridView, dans la zone de liste Choisir la source de données, sélectionnez le nom du contrôle SqlDataSource imbriqué, SqlDataSource2.

  24. Cliquez avec le bouton droit sur le contrôle GridView parent, GridView1, puis sélectionnez Afficher la balise active.

  25. Dans le panneau Tâches GridView, cliquez sur Terminer la modification du modèle.

    Remarque :

    Le contrôle GridView imbriqué n'est pas affiché en mode Design.

  26. Dans le panneau Propriétés de GridView1, cliquez sur le bouton Événements.

  27. Dans la zone RowDataBound, tapez GridView1_RowDataBound puis appuyez sur Entrée.

    Visual Web Developer crée un gestionnaire d'événements pour l'événement RowDataBound du contrôle GridView. Le code ressemblera à l'exemple de code suivant.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. Ajoutez le code suivant à la procédure :

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    Le code récupère la valeur CustomerID pour la ligne actuelle et la définit comme valeur de paramètre de sélection pour le contrôle SqlDataSource imbriqué, SqlDataSource2.

  29. Enregistrez les modifications apportées aux fichiers.

Test de la page

Vous pouvez à présent exécuter la page.

Pour tester la page

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

    Le contrôle GridView affiche les lignes de données de la table Customers de Northwind avec les données de la table Orders de Northwind pour chaque client imbriqué dans chaque ligne.

  2. Fermez le navigateur.

Utilisation de la mise en cache avec un contrôle GridView imbriqué

À ce stade de la procédure pas à pas, vous avez créé une page avec les contrôles GridView imbriqués. La page, telle qu'écrite actuellement, interroge une fois la base de données sur le contrôle GridView parent et une autre fois sur chaque contrôle GridView imbriqué.

Pour réduire la charge de la base de données, vous pouvez modifier votre requête imbriquée pour retourner toutes les lignes, mettre en cache les résultats, puis filtrer ces résultats pour chaque contrôle GridView imbriqué.

Remarque :

Cette solution n'est pas recommandée pour les bases de données volumineuses. Si vous devez récupérer des données d'une base de données volumineuse, générez un objet de données qui récupère uniquement les lignes requises et crée une liaison à l'aide du contrôle ObjectDataSource. Pour plus d'informations, consultez Vue d'ensemble du contrôle serveur Web ObjectDataSource.

Pour configurer un contrôle SqlDataSource imbriqué pour mettre en cache les résultats d'une requête

  1. Vérifiez que vous êtes en mode Design pour la page Default.aspx.

  2. Cliquez avec le bouton droit sur le contrôle GridView parent, GridView1, puis cliquez sur Modifier un modèle.

  3. Dans le ItemTemplate de la colonne Orders, sélectionnez le contrôle SqlDataSource imbriqué, SqlDataSource2.

  4. Dans la fenêtre Propriétés, affectez à la propriété EnableCaching la valeur true.

  5. Affectez à la propriété FilterExpression la valeur CustomerID='{0}'.

  6. Dans la propriété FilterParameters, cliquez sur le bouton de sélection () pour ouvrir la fenêtre Éditeur de collections Parameter.

  7. Dans la fenêtre Éditeur de collections Parameter, cliquez sur Ajouter un paramètre.

  8. Dans la zone Nom, tapez CustomerID.

  9. Cliquez sur OK.

  10. Cliquez avec le bouton droit sur le contrôle SqlDataSource imbriqué, SqlDataSource2 et sélectionnez Afficher la balise active.

  11. Cliquez sur Configurer la source de données.

  12. Ne modifiez pas les informations de connexion et cliquez sur Suivant.

  13. Dans l'étape Configurer l'instruction Select, sélectionnez Spécifiez les colonnes d'une table ou d'une vue.

  14. Dans la zone de liste Nom, sélectionnez Orders.

  15. Dans la section Colonnes, sélectionnez les colonnes OrderID, CustomerID et OrderDate, puis cliquez sur Suivant.

  16. Cliquez sur Terminer.

  17. Lorsque vous êtes invité à actualiser les champs et les clés du contrôle GridView imbriqué, GridView2, cliquez sur Non.

    Les colonnes affichées par le contrôle GridView imbriqué ne changeront pas.

    Vous avez configuré le contrôle SqlDataSource imbriqué, SqlDataSource2, pour récupérer toutes les données de commande de la base de données et les mettre en cache localement. Lorsque le contrôle GridView imbriqué est lié aux données, un filtre est appliqué pour n'afficher que les commandes associées à la valeur CustomerID de la ligne actuelle.

  18. Lors de l'utilisation d'une page code-behind, cliquez avec le bouton droit dans une zone vide de la page, puis cliquez sur Afficher le code.

  19. Modifiez le code pour le gestionnaire d'événements RowDataBound comme suit :

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    Dans cette version du code, au lieu de définir une valeur dans la collection SelectParameters du contrôle SqlDataSource, vous définissez une valeur dans sa collection FilterParameters.

  20. Enregistrez le fichier.

Test de la page

Vous pouvez à présent exécuter la page.

Pour tester la page

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

    Le contrôle GridView affiche les lignes de données de la table Customers de Northwind avec les données de la table Orders de Northwind pour chaque client imbriqué dans chaque ligne. Toutefois, toutes les données liées au contrôle GridView seront demandées une fois, lorsque la première ligne est liée aux données. Les données sont mises en cache pour être utilisées avec les lignes restantes du contrôle GridView.

  2. Fermez le navigateur.

Étapes suivantes

Cette procédure pas à pas vous a montré comment étendre les fonctionnalités du contrôle GridView pour afficher des données associées en utilisant les contrôles GridView imbriqués dans une page Web ASP.NET. Vous pouvez également étendre votre application pour permettre la mise à jour ou la suppression de données ou pour permettre aux utilisateurs d'insérer de nouveaux enregistrements à l'aide d'un contrôle DetailsView ou FormView. Vous pouvez également utiliser des contrôles autres que le contrôle TextBox, notamment un contrôle DropDownList, pour modifier une valeur. Pour plus d'informations, consultez les rubriques suivantes :

Voir aussi

Tâches

Comment : sécuriser des chaînes de connexion lors de l'utilisation de contrôles de source de données

Procédure pas à pas : affichage d'une liste déroulante tout en modifiant le contrôle serveur Web GridView

Procédure pas à pas : accès aux données de base dans les pages Web