Master-/Detailfilterung über zwei Seiten hinweg mit einer GridView (VB)

von Scott Mitchell

PDF herunterladen

In diesem Lernprogramm implementieren wir dieses Muster mithilfe einer GridView, um die Lieferanten in der Datenbank auflisten zu können. Jede Lieferantenzeile in gridView enthält einen Link "Produkte anzeigen", über den der Benutzer auf eine separate Seite führt, auf der diese Produkte für den ausgewählten Lieferanten aufgelistet sind.

Einleitung

In den vorherigen beiden Tutorials haben wir gesehen, wie wir auf einer einzelnen Webseite Master-/Detailberichte anzeigen, indem wir DropDownLists zur Anzeige der "Master"-Datensätze und entweder ein GridView oder DetailsView verwenden, um die "Details" anzuzeigen. Ein weiteres gängiges Muster für Master-/Detailberichte besteht darin, die Masterdatensätze auf einer Webseite und die Details auf einer anderen Webseite darzustellen. Eine Forum-Website, wie die ASP.NET Foren, ist ein großartiges Beispiel für dieses Muster in der Praxis. Die ASP.NET Foren bestehen aus verschiedenen Bereichen: Erste Schritte, Webformulare, Datenpräsentationssteuerelemente und so weiter. Jedes Forum besteht aus vielen Threads, und jeder Thread besteht aus einer Reihe von Beiträgen. Auf der Homepage der ASP.NET Foren sind die Foren aufgeführt. Wenn Sie auf ein Forum klicken, gelangen Sie zu einer ShowForum.aspx Seite, auf der die Threads für dieses Forum aufgelistet werden. Ebenso gelangen Sie durch Klicken auf einen Thread zu ShowPost.aspx, wo die Beiträge des ausgewählten Threads angezeigt werden.

In diesem Lernprogramm implementieren wir dieses Muster mithilfe einer GridView, um die Lieferanten in der Datenbank auflisten zu können. Jede Lieferantenzeile in gridView enthält einen Link "Produkte anzeigen", über den der Benutzer auf eine separate Seite führt, auf der diese Produkte für den ausgewählten Lieferanten aufgelistet sind.

Schritt 1: SupplierListMaster.aspxHinzufügenProductsForSupplierDetails.aspx und SeitenSupplierListMaster.aspx zumOrdner hinzufügen

Beim Definieren des Seitenlayouts im dritten Lernprogramm haben wir eine Reihe von "Startseiten" in den BasicReporting, Filteringund CustomFormatting Ordnern hinzugefügt. Wir haben jedoch zu diesem Zeitpunkt keine Startseite für dieses Lernprogramm hinzugefügt. Nehmen Sie sich also einen Moment Zeit, um dem Filtering Ordner zwei neue Seiten hinzuzufügen: SupplierListMaster.aspx und ProductsForSupplierDetails.aspx. SupplierListMaster.aspx listet die Stammdatensätze (die Lieferanten) auf, während ProductsForSupplierDetails.aspx die Produkte für den ausgewählten Lieferanten anzeigt.

Beim Erstellen dieser beiden neuen Seiten stellen Sie sicher, dass sie der Site.master Masterseite zugeordnet werden.

Abbildung 1: Fügen Sie die SupplierListMaster.aspx und ProductsForSupplierDetails.aspx Seiten dem Filtering Ordner hinzu

Achten Sie beim Hinzufügen neuer Seiten zum Projekt außerdem darauf, die Websitezuordnungsdatei Web.sitemapentsprechend zu aktualisieren. In diesem Lernprogramm fügen Sie einfach die SupplierListMaster.aspx Seite zur Websitezuordnung hinzu, indem Sie den folgenden XML-Inhalt als untergeordnetes Element des Filters Reports-Elements <siteMapNode> verwenden:

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another." />

Hinweis

Sie können mithilfe des kostenlosen Site Map-Makros für Visual Studio von K. Scott Allen den Prozess der Aktualisierung der Sitemap-Datei beim Hinzufügen neuer ASP.NET-Seiten automatisieren.

Schritt 2: Anzeigen der Lieferantenliste inSupplierListMaster.aspx

Mit den erstellten SupplierListMaster.aspx- und ProductsForSupplierDetails.aspx-Seiten besteht unser nächster Schritt darin, die GridView von Lieferanten in SupplierListMaster.aspx zu erstellen. Fügen Sie der Seite eine GridView hinzu, und binden Sie sie an eine neue ObjectDataSource. Diese ObjectDataSource sollte die Methode der SuppliersBLL Klasse GetSuppliers() verwenden, um alle Lieferanten zurückzugeben.

Abbildung 2: Auswählen der SuppliersBLL Klasse (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 3: Konfigurieren der ObjectDataSource für die Verwendung der GetSuppliers() Methode (Klicken, um das Bild in voller Größe anzuzeigen)

Wir müssen in jede Zeile der GridView einen Link mit dem Titel "Produkte anzeigen" einfügen, der den Benutzer beim Klicken auf ProductsForSupplierDetails.aspx führt, wobei der Wert der ausgewählten Zeile SupplierID über die Abfragezeichenfolge übergeben wird. Wenn der Benutzer z. B. auf den Link "Produkte anzeigen" für den Lieferanten Tokyo Traders klickt (der den SupplierID Wert 4 hat), sollten sie zu ProductsForSupplierDetails.aspx?SupplierID=4 geschickt werden.

Fügen Sie dazu der GridView ein HyperLinkField hinzu, das jeder GridView-Zeile einen Link hinzufügt. Klicken Sie zunächst im Smarttag von GridView auf den Link "Spalten bearbeiten". Wählen Sie als Nächstes das HyperLinkField aus der Liste oben links aus, und klicken Sie auf "Hinzufügen", um das HyperLinkField in die Feldliste von GridView einzuschließen.

Abbildung 4: Hinzufügen eines HyperLinkFields zur GridView (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Das HyperLinkField kann so konfiguriert werden, dass der Link in jeder GridView-Zeile denselben Text- oder URL-Wert verwendet oder diese Werte auf den Datenwerten basieren kann, die an jede bestimmte Zeile gebunden sind. Um einen statischen Wert für alle Zeilen anzugeben, verwenden Sie die Text oder NavigateUrl Eigenschaften von HyperLinkField. Da der Linktext für alle Zeilen gleich sein soll, legen Sie die Eigenschaft von Text HyperLinkField auf "Produkte anzeigen" fest.

Abbildung 5: Festlegen der Eigenschaft von Text HyperLinkField auf "Produkte anzeigen" (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Um die Text- oder URL-Werte festzulegen, die auf den zugrunde liegenden Daten basieren, die an die GridView-Zeile gebunden sind, geben Sie die Datenfelder an, aus denen die Text- oder URL-Werte in den DataTextField Eigenschaften DataNavigateUrlFields abgerufen werden sollen. DataTextField kann nur auf ein einzelnes Datenfeld festgelegt werden; DataNavigateUrlFieldskann jedoch auf eine durch Trennzeichen getrennte Liste von Datenfeldern festgelegt werden. Häufig müssen wir den Text oder die URL auf einer Kombination aus dem Datenfeldwert der aktuellen Zeile und einem statischen Markup basieren. In diesem Tutorial möchten wir beispielsweise, dass die URL der Links im HyperLinkField den Wert ProductsForSupplierDetails.aspx?SupplierID=supplierID hat, wobei supplierID der Wert jeder Zeile der GridView ist SupplierID. Beachten Sie, dass wir hier statische und datengesteuerte Werte benötigen: Der ProductsForSupplierDetails.aspx?SupplierID= Teil der URL des Links ist statisch, während der Teil datengesteuert ist, da sein supplierID Wert jeder Zeile ein eigener SupplierID Wert ist.

Um eine Kombination aus statischen und datengesteuerten Werten anzugeben, verwenden Sie die Eigenschaften DataTextFormatString und DataNavigateUrlFormatString. Geben Sie in diesen Eigenschaften das statische Markup nach Bedarf ein und verwenden Sie dann die Markierung {0} an der Stelle, an der der Wert des Felds angezeigt werden soll, die in den Eigenschaften DataTextField oder DataNavigateUrlFields angegeben sind. Wenn die DataNavigateUrlFields Eigenschaft mehrere Felder angegeben hat, verwenden Sie die Stelle {0} , an der der erste Feldwert eingefügt werden soll, {1} für den zweiten Feldwert usw.

Wenn Sie dies auf unser Lernprogramm anwenden, müssen wir die DataNavigateUrlFields Eigenschaft auf SupplierIDfestlegen, da dies das Datenfeld ist, dessen Wert wir pro Zeile anpassen müssen, und die DataNavigateUrlFormatString Eigenschaft auf ProductsForSupplierDetails.aspx?SupplierID={0}.

Abbildung 6: Konfigurieren des HyperLinkFields zum Einschließen der richtigen Link-URL basierend auf dem SupplierID (Klicken, um das Bild in voller Größe anzuzeigen)

Nachdem Sie das HyperLinkField hinzugefügt haben, können Sie die Felder von GridView anpassen und neu anordnen. Das folgende Markup zeigt die GridView, nachdem ich einige kleinere Anpassungen auf Feldebene vorgenommen habe.

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

Nehmen Sie sich einen Moment Zeit, um die SupplierListMaster.aspx Seite über einen Browser anzuzeigen. Wie in Abbildung 7 dargestellt, werden auf der Seite derzeit alle Lieferanten aufgelistet, einschließlich eines Links "Produkte anzeigen". Wenn Sie auf den Link "Produkte anzeigen" klicken, werden Sie zu ProductsForSupplierDetails.aspx weitergeleitet, wobei die Lieferanten SupplierID in der Abfragezeichenfolge übergeben werden.

Abbildung 7: Jede Lieferantenzeile enthält einen Link "Produkte anzeigen" (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 3: Auflisten der Produkte des Lieferanten inProductsForSupplierDetails.aspx

Zu diesem Zeitpunkt sendet die Seite SupplierListMaster.aspx die Benutzer an ProductsForSupplierDetails.aspx und übergibt den ausgewählten Lieferanten SupplierID in der Query-String. Der letzte Schritt des Tutorials besteht darin, die Produkte in einer GridView anzuzeigen, in ProductsForSupplierDetails.aspx deren SupplierID dem durch den Abfragezeichenfolgen übergebenen Wert SupplierID entspricht. Fügen Sie zunächst der ProductsForSupplierDetails.aspx-Seite ein GridView-Steuerelement hinzu, indem Sie ein neues ObjectDataSource-Steuerelement mit dem Namen ProductsBySupplierDataSource verwenden, das die GetProductsBySupplierID(supplierID)-Methode aus der ProductsBLL-Klasse aufruft.

Abbildung 8: Hinzufügen einer neuen ObjectDataSource namens ProductsBySupplierDataSource (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 9: Auswählen der ProductsBLL Klasse (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 10: Rufen Sie die Methode "ObjectDataSource" auf GetProductsBySupplierID(supplierID) (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Der letzte Schritt des Assistenten zum Konfigurieren von Datenquellen fordert uns auf, die Quelle des Parameters der GetProductsBySupplierID(supplierID) Methode supplierID bereitzustellen. Um den Abfragezeichenfolgenwert zu verwenden, legen Sie die Parameterquelle auf QueryString fest, und geben Sie den Namen des Abfragezeichenfolgenwerts ein, der im QueryStringField-Textfeld (SupplierID) verwendet werden soll.

Abbildung 11: Auffüllen des supplierID Parameterwerts aus dem SupplierID Abfragezeichenfolgenwert (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Das ist alles! Abbildung 12 zeigt die ProductsForSupplierDetails.aspx Seite, wenn sie durch Klicken auf den "Tokyo Traders"-Link von SupplierListMaster.aspx besucht wird.

Abbildung 12: Die von Tokyo Traders gelieferten Produkte werden angezeigt (Zum Anzeigen des Bilds mit voller Größe klicken)

Darstellung von Lieferanteninformationen inProductsForSupplierDetails.aspx

Wie in Abbildung 12 dargestellt, listet die ProductsForSupplierDetails.aspx Seite einfach die Produkte auf, die von der SupplierID in der Abfragezeichenfolge angegeben werden. Jemand, der direkt an diese Seite gesendet wurde, würde jedoch nicht wissen, dass Abbildung 12 die Produkte von Tokyo Traders zeigt. Um dies zu beheben, können wir auch Lieferanteninformationen auf dieser Seite anzeigen.

Beginnen Sie mit dem Hinzufügen eines FormView-Steuerelements über den Produkten GridView. Erstellen Sie ein neues ObjectDataSource-Steuerelement mit dem Namen SuppliersDataSource , das die Methode der SuppliersBLL Klasse GetSupplierBySupplierID(supplierID) aufruft.

Abbildung 13: Auswählen der SuppliersBLL Klasse (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 14: Rufen Sie die Methode "ObjectDataSource" auf GetSupplierBySupplierID(supplierID) (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Weisen Sie wie beim ProductsBySupplierDataSource-Parameter dem supplierID-Parameter den Wert der SupplierID-Abfragezeichenfolge zu.

Abbildung 15: Auffüllen des supplierID Parameterwerts aus dem SupplierID Abfragezeichenfolgenwert (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Wenn die FormView in der Entwurfsansicht an die ObjectDataSource gebunden wird, erstellt Visual Studio automatisch die Elemente ItemTemplate, InsertItemTemplate, und EditItemTemplate der FormView mit Web-Steuerelementen vom Typ "Label" und "TextBox" für jedes der Datenfelder, die von ObjectDataSource zurückgegeben werden. Da wir nur Lieferanteninformationen anzeigen möchten, können Sie die InsertItemTemplate und EditItemTemplate entfernen. Bearbeiten Sie als Nächstes die ItemTemplate so, dass sie den Firmennamen des Lieferanten in einem <h3> Element sowie die Adresse, den Ort, das Land/die Region und die Telefonnummer unter dem Firmennamen anzeigt. Alternativ können Sie die FormView DataSourceID manuell einstellen und das ItemTemplate Markup erstellen, wie wir es im Tutorial "Anzeigen von Daten mit der ObjectDataSource" getan haben.

Nach diesen Bearbeitungen sollte das deklarative Markup von FormView etwa wie folgt aussehen:

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

Abbildung 16 zeigt einen Screenshot der ProductsForSupplierDetails.aspx Seite, nachdem die oben beschriebenen Lieferanteninformationen enthalten sind.

Abbildung 16: Die Liste der Produkte enthält eine Zusammenfassung zum Lieferanten (Klicken Sie hier, um das Bild mit voller Größe anzuzeigen)

Anwenden der endgültigen Fingereingaben für dieProductsForSupplierDetails.aspxBenutzeroberfläche

Um die Benutzererfahrung für diesen Bericht zu verbessern, gibt es einige Ergänzungen, die wir auf der ProductsForSupplierDetails.aspx Seite vornehmen sollten. Derzeit kann ein Benutzer von der ProductsForSupplierDetails.aspx Seite zurück zur Liste der Lieferanten wechseln, indem er auf die Schaltfläche "Zurück" des Browsers klickt. Fügen wir der ProductsForSupplierDetails.aspx Seite ein HyperLink-Steuerelement hinzu, das mit der SupplierListMaster.aspx Seite verknüpft ist und dem Benutzer eine weitere Möglichkeit bietet, zur Hauptliste zurückzukehren.

Abbildung 17: Hinzufügen eines HyperLink-Steuerelements zum Zurücknehmen des Benutzers zu SupplierListMaster.aspx (Klicken, um das Bild in voller Größe anzuzeigen)

Wenn der Benutzer auf den Link "Produkte anzeigen" für einen Lieferanten klickt, der keine Produkte enthält, gibt die ProductsBySupplierDataSource ObjectDataSource ProductsForSupplierDetails.aspx keine Ergebnisse zurück. Die an objectDataSource gebundene GridView rendert kein Markup, was zu einem leeren Bereich auf der Seite im Browser des Benutzers führt. Um dem Benutzer deutlicher mitzuteilen, dass dem ausgewählten Lieferanten keine Produkte zugeordnet sind, können wir die Eigenschaft von EmptyDataText GridView auf die Meldung festlegen, die angezeigt werden soll, wenn eine solche Situation auftritt. Ich habe diese Eigenschaft auf "Von diesem Lieferanten werden keine Produkte geliefert" gesetzt.

Standardmäßig stellen alle Lieferanten in der Northwinds-Datenbank mindestens ein Produkt bereit. Für dieses Lernprogramm habe ich die Products Tabelle jedoch manuell so geändert, dass der Lieferant Escargots Nouveaux nicht mehr mit Produkten verknüpft ist. Abbildung 18 zeigt die Detailseite für Escargots Nouveaux, nachdem diese Änderung vorgenommen wurde.

Abbildung 18: Benutzer werden informiert, dass der Lieferant keine Produkte bereitstellt (Zum Anzeigen des Bilds mit voller Größe klicken)

Zusammenfassung

Während Master-/Detailberichte sowohl die Master- als auch detaildatensätze auf einer einzelnen Seite anzeigen können, werden sie in vielen Websites über zwei Webseiten getrennt. In diesem Lernprogramm haben wir uns angesehen, wie ein solcher Master-/Detailbericht implementiert wird, indem die Lieferanten in einer GridView auf der "Master"-Webseite und die zugehörigen Produkte auf der "Details"-Seite aufgeführt werden. Jede Lieferantenzeile auf der Hauptwebseite enthielt einen Link zur Detailseite, der den Wert der Zeile SupplierID übergab. Solche zeilenspezifischen Links können einfach mithilfe des HyperLinkFields von GridView hinzugefügt werden.

Auf der Detailseite, auf der diese Produkte für den angegebenen Lieferanten abgerufen werden, wurde die Methode der ProductsBLL Klasse GetProductsBySupplierID(supplierID) aufgerufen. Der supplierID Parameterwert wurde deklarativ mithilfe der Abfragezeichenfolge als Parameterquelle angegeben. Außerdem haben wir uns damit befasst, wie die Lieferantendetails auf der Detailseite mithilfe eines FormView angezeigt werden können.

Unser nächstes Tutorial ist das letzte zu Master-Detail-Berichten. Wir sehen uns an, wie eine Liste von Produkten in einer GridView angezeigt wird, in der jede Zeile über eine Schaltfläche "Auswählen" verfügt. Wenn Sie auf die Schaltfläche "Auswählen" klicken, werden die Details dieses Produkts in einem DetailsView-Steuerelement auf derselben Seite angezeigt.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

Besonderer Dank an

Diese Lernprogrammreihe wurde von vielen hilfreichen Prüfern überprüft. Lead Reviewer für dieses Lernprogramm war Hilton Giesenow. Möchten Sie meine bevorstehenden MSDN-Artikel überprüfen? Wenn dies der Fall ist, schreiben Sie mir eine Nachricht an mitchell@4GuysFromRolla.com.

VorherigeNächste