Filtrage maître/détail sur deux pages avec un gridView (VB)

par Scott Mitchell

Télécharger le PDF

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, lorsque vous cliquez dessus, amène l’utilisateur à une page distincte qui répertorie ces produits pour le fournisseur sélectionné.

Présentation

Dans les deux didacticiels précédents, nous avons vu comment afficher des rapports maître/détail dans une page web unique à l’aide de DropDownLists pour afficher les enregistrements « master » et un contrôle GridView ou DetailsView pour afficher les « détails ». Un autre modèle courant utilisé pour les rapports maître/détails consiste à avoir les enregistrements maîtres sur une page web et les détails affichés sur un 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 de prise en main, de formulaires web, de contrôles de présentation des données, et ainsi de suite. Chaque forum est composé de nombreux threads et chaque thread est composé d’un certain nombre de billets. Sur la page d’accueil ASP.NET Forums, 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, cliquer sur un thread vous amène à ShowPost.aspx, qui affiche les publications du thread qui a été 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, lorsque vous cliquez dessus, amène l’utilisateur à une page distincte qui répertorie ces produits pour le fournisseur sélectionné.

Ajouter SupplierListMaster.aspxet ProductsForSupplierDetails.aspx pages dans le Filtering dossier

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 dossiers BasicReporting, Filtering et CustomFormatting. Toutefois, nous n’avons pas ajouté de page de démarrage pour ce tutoriel à ce moment-là, donc prenez un moment pour ajouter deux nouvelles pages au Filtering dossier : SupplierListMaster.aspx et ProductsForSupplierDetails.aspx. SupplierListMaster.aspx répertorie les enregistrements « maîtres » (fournisseurs) tandis que ProductsForSupplierDetails.aspx les produits du fournisseur sélectionné sont affichés.

Lorsque vous créez ces deux nouvelles pages, veillez à les associer à la Site.master page maître.

Figure 1 : Ajouter les pages SupplierListMaster.aspx et ProductsForSupplierDetails.aspx aux dossiers Filtering

En outre, lors de l’ajout de nouvelles pages au projet, veillez à mettre à jour le fichier de carte de site, Web.sitemapen conséquence. Pour ce tutoriel, ajoutez simplement la SupplierListMaster.aspx page au plan du site à l’aide du contenu XML suivant en tant que sous-élément 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." />

Remarque

Vous pouvez automatiser le processus de mise à jour du fichier de carte 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

Avec les SupplierListMaster.aspxProductsForSupplierDetails.aspx pages créées, notre prochaine étape consiste à créer le GridView des fournisseurs dans SupplierListMaster.aspx. Ajoutez un GridView à la page et liez-le à un nouvel ObjectDataSource. Cette ObjectDataSource doit utiliser la méthode de la classe SuppliersBLL pour retourner tous les fournisseurs.

Figure 2 : Sélectionner la classe (SuppliersBLL de taille complète)

Figure 3 : Configurer ObjectDataSource pour utiliser la méthode (GetSuppliers() de taille complète)

Nous devons inclure un lien intitulé Afficher les produits dans chaque ligne de la GridView qui, lorsque l'utilisateur clique dessus, amène l'utilisateur à ProductsForSupplierDetails.aspx en transmettant la valeur de SupplierID de la ligne sélectionnée via le paramètre de requête. Par exemple, si l’utilisateur clique sur le lien Afficher les produits pour le fournisseur Tokyo Traders (dont SupplierID la valeur est 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 en haut à gauche, puis cliquez sur Ajouter pour inclure HyperLinkField dans la liste des champs de GridView.

Figure 4 : Ajouter un HyperLinkField à GridView (cliquez pour afficher l’image de taille complète)

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 Text ou NavigateUrl d’HyperLinkField. Étant donné que nous voulons que le texte du lien soit identique pour toutes les lignes, définissez la propriété de HyperLinkField Text sur Afficher les produits.

Figure 5 : Définir la propriété d’HyperLinkField Text pour afficher les produits (cliquez pour afficher l’image de taille complète)

Pour définir le texte ou les valeurs d'URL en fonction des données sous-jacentes liées à la ligne de GridView, spécifiez les champs de données desquels le texte ou les valeurs d'URL doivent être extraits dans les propriétés DataTextField ou DataNavigateUrlFields. DataTextField ne peut être défini que sur un seul champ de données ; DataNavigateUrlFieldstoutefois, peut être défini sur une liste délimitée par des virgules de champs de données. Nous devons fréquemment 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 de GridView. Notez que nous avons besoin de valeurs statiques et pilotées par les données ici : 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 propriétés DataTextFormatString 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 le DataTextField ou DataNavigateUrlFields les propriétés s’affiche. Si la DataNavigateUrlFields propriété a plusieurs champs spécifiés, utilisez l’emplacement {0} 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 ceci à notre tutoriel, nous devons définir la DataNavigateUrlFields propriété SupplierIDsur , car c’est le champ de données dont nous devons personnaliser la valeur par ligne et la DataNavigateUrlFormatString propriété ProductsForSupplierDetails.aspx?SupplierID={0}sur .

Figure 6 : Configurer HyperLinkField pour inclure l’URL de lien appropriée en fonction de l’image SupplierID (cliquez pour afficher l’image de taille complète)

Après avoir ajouté HyperLinkField, n’hésitez pas à personnaliser et réorganiser les champs de GridView. Le balisage suivant montre GridView après avoir 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. Cliquez sur le lien Afficher les produits pour accéder à ProductsForSupplierDetails.aspx, en transmettant SupplierID dans la chaîne de requête.

Figure 7 : Chaque ligne de fournisseur contient un lien Afficher les produits (cliquez pour afficher l’image de taille complète)

Étape 3 : Lister les produits du fournisseur dansProductsForSupplierDetails.aspx

À ce stade, la SupplierListMaster.aspx page envoie les utilisateurs vers ProductsForSupplierDetails.aspx, en passant l'identifiant du fournisseur sélectionné dans la chaîne de requête. L’étape finale du didacticiel consiste à afficher les produits dans un GridView dans ProductsForSupplierDetails.aspx, où SupplierID est égal à SupplierID passé via la chaîne de requête. Pour ce faire, commencez par ajouter un GridView à la ProductsForSupplierDetails.aspx page, à l’aide d’un nouveau contrôle ObjectDataSource nommé ProductsBySupplierDataSource qui appelle la GetProductsBySupplierID(supplierID) méthode à partir de la ProductsBLL classe.

Figure 8 : Ajouter une nouvelle propriété ObjectDataSource nommée ProductsBySupplierDataSource (cliquez pour afficher l’image de taille complète)

Figure 9 : Sélectionner la classe (ProductsBLL de taille complète)

Figure 10 : Faire appel GetProductsBySupplierID(supplierID) à la méthode ObjectDataSource (Cliquez pour afficher l’image de taille complète)

L’étape finale de l’Assistant de configuration de la source de données nous demande de fournir la source du paramètre GetProductsBySupplierID(supplierID) de la méthode supplierID. Pour utiliser la valeur querystring, définissez la source de paramètre sur QueryString et entrez le nom de la valeur querystring à utiliser dans la zone de texte QueryStringField (SupplierID).

Figure 11 : Remplir la supplierID valeur du paramètre à partir de la SupplierID valeur querystring (cliquez pour afficher l’image de taille complète)

Voilà, c’est tout ! La figure 12 montre la page ProductsForSupplierDetails.aspx lorsqu'on clique sur le lien Tokyo Traders à partir de SupplierListMaster.aspx.

Figure 12 : Les produits fournis par Tokyo Traders sont affichés (cliquez pour afficher l’image pleine taille)

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 la SupplierID chaîne de requête spécifiée. Quelqu'un envoyé directement à cette page ne saurait cependant pas que la figure 12 montre les produits de Tokyo Traders. Pour remédier à ce problème, nous pouvons également afficher des informations sur les fournisseurs dans cette page.

Commencez par ajouter un FormView au-dessus des produits GridView. Créez un contrôle ObjectDataSource nommé SuppliersDataSource qui appelle la méthode SuppliersBLL de la classe GetSupplierBySupplierID(supplierID).

Figure 13 : Sélectionner la classe (SuppliersBLL de taille complète)

Figure 14 : Faire appel GetSupplierBySupplierID(supplierID) à la méthode ObjectDataSource (Click pour afficher l’image de taille complète)

Comme avec le paramètre ProductsBySupplierDataSource, attribuez à supplierID la valeur de la valeur de chaîne de requête SupplierID.

Figure 15 : Remplir la supplierID valeur du paramètre à partir de la SupplierID valeur de la chaîne de requête (cliquez pour afficher l’image de taille complète)

Lors de la liaison de FormView à ObjectDataSource en mode Création, Visual Studio crée automatiquement les ItemTemplateInsertItemTemplateEditItemTemplate contrôles Web Label et 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 le InsertItemTemplate et EditItemTemplate. Ensuite, modifiez ItemTemplate pour qu’il affiche le nom de la société du fournisseur dans un <h3> élément et l’adresse, la ville, le pays/la région et le numéro de téléphone sous le nom de la société. Alternativement, vous pouvez définir manuellement le FormViewDataSourceID et créer le marqueurItemTemplate, comme nous l'avons fait dans le didacticiel "Affichage des données avec ObjectDataSource".

Une fois ces modifications modifiées, 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 ProductsForSupplierDetails.aspx page une fois que les informations du fournisseur détaillées ci-dessus ont été incluses.

Figure 16 : La liste des produits comprend un résumé sur le fournisseur (cliquez pour afficher l’image de taille complète)

Application des touches finales à l'interface utilisateurProductsForSupplierDetails.aspx

Pour améliorer l’expérience utilisateur de ce rapport, il existe quelques ajouts que nous devrions apporter à la ProductsForSupplierDetails.aspx page. Actuellement, la seule façon pour un utilisateur de revenir de la page ProductsForSupplierDetails.aspx à la liste des fournisseurs consiste à cliquer sur le bouton Précédent de son navigateur. Ajoutons un contrôle HyperLink sur la page ProductsForSupplierDetails.aspx qui mène de nouveau à SupplierListMaster.aspx, offrant ainsi à l’utilisateur une autre façon de revenir à la liste maître.

Figure 17 : Ajoutez un contrôle HyperLink pour ramener l'utilisateur à SupplierListMaster.aspx (cliquez pour voir l'image en plein écran)

Si l’utilisateur clique sur le lien Afficher les produits pour un fournisseur qui n’a aucun produit, objectDataSource ProductsBySupplierDataSource in ProductsForSupplierDetails.aspx ne retourne aucun résultat. GridView lié à ObjectDataSource n’affiche aucun balisage résultant d’une zone vide sur la page dans le navigateur de l’utilisateur. Pour communiquer plus clairement à l’utilisateur qu’il n’existe aucun produit associé au fournisseur sélectionné, nous pouvons définir la propriété de GridView sur le message que nous voulons afficher lorsqu’une EmptyDataText telle situation se produit. J’ai défini cette propriété sur « Il n’y a pas de produits fournis 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 la Products table afin que le fournisseur Escargots Nouveaux n’est plus associé à des produits. 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 pleine taille)

Résumé

Bien que les rapports maître/détail puissent afficher à la fois les enregistrements de base et de détails sur une seule page, dans de nombreux sites web, ils sont séparés sur deux pages web. Dans ce tutoriel, nous avons examiné comment implémenter un tel rapport maître/détail en plaçant les fournisseurs répertoriés dans une GrilleView dans la page web « maître » et les produits associés répertoriés dans la page « détails ». Chaque ligne de fournisseur de la page web maître contenait un lien vers la page de détails qui transférait la valeur de SupplierID de la ligne. Ces liens spécifiques aux lignes peuvent être facilement ajoutés à l’aide de l’HyperLinkField de GridView.

Sur 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 ProductsBLL de la classe GetProductsBySupplierID(supplierID). 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 de détails à l’aide d’un FormView.

Notre prochain tutoriel est le dernier sur les rapports maître/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 en tant que consultant indépendant, formateur et écrivain. Son dernier livre est Sams Teach Yourself ASP.NET 2.0 en 24 heures. On peut le contacter à mitchell@4GuysFromRolla.com.

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.

Précédent Suivant