Filtrage maître/détail sur deux pages avec un GridView (VB)
par Scott Mitchell
Dans ce tutoriel, nous allons implémenter ce modèle à l’aide d’un GridView pour répertorier les fournisseurs dans la base de données. Chaque ligne de fournisseur dans GridView contient un lien Afficher les produits qui, une fois cliqué, amène l’utilisateur vers une page distincte qui répertorie ces produits pour le fournisseur sélectionné.
Introduction
Dans les deux tutoriels précédents, nous avons vu comment afficher des rapports master/détail dans une seule page web à l’aide de DropDownLists pour afficher les enregistrements « master » et d’un contrôle GridView ou DetailsView pour afficher les « détails ». Un autre modèle courant utilisé pour les rapports master/détails consiste à avoir les master enregistrements sur une page web et les détails affichés sur une autre. Un site web de forum, comme les forums ASP.NET, est un excellent exemple de ce modèle dans la pratique. Les forums ASP.NET sont composés de divers forums Prise en main, Web Forms, contrôles de présentation des données, etc. Chaque forum est composé de nombreux threads et chaque thread est composé d’un certain nombre de billets. Sur la page d’accueil des forums ASP.NET, les forums sont répertoriés. En cliquant sur un forum, vous accédez à une ShowForum.aspx page, qui répertorie les threads de ce forum. De même, en cliquant sur un thread, vous accédez à ShowPost.aspx, qui affiche les publications du thread sur lequel vous avez cliqué.
Dans ce tutoriel, nous allons implémenter ce modèle à l’aide d’un GridView pour répertorier les fournisseurs dans la base de données. Chaque ligne de fournisseur dans GridView contient un lien Afficher les produits qui, une fois cliqué, amène l’utilisateur vers une page distincte qui répertorie ces produits pour le fournisseur sélectionné.
Étape 1 : Ajout deSupplierListMaster.aspxpages etProductsForSupplierDetails.aspxauFilteringdossier
Lors de la définition de la mise en page dans le troisième tutoriel, nous avons ajouté un certain nombre de pages « starter » dans les BasicReportingdossiers , Filteringet CustomFormatting . Toutefois, nous n’avons pas ajouté de page de démarrage pour ce tutoriel à ce moment-là. Prenez donc un moment pour ajouter deux nouvelles pages au Filtering dossier : SupplierListMaster.aspx et ProductsForSupplierDetails.aspx. SupplierListMaster.aspxrépertoriera les enregistrements « master » (les fournisseurs) et ProductsForSupplierDetails.aspx affichera les produits pour le fournisseur sélectionné.
Lors de la création de ces deux nouvelles pages, veillez à les associer à la Site.master page master.
Figure 1 : Ajouter les SupplierListMaster.aspx pages et ProductsForSupplierDetails.aspx au Filtering dossier
En outre, lorsque vous ajoutez de nouvelles pages au projet, veillez à mettre à jour le fichier de plan de site, Web.sitemap, en conséquence. Pour ce tutoriel, ajoutez simplement la SupplierListMaster.aspx page au plan de site en utilisant le contenu XML suivant en tant qu’enfant de l’élément Filtering Reports <siteMapNode> :
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another." />
Notes
Vous pouvez aider à automatiser le processus de mise à jour du fichier de plan de site lors de l’ajout de nouvelles pages ASP.NET à l’aide de la macro de carte de site Visual Studio gratuite de K. Scott Allen.
Étape 2 : affichage de la liste des fournisseurs dansSupplierListMaster.aspx
Une fois les SupplierListMaster.aspx pages et ProductsForSupplierDetails.aspx créées, notre étape suivante consiste à créer le GridView des fournisseurs dans SupplierListMaster.aspx. Ajoutez un GridView à la page et liez-le à un nouvel ObjetDataSource. Cet ObjetDataSource doit utiliser la méthode de GetSuppliers() la SuppliersBLL classe pour retourner tous les fournisseurs.
Figure 2 : Sélectionner la SuppliersBLL classe (cliquer pour afficher l’image en taille réelle)
Figure 3 : Configurer ObjectDataSource pour utiliser la GetSuppliers() méthode (Cliquer pour afficher l’image en taille réelle)
Nous devons inclure un lien intitulé Afficher les produits dans chaque ligne GridView qui, lorsqu’on clique sur, amène l’utilisateur à ProductsForSupplierDetails.aspx passer la valeur de la ligne sélectionnée par le biais de SupplierID la chaîne de requête. Par exemple, si l’utilisateur clique sur le lien Afficher les produits pour le fournisseur Tokyo Traders (qui a la SupplierID valeur 4), il doit être envoyé à ProductsForSupplierDetails.aspx?SupplierID=4.
Pour ce faire, ajoutez un HyperLinkField à GridView, qui ajoute un lien hypertexte à chaque ligne GridView. Commencez par cliquer sur le lien Modifier les colonnes à partir de la balise active de GridView. Ensuite, sélectionnez hyperLinkField dans la liste située dans le coin supérieur gauche, puis cliquez sur Ajouter pour inclure le champ HyperLinkField dans la liste des champs de GridView.
Figure 4 : Ajouter un champ HyperLinkField à GridView (cliquer pour afficher l’image en taille réelle)
HyperLinkField peut être configuré pour utiliser les mêmes valeurs de texte ou d’URL que le lien dans chaque ligne GridView, ou peut baser ces valeurs sur les valeurs de données liées à chaque ligne particulière. Pour spécifier une valeur statique sur toutes les lignes, utilisez les propriétés ou NavigateUrl de Text HyperLinkField. Étant donné que nous voulons que le texte du lien soit identique pour toutes les lignes, définissez la propriété HyperLinkField Text sur Afficher les produits.
Figure 5 : Définissez la propriété d’HyperLinkField Text sur Afficher les produits (cliquez pour afficher l’image en taille réelle)
Pour définir les valeurs de texte ou d’URL en fonction des données sous-jacentes liées à la ligne GridView, spécifiez les champs de données à partir duquel le texte ou les valeurs d’URL doivent être extraits dans les DataTextField propriétés ou DataNavigateUrlFields . DataTextField ne peut être défini que sur un seul champ de données ; DataNavigateUrlFields, toutefois, peut être défini sur une liste délimitée par des virgules de champs de données. Nous devons souvent baser le texte ou l’URL sur une combinaison de la valeur du champ de données de la ligne actuelle et d’un balisage statique. Dans ce tutoriel, par exemple, nous voulons que l’URL des liens d’HyperLinkField soit ProductsForSupplierDetails.aspx?SupplierID=supplierID, où supplierID est la valeur de SupplierID chaque ligne GridView. Notez que nous avons besoin ici de valeurs statiques et pilotées par les données : la ProductsForSupplierDetails.aspx?SupplierID= partie de l’URL du lien est statique, tandis que la partie est pilotée par les supplierID données, car sa valeur est la propre SupplierID valeur de chaque ligne.
Pour indiquer une combinaison de valeurs statiques et pilotées par les données, utilisez les DataTextFormatString propriétés et DataNavigateUrlFormatString . Dans ces propriétés, entrez le balisage statique en fonction des besoins, puis utilisez le marqueur {0} où vous souhaitez que la valeur du champ spécifié dans les DataTextField propriétés ou DataNavigateUrlFields apparaisse. Si la DataNavigateUrlFields propriété a plusieurs champs spécifiés, utilisez {0} l’emplacement où vous souhaitez insérer la première valeur de champ, {1} pour la deuxième valeur de champ, et ainsi de suite.
En appliquant cela à notre tutoriel, nous devons définir la DataNavigateUrlFields propriété SupplierIDsur , car il s’agit du champ de données dont nous devons personnaliser la valeur par ligne et de la DataNavigateUrlFormatString propriété sur ProductsForSupplierDetails.aspx?SupplierID={0}.
Figure 6 : Configurer l’HyperLinkField pour inclure l’URL de lien appropriée en fonction du SupplierID (cliquez pour afficher l’image de taille réelle)
Après avoir ajouté HyperLinkField, n’hésitez pas à personnaliser et réorganiser les champs de GridView. Le balisage suivant montre le GridView une fois que j’ai effectué des personnalisations mineures au niveau du champ.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="SupplierID" DataSourceID="ObjectDataSource1"
EnableViewState="False">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="SupplierID"
DataNavigateUrlFormatString=
"ProductsForSupplierDetails.aspx?SupplierID={0}"
Text="View Products" />
<asp:BoundField DataField="CompanyName"
HeaderText="Company" SortExpression="CompanyName" />
<asp:BoundField DataField="City" HeaderText="City"
SortExpression="City" />
<asp:BoundField DataField="Country"
HeaderText="Country" SortExpression="Country" />
</Columns>
</asp:GridView>
Prenez un moment pour afficher la SupplierListMaster.aspx page via un navigateur. Comme le montre la figure 7, la page répertorie actuellement tous les fournisseurs, y compris un lien Afficher les produits. En cliquant sur le lien Afficher les produits, vous accédez à ProductsForSupplierDetails.aspx, en passant les données du SupplierID fournisseur dans la chaîne de requête.
Figure 7 : Chaque ligne fournisseur contient un lien Afficher les produits (cliquer pour afficher l’image en taille réelle)
Étape 3 : Répertorier les produits du fournisseur dansProductsForSupplierDetails.aspx
À ce stade, la SupplierListMaster.aspx page envoie les utilisateurs à ProductsForSupplierDetails.aspx, en passant les fournisseurs SupplierID sélectionnés dans la chaîne de requête. La dernière étape du didacticiel consiste à afficher les produits dans un GridView dans ProductsForSupplierDetails.aspx lequel SupplierID est égal au SupplierID passé via la chaîne de requête. Pour ce faire, commencez par ajouter un GridView à la page, à l’aide ProductsForSupplierDetails.aspx d’un nouveau contrôle ObjectDataSource nommé ProductsBySupplierDataSource qui appelle la GetProductsBySupplierID(supplierID) méthode à partir de la ProductsBLL classe .
Figure 8 : Ajouter un nouvel objetDataSource nommé ProductsBySupplierDataSource (cliquer pour afficher l’image en taille réelle)
Figure 9 : Sélectionner la ProductsBLL classe (cliquer pour afficher l’image en taille réelle)
Figure 10 : Faire appel GetProductsBySupplierID(supplierID) à la méthode ObjectDataSource (cliquez pour afficher l’image en taille réelle)
La dernière étape de l’Assistant Configurer la source de données nous demande de fournir la source du paramètre de supplierID la GetProductsBySupplierID(supplierID) méthode. Pour utiliser la valeur querystring, définissez la source du paramètre sur QueryString et entrez le nom de la valeur de chaîne de requête à utiliser dans la zone de texte QueryStringField (SupplierID).
Figure 11 : Remplir la valeur du supplierID paramètre à partir de la valeur de chaîne SupplierID de requête (cliquer pour afficher l’image en taille réelle)
C’est tout ! La figure 12 montre la page lors de la ProductsForSupplierDetails.aspx visite en cliquant sur le lien Tokyo Traders à partir de SupplierListMaster.aspx.
Figure 12 : Les produits fournis par Tokyo Traders sont affichés (cliquer pour afficher l’image en taille réelle)
Affichage des informations sur les fournisseurs dansProductsForSupplierDetails.aspx
Comme le montre la figure 12, la ProductsForSupplierDetails.aspx page répertorie simplement les produits fournis par le SupplierID spécifié dans la chaîne de requête. Quelqu’un envoyé directement à cette page, cependant, ne sait pas que la figure 12 montre les produits de Tokyo Traders. Pour y remédier, nous pouvons également afficher des informations sur les fournisseurs dans cette page.
Commencez par ajouter un contrôle FormView au-dessus des produits GridView. Créez un contrôle ObjectDataSource nommé SuppliersDataSource qui appelle la méthode de GetSupplierBySupplierID(supplierID) la SuppliersBLL classe.
Figure 13 : Sélectionner la SuppliersBLL classe (Cliquer pour afficher l’image en taille réelle)
Figure 14 : Faire appel GetSupplierBySupplierID(supplierID) à la méthode ObjectDataSource (cliquez pour afficher l’image en taille réelle)
Comme avec , ProductsBySupplierDataSourcele paramètre a supplierID affecté la valeur de la valeur de la SupplierID chaîne de requête.
Figure 15 : Remplir la valeur du supplierID paramètre à partir de la valeur de chaîne SupplierID de requête (cliquer pour afficher l’image en taille réelle)
Lors de la liaison de FormView à ObjectDataSource en mode Création, Visual Studio crée automatiquement les contrôles Web , et de FormView ItemTemplateInsertItemTemplateavec les contrôles Web Label et EditItemTemplate TextBox pour chacun des champs de données retournés par ObjectDataSource. Étant donné que nous voulons simplement afficher les informations du fournisseur, n’hésitez pas à supprimer et InsertItemTemplateEditItemTemplate. Ensuite, modifiez ItemTemplate afin qu’il affiche le nom de l’entreprise du fournisseur dans un <h3> élément et l’adresse, la ville, le pays/région et le numéro de téléphone sous le nom de l’entreprise. Vous pouvez également définir manuellement les données FormView DataSourceID et créer le balisage, comme nous l’avons ItemTemplate fait dans le tutoriel « Affichage des données avec objectDataSource ».
Après ces modifications, le balisage déclaratif de FormView doit ressembler à ce qui suit :
<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
DataSourceID="suppliersDataSource" EnableViewState="False">
<ItemTemplate>
<h3><%# Eval("CompanyName") %></h3>
<p>
<asp:Label ID="AddressLabel" runat="server"
Text='<%# Bind("Address") %>'></asp:Label><br />
<asp:Label ID="CityLabel" runat="server"
Text='<%# Bind("City") %>'></asp:Label>,
<asp:Label ID="CountryLabel" runat="server"
Text='<%# Bind("Country") %>'></asp:Label><br />
Phone:
<asp:Label ID="PhoneLabel" runat="server"
Text='<%# Bind("Phone") %>'></asp:Label>
</p>
</ItemTemplate>
</asp:FormView>
La figure 16 montre une capture d’écran de la page une fois que ProductsForSupplierDetails.aspx les informations sur le fournisseur détaillées ci-dessus ont été incluses.
Figure 16 : La liste des produits inclut un résumé du fournisseur (cliquer pour afficher l’image en taille réelle)
Application des touches finales pour l’interfaceProductsForSupplierDetails.aspxutilisateur
Pour améliorer l’expérience utilisateur de ce rapport, nous devons ajouter quelques ajouts à la ProductsForSupplierDetails.aspx page. Actuellement, la seule façon pour un utilisateur de revenir de la ProductsForSupplierDetails.aspx page à la liste des fournisseurs consiste à cliquer sur le bouton Précédent de son navigateur. Ajoutons un contrôle HyperLink à la ProductsForSupplierDetails.aspx page qui renvoie à , ce qui permet à SupplierListMaster.aspxl’utilisateur de revenir à la liste master.
Figure 17 : Ajouter un contrôle HyperLink à renvoyer à SupplierListMaster.aspx l’utilisateur (cliquer pour afficher l’image en taille réelle)
Si l’utilisateur clique sur le lien Afficher les produits pour un fournisseur qui n’a pas de produits, l’objet ProductsBySupplierDataSource ObjectDataSource dans ProductsForSupplierDetails.aspx ne retourne aucun résultat. Le GridView lié à ObjectDataSource n’affiche aucun balisage résultant dans une région vide sur la page dans le navigateur de l’utilisateur. Pour communiquer plus clairement à l’utilisateur qu’aucun produit n’est associé au fournisseur sélectionné, nous pouvons définir la propriété de EmptyDataText GridView sur le message que nous voulons afficher lorsqu’une telle situation se produit. J’ai défini cette propriété sur « Il n’y a aucun produit fourni par ce fournisseur ».
Par défaut, tous les fournisseurs de la base de données Northwinds fournissent au moins un produit. Toutefois, pour ce tutoriel, j’ai modifié manuellement le Products tableau afin que le fournisseur Escargots Nouveaux ne soit plus associé à aucun produit. La figure 18 montre la page de détails d’Escargots Nouveaux après cette modification.
Figure 18 : Les utilisateurs sont informés que le fournisseur ne fournit aucun produit (cliquez pour afficher l’image en taille réelle)
Résumé
Bien que les rapports master/détail puissent afficher les enregistrements de master et de détails sur une seule page, dans de nombreux sites web, ils sont séparés en deux pages web. Dans ce tutoriel, nous avons examiné comment implémenter un tel rapport master/détail en plaçant les fournisseurs répertoriés dans un GridView dans la page web « master » et les produits associés répertoriés dans la page « détails ». Chaque ligne fournisseur de la page web master contenait un lien vers la page de détails qui passait le long de la valeur de SupplierID la ligne. Ces liens spécifiques aux lignes peuvent être facilement ajoutés à l’aide de l’hyperLinkField de GridView.
Dans la page de détails, la récupération de ces produits pour le fournisseur spécifié a été effectuée en appelant la méthode de GetProductsBySupplierID(supplierID) la ProductsBLL classe. La supplierID valeur du paramètre a été spécifiée de manière déclarative à l’aide de la chaîne de requête comme source de paramètre. Nous avons également examiné comment afficher les détails du fournisseur dans la page des détails à l’aide d’un FormulaireView.
Notre prochain tutoriel est le dernier sur les rapports master/détail. Nous allons voir comment afficher une liste de produits dans un GridView où chaque ligne a un bouton Sélectionner. Cliquez sur le bouton Sélectionner pour afficher les détails de ce produit dans un contrôle DetailsView sur la même page.
Bonne programmation !
À propos de l’auteur
Scott Mitchell, auteur de sept livres ASP/ASP.NET et fondateur de 4GuysFromRolla.com, travaille avec les technologies Web Microsoft depuis 1998. Scott travaille comme consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 in 24 Heures. Il est accessible à l’adressemitchell@4GuysFromRolla.com . ou via son blog, qui peut être trouvé à l’adresse http://ScottOnWriting.NET.
Un merci spécial à
Cette série de tutoriels a été examinée par de nombreux réviseurs utiles. Le réviseur principal de ce tutoriel était Hilton Giesenow. Vous souhaitez consulter mes prochains articles MSDN ? Si c’est le cas, déposez-moi une ligne à mitchell@4GuysFromRolla.com.