Procédure pas à pas : création de pages Web maître/détail dans Visual Studio
Mise à jour : novembre 2007
De nombreuses pages Web affichent les données de différentes façons, affichant souvent les données à partir de tables connexes. Cette procédure pas à pas montre différentes manières d'utiliser des données dans des contrôles multiples et à partir de tables multiples, notamment avec celles qui affichent une relation maître/détail. Cette procédure pas à pas illustre les tâches suivantes :
remplissage d'une liste déroulante avec des données de base de données ;
création de filtres : instructions SQL avec une clause WHERE (requêtes paramétrées) ;
affichage de données filtrées selon la sélection de l'utilisateur dans une liste déroulante ;
affichage de détails à propos d'un enregistrement sélectionné à l'aide du contrôle DetailsView ;
sélection d'un enregistrement dans une page et affichage d'un enregistrement connexe dans une deuxième page.
Composants requis
Pour exécuter cette procédure pas à pas, vous avez besoin de :
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.
.gif "Remarque")
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 devez peut-être mettre à niveau les composants MDAC déjà installés sur votre ordinateur. Pour plus d'informations, consultez l'article « Microsoft Data Access Components (MDAC) Installation » dans MSDN Library.
Création du site Web
Si vous avez déjà créé un site Web dans Microsoft Visual Web Developer (par exemple, en suivant les étapes décrites dans Procédure pas à pas : création d'une page Web de base dans Visual Web Developer ou Procédure pas à pas : accès aux données de base dans les pages Web), vous pouvez utiliser ce site Web et passer à la section suivante, « Connexion à SQL Server ». Sinon, créez un site et une page Web en suivant ces étapes.
Pour créer un site Web de système de fichiers
Ouvrez Visual Web Developer.
Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.
Par exemple, tapez le nom du dossier C:\SitesWeb.
Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.
Cliquez sur OK.
Visual Web Developer crée le dossier et une page nommée Default.aspx.
Connexion à SQL Server
Pour utiliser les données, vous devez établir une connexion à une base de données. Dans cette procédure pas à pas, vous créerez une connexion indépendamment de l'utilisation des pages Web ou des contrôles.
Pour créer une connexion à SQL Server
Appuyez sur CTRL+ALT+S pour afficher l'Explorateur de bases de données. Dans l'Explorateur de bases de données, cliquez avec le bouton droit sur Connexions de données et choisissez Ajouter une connexion.
La boîte de dialogue Modifier la source de données s'affiche.
Dans la boîte de dialogue Modifier la source de données, sélectionnez Microsoft SQL Server, puis cliquez sur OK.
Dans la boîte de dialogue Ajouter une connexion, procédez comme suit :
Entrez ou sélectionnez le nom de votre ordinateur SQL Server. Pour un serveur sur votre ordinateur, entrez (local).
Sélectionnez Utiliser l'authentification SQL Server.
Entrez un nom d'utilisateur et un mot de passe.
Sélectionnez Enregistrer mon mot de passe.
Sélectionnez Northwind comme base de données.
Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion fonctionne, cliquez sur OK.
La connexion est ajoutée à l'explorateur de serveurs.
Utilisation d'une liste déroulante comme maître
Dans cette partie de la procédure pas à pas, vous ajouterez une liste déroulante à une page et la remplirez avec une liste de catégories de la table Northwind. Lorsque les utilisateurs sélectionnent une catégorie, la page affichera les produits de cette catégorie.
Pour créer et remplir une liste déroulante
Basculez vers la page Default.aspx ou ouvrez-la. Si vous utilisez un site Web que vous aviez déjà créé, ajoutez ou ouvrez une page que vous pouvez utiliser dans cette procédure pas à pas.
Basculez en mode Design.
Tapez Sélectionner les produits par catégorie dans la page et mettez en forme le texte en tant que titre à l'aide de la liste déroulante Format du bloc au-dessus de la Boîte à outils.
À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle DropDownList sur la page.
Dans Tâches DropDownList, activez la case à cocher Activer AutoPostBack.
Cela configure le contrôle de façon à ce qu'il entraîne la publication de la page sur le serveur dès qu'une sélection est faite dans la liste, au lieu d'attendre que l'utilisateur clique sur un bouton.
Dans Tâches DropDownList, sélectionnez Choisir la source de données.
L'Assistant Choisir la source de données démarre.
Dans la liste Sélectionner une source de données, cliquez sur <Nouvelle source de données>.
La boîte de dialogue Assistant Configuration de source de données s'affiche.
Sélectionnez 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.)
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.
Cliquez sur OK.
L'Assistant affiche la page Configurer la source de données - SqlDataSource1 dans laquelle vous pouvez sélectionner une connexion de données.
Dans la liste déroulante, sélectionnez la connexion Northwind que vous avez créée à une étape précédente de la procédure pas à pas.
Cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la chaîne de connexion dans le fichier de configuration.
Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que soit activée, puis cliquez sur Suivant. (Vous pouvez laisser le nom de chaîne de connexion par défaut.)
L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à récupérer à partir de la base de données.
Dans la liste Nom sous Table or View Options, sélectionnez Catégories.
Dans la zone Colonnes, sélectionnez CategoryID et CategoryName.
Cliquez sur Suivant.
Cliquez sur Tester la requête pour vous assurer d'obtenir les données que vous souhaitez.
Cliquez sur Terminer.
L'Assistant Configuration de source de données s'affiche avec le nom du contrôle de source de données que vous avez configuré.
Dans la liste Sélectionnez un champ de données à afficher dans DropDownList, cliquez sur CategoryName.
Remarque :Si aucun élément n'apparaît dans la liste, cliquez sur le lien Actualiser le schéma.
Cela spécifie que la valeur du champ CategoryName sera affichée sous forme de texte de l'élément dans la liste déroulante.
Dans la liste Sélectionnez un champ de données pour la valeur de DropDownList, sélectionnez CategoryID.
Cela spécifie que, lorsqu'un élément est sélectionné, le champ CategoryID sera retourné en tant que valeur de l'élément.
Cliquez sur OK.
Avant de continuer, testez la liste déroulante.
Pour tester la liste déroulante
Appuyez sur CTRL+F5 pour exécuter la page.
Lorsque la page est affichée, examinez la liste déroulante.
Sélectionnez une catégorie afin de vous assurer que la liste effectue une publication.
Vous pouvez à présent afficher les produits pour la catégorie sélectionnée dans la liste déroulante.
Utilisation d'une grille pour afficher des informations détaillées
Vous pouvez à présent étendre la page afin d'inclure une grille. Lorsque les utilisateurs effectueront une sélection dans la liste déroulante de catégories, la grille affichera les produits pour cette catégorie.
Pour utiliser une grille pour afficher des informations détaillées
Basculez vers la page Default.aspx (ou la page que vous avez utilisée) ou ouvrez-la, puis basculez en mode Design.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView, sélectionnez <Nouvelle source de données> dans la liste Choisir la source de données.
L'Assistant Configuration de source de données s'ouvre.
Sélectionnez Base de données.
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é (SqlDataSource2). Vous pouvez laisser ce nom.
Cliquez sur OK.
L'Assistant affiche une page dans laquelle vous pouvez sélectionner une connexion.
Dans la liste déroulante des connexions, sélectionnez la connexion que vous avez créée et stockée à une étape précédente de la procédure pas à pas (NorthwindConnectionString).
Cliquez sur Suivant.
L'Assistant affiche la page Configurer la source de données - SqlDataSource2 dans laquelle vous pouvez créer une instruction SQL.
Dans la liste Nom, sélectionnez Produits.
Dans la zone Colonnes, sélectionnez ProductID, ProductName et CategoryID.
Cliquez sur WHERE.
La boîte de dialogue Ajouter une clause WHERE s'affiche.
Dans la liste Colonnes, sélectionnez CategoryID.
Dans la liste Opérateur, sélectionnez =.
Dans la liste Source, sélectionnez Contrôle.
Sous Propriétés du paramètre, dans la liste ID du contrôle, sélectionnez DropDownList1.
Les deux dernières étapes spécifient que la requête obtiendra la valeur de recherche pour l'ID de la catégorie du contrôle DropDownList que vous avez ajouté précédemment.
Cliquez sur Ajouter.
Cliquez sur OK pour fermer la boîte de dialogue Ajouter une clause WHERE.
Cliquez sur Suivant.
Dans la page d'aperçu, cliquez sur Tester la requête.
L'Assistant affiche une boîte de dialogue qui vous invite à entrer une valeur à utiliser dans la clause WHERE.
Tapez 4 dans la zone, puis cliquez sur OK.
Les enregistrements de produits pour la catégorie 4 sont affichés.
Cliquez sur Terminer pour fermer l'Assistant.
Vous pouvez à présent tester l'affichage maître/détail.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Lorsque la page s'affiche, les produits du premier élément de la liste déroulante sont affichés.
Sélectionnez une catégorie dans la liste et confirmez que les produits correspondants sont affichés dans la grille.
Affichage des données maîtres/détails sur la même page
Dans cette partie de la procédure pas à pas, vous afficherez des données provenant de tables connexes sur une page. Les données de la table principale sont affichées dans une grille où les utilisateurs peuvent sélectionner des lignes. Lorsqu'ils le font, un ou plusieurs enregistrements de détails sont affichés dans un contrôle à défilement ailleurs sur la page. À titre d'illustration, vous utiliserez la table Northwind Categories en tant que table principale et la table Products en tant que table secondaire.
Pour afficher les enregistrements maîtres
Ajoutez une nouvelle page au site Web et nommez-la MasterDetails2.aspx.
Basculez en mode Design.
Tapez Page maître/détail dans la page et mettez en forme le texte en tant que titre.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView, dans la liste Choisir la source de données, cliquez sur <Nouvelle source de données>, puis utilisez les étapes suivantes pour configurer une source de données pour le contrôle GridView :
Sélectionnez Base de données.
Cliquez sur OK.
Dans la liste déroulante des connexions, sélectionnez la connexion que vous avez créée et stockée à une étape précédente de la procédure pas à pas (NorthwindConnectionString).
Cliquez sur Suivant.
Dans la liste Nom, sélectionnez Catégories.
Dans la zone Colonnes, sélectionnez CategoryID et CategoryName.
Cliquez sur Suivant, puis sur Terminer.
Sélectionnez le contrôle GridView, puis, dans le menu Tâches GridView, choisissez Modifier les colonnes.
La boîte de dialogue Champs s'affiche.
Sous Champs disponibles, ouvrez le nœud CommandField, choisissez Sélectionner, puis cliquez sur Ajouter pour l'ajouter à la liste Champs sélectionnés.
Dans la liste Champs sélectionnés, choisissez Sélectionner, puis dans la grille des propriétés CommandField, affectez Détails à sa propriété SelectText.
Cliquez sur OK pour fermer la boîte de dialogue Champs.
Une nouvelle colonne avec un lien hypertexte Détails est ajoutée à la grille.
Sélectionnez le contrôle GridView et dans la fenêtre Propriétés, assurez-vous que sa propriété DataKeyNames a la valeur CategoryID.
Cela spécifie que lorsque vous sélectionnez une ligne dans la grille, ASP.NET peut rechercher la clé de l'enregistrement Categories actuellement affiché dans un emplacement connu.
La grille vous permet de sélectionner une catégorie. L'étape suivante consiste à ajouter le contrôle DetailsView qui affichera l'enregistrement de détails (les produits associés à la catégorie sélectionnée). Le contrôle DetailsView utilisera une requête SQL différente pour obtenir ses données, il requiert, par conséquent, un deuxième contrôle de source de données.
Pour configurer une requête pour afficher des enregistrements connexes
Appuyez sur ENTRÉE pour libérer de l'espace sous le contrôle SqlDataSource1 sur la page MasterDetails2.aspx en mode Détails.
À partir du groupe Données de la Boîte à outils, faites glisser un contrôle DetailsView sur la page.
Configurez-le pour utiliser un deuxième contrôle de source de données à l'aide des étapes suivantes :
Dans la liste Choisissez la source de données, sélectionnez <Nouvelle source de données>.
Sélectionnez Base de données.
Cliquez sur OK.
Dans la liste déroulante des connexions, cliquez sur la connexion que vous avez créée et stockée à une étape précédente de la procédure pas à pas.
Cliquez sur Suivant.
Dans la liste Nom sous Table or View Options, sélectionnez Produits.
Dans la zone Colonnes, sélectionnez ProductID, ProductName et CategoryID.
Cliquez sur WHERE.
La boîte de dialogue Ajouter une clause WHERE s'affiche.
Dans la liste Colonnes, sélectionnez CategoryID.
Dans la liste Opérateur, sélectionnez =.
Dans la liste Source, sélectionnez Contrôle.
Sous Propriétés du paramètre, dans la liste ID du contrôle, cliquez sur GridView1. La requête pour la deuxième grille obtiendra sa valeur de paramètre à partir de la sélection dans la première grille.
Cliquez sur Ajouter, puis cliquez sur OK pour fermer la boîte de dialogue Ajouter une clause WHERE.
Cliquez sur Suivant.
Dans la page d'aperçu, cliquez sur Tester la requête.
L'Assistant affiche une boîte de dialogue qui vous invite à entrer une valeur à utiliser dans la clause WHERE.
Tapez 4 dans la zone, puis cliquez sur OK.
Les enregistrements de produits pour la catégorie 4 sont affichés.
Cliquez sur Terminer.
Dans le menu Tâches DetailsView, cochez Activer la pagination.
Cela vous permettra de faire défiler des enregistrements de produit.
Dans la fenêtre Propriétés, ouvrez éventuellement le nœud PagerSettings et sélectionnez une valeur Mode différente.
Par défaut, vous parcourez les enregistrements en cliquant sur un numéro de page, mais vous pouvez sélectionner des options pour utiliser les liens suivants et précédents.
Vous pouvez à présent tester la combinaison de la grille principale et du mode Détails.
Pour tester la page
Appuyez sur CTRL+F5 pour exécuter la page.
Dans la grille, sélectionnez une catégorie.
Le contrôle DetailsView affiche un produit associé à cette catégorie.
Utilisez les liens du pagineur dans le contrôle DetailsView pour accéder à d'autres produits de la même catégorie.
Dans la grille, sélectionnez une catégorie différente.
Passez en revue les produits de cette catégorie dans le contrôle DetailsView.
Affichage de données maîtres/détails sur des pages séparées
Pour la dernière partie de la procédure pas à pas, vous créerez une autre variation : un affichage des enregistrements maîtres et de détails sur des pages séparées. Les enregistrements maîtres sont encore affichés dans une grille qui contient un lien hypertexte pour chaque enregistrement. Lorsque l'utilisateur clique sur le lien hypertexte, il accède à une deuxième page où il peut consulter des enregistrements de détails dans un DetailsView qui affiche l'enregistrement Products en entier.
Pour afficher les enregistrements maîtres
Ajoutez une nouvelle page au site Web et nommez-la MasterCustomers.aspx.
Basculez en mode Design.
Tapez Clients dans la page et mettez en forme le texte en tant que titre.
À partir du dossier Données de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView sur le contrôle, choisissez <Nouvelle source de données> dans la liste Choisir la source de données, puis utilisez l'Assistant pour procéder comme suit :
Cliquez sur Base de données.
Connectez-vous à la base de données Northwind (connexion NorthwindConnectionString).
Récupérez les colonnes CustomerID, CompanyName et City à partir de la table Customers.
Dans le menu Tâches GridView, vous pouvez activer la case à cocher Activer la pagination.
Dans le menu Tâches GridView, choisissez Modifier les colonnes.
La boîte de dialogue Champs s'affiche.
Désactivez la case à cocher Générer automatiquement les champs.
Sous Champs disponibles, choisissez Champ Lien hypertexte, cliquez sur Ajouter, puis définissez les propriétés suivantes :
Propriété
Valeur
Text
Détails
DatahrefFields
CustomerID
Cela indique que le lien hypertexte doit obtenir sa valeur de la colonne CustomerID.
DatahrefFormatString
DetailsOrders.aspx?custid={0}
Cela crée un lien qui est codé en dur pour accéder à la page DetailsOrders.aspx. Le lien passe également une variable chaîne de requête nommée custid dont la valeur sera remplie à l'aide de la colonne référencée dans la propriété DatahrefFields.
Cliquez sur OK pour fermer la boîte de dialogue Champs.
Vous pouvez à présent créer la page de détails qui accepte une valeur de la page maître.
Pour créer la page de détails
Ajoutez une nouvelle page au site Web et nommez-la DetailsOrders.aspx.
Basculez en mode Design.
Tapez Commandes dans la page et mettez en forme le texte en tant que titre.
À partir du dossier Données de la Boîte à outils, faites glisser un contrôle GridView sur la page.
Dans le menu Tâches GridView sur le contrôle, sélectionnez <Nouvelle source de données> dans la liste Choisir la source de données.
Dans la liste Choisir un type de source de données, cliquez sur Base de données, puis sur OK.
Dans la liste des connexions, sélectionnez la connexion que vous avez créée et stockée à une étape précédente de la procédure pas à pas (NorthwindConnectionString).
Cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez créer une instruction SQL.
Dans la liste Nom, sélectionnez Orders.
Dans la zone Colonnes, sélectionnez OrderID, CustomerID et OrderDate.
Cliquez sur WHERE.
Dans la liste Colonnes, sélectionnez CustomerID.
Dans la liste Opérateurs, sélectionnez =.
Dans la liste Source, sélectionnez QueryString.
Cela spécifie que la requête sélectionnera les enregistrements en fonctions la valeur passée dans la page avec la chaîne de requête.
Sous Propriétés du paramètre, dans la zone Champ QueryString, tapez custid.
La requête obtiendra la valeur du code client à partir de la chaîne de requête qui est créée lorsque vous cliquez sur un lien Détails dans la page MasterCustomers.aspx.
Cliquez sur Ajouter.
Cliquez sur OK pour fermer la boîte de dialogue Ajouter une clause WHERE.
Cliquez sur Suivant, puis sur Terminer pour fermer l'Assistant.
À partir du nœud Standard de la Boîte à outils, faites glisser un contrôle Hyperlink sur la page. Affectez Retourner aux Clients à Text et MasterCustomers.aspx à href.
Vous pouvez à présent tester les pages maîtres/détails connexes.
Pour tester les pages
Basculez vers la page MasterCustomers.aspx.
Appuyez sur CTRL+F5 pour exécuter la page.
Cliquez sur le lien Détails d'un client.
Le navigateur affiche la page DetailsOrders.aspx avec la commande du client sélectionné. Notez que l'URL dans la zone Adresse du navigateur est la suivante :
DetailsOrder.aspx?custid=xoù x est l'ID du client que vous avez sélectionné.
Cliquez sur le lien Retourner aux Clients, sélectionnez un client différent, puis cliquez sur le lien Détails une nouvelle fois pour vérifier que vous pouvez consulter les commandes de n'importe quel client.
Étapes suivantes
Cette procédure pas à pas a illustré différentes façons d'afficher des données à partir de tables connexes. Tous les scénarios ont les éléments suivants en commun : ils reposent sur une requête paramétrée et les valeurs de paramètre peuvent être passées automatiquement à la requête au moment de l'exécution. Vous souhaiterez peut-être essayer d'autres façons d'utiliser des données connexes. Vous pouvez, par exemple, souhaiter effectuer les opérations suivantes :
Essayez des paramètres qui obtiennent leurs valeurs à partir d'autres sources, telles qu'une variable de session ou un cookie. Pour plus d'informations, consultez Utilisation de paramètres avec des contrôles de source de données.
Développez ce que vous pouvez faire avec le contrôle DetailsView dans la deuxième partie de la procédure pas à pas. Par exemple, vous pouvez configurer le contrôle pour permettre aux utilisateurs de modifier des enregistrements de détails. Pour plus d'informations, consultez Procédure pas à pas : modification et insertion de données dans les pages Web avec le contrôle serveur Web DetailsView.
Voir aussi
Concepts
Vue d'ensemble des contrôles de source de données
Modification de données à l'aide de contrôles de source de données