Master-/Detailfilterung über zwei Seiten mit GridView (C#)

von Scott Mitchell

PDF herunterladen

In diesem Tutorial implementieren wir dieses Muster mithilfe einer GridView, um die Lieferanten in der Datenbank aufzulisten. Jede Lieferantenzeile in der GridView enthält einen Link Produkte anzeigen, der den Benutzer beim Klicken auf eine separate Seite bringt, auf der diese Produkte für den ausgewählten Lieferanten aufgelistet sind.

Einführung

In den vorherigen beiden Tutorials haben wir gezeigt, wie Sie master-/Detailberichte auf einer einzelnen Webseite mithilfe von DropDownLists anzeigen, um die "master"-Datensätze und ein GridView- oder DetailsView-Steuerelement anzuzeigen, um die "Details" anzuzeigen. Ein weiteres gängiges Muster für master-/Detailberichte besteht darin, dass die master Datensätze auf einer Webseite und die Details auf einer anderen seite angezeigt werden. Eine Forumswebsite, wie die ASP.NET Foren, ist ein hervorragendes Beispiel für dieses Muster in der Praxis. Die ASP.NET Foren bestehen aus einer Vielzahl von Foren Erste Schritte, Web Forms, Datenpräsentationssteuerelementen usw. Jedes Forum besteht aus vielen Threads und jeder Thread besteht aus einer Reihe von Beiträgen. Auf der ASP.NET-Foren-Homepage sind die Foren aufgeführt. Wenn Sie auf ein Forum klicken, gelangen Sie zu einer ShowForum.aspx Seite, die die Threads für dieses Forum auflistet. Ebenso gelangen Sie durch Klicken auf einen Thread zu , in ShowPost.aspxdem die Beiträge für den Thread angezeigt werden, auf den geklickt wurde.

In diesem Tutorial implementieren wir dieses Muster mithilfe einer GridView, um die Lieferanten in der Datenbank aufzulisten. Jede Lieferantenzeile in der GridView enthält einen Link Produkte anzeigen, der den Benutzer beim Klicken auf eine separate Seite bringt, auf der diese Produkte für den ausgewählten Lieferanten aufgelistet sind.

Schritt 1: HinzufügenSupplierListMaster.aspxvon Seiten undProductsForSupplierDetails.aspxzumFilteringOrdner

Beim Definieren des Seitenlayouts im dritten Tutorial haben wir eine Reihe von "Starterseiten" in den BasicReportingOrdnern , Filteringund CustomFormatting hinzugefügt. Allerdings haben wir zu diesem Zeitpunkt keine Startseite für dieses Tutorial hinzugefügt. Nehmen Sie sich also einen Moment Zeit, um dem Filtering Ordner zwei neue Seiten hinzuzufügen: SupplierListMaster.aspx und ProductsForSupplierDetails.aspx. SupplierListMaster.aspxlistet die "master"-Datensätze (die Lieferanten) auf, während ProductsForSupplierDetails.aspx die Produkte für den ausgewählten Lieferanten angezeigt werden.

Wenn Sie diese beiden neuen Seiten erstellen, stellen Sie sicher, dass sie der Site.master master Seite zugeordnet werden.

Abbildung 1: Hinzufügen der SupplierListMaster.aspx Seiten und ProductsForSupplierDetails.aspx zum Filtering Ordner

Achten Sie außerdem beim Hinzufügen neuer Seiten zum Projekt darauf, Web.sitemapdie Siteübersichtsdatei entsprechend zu aktualisieren. Fügen Sie für dieses Tutorial einfach die SupplierListMaster.aspx Seite zur Websiteübersicht hinzu, indem Sie den folgenden XML-Inhalt als untergeordnetes Element des Elements Filtering Reports <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 beim Hinzufügen neuer ASP.NET Seiten mithilfe des kostenlosen Visual Studio-Site Map-Makros von K. Scott Allen den Prozess des Aktualisierens der Site map-Datei automatisieren.

Schritt 2: Anzeigen der Lieferantenliste inSupplierListMaster.aspx

Nachdem die SupplierListMaster.aspx Seiten und ProductsForSupplierDetails.aspx erstellt wurden, besteht unser nächster Schritt darin, die GridView der Lieferanten in SupplierListMaster.aspxzu 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: Wählen Sie die SuppliersBLL Klasse aus (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

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

Wir müssen einen Link mit dem Titel Produkte anzeigen in jede GridView-Zeile einfügen, der den Benutzer beim Klicken dazu bringt, den Wert der ausgewählten Zeile SupplierID über die Abfragezeichenfolge zu ProductsForSupplierDetails.aspx übergeben. Wenn der Benutzer beispielsweise auf den Link Produkte anzeigen für den Lieferanten von Tokyo Traders klickt (der einen SupplierID Wert von 4 hat), sollte er an ProductsForSupplierDetails.aspx?SupplierID=4gesendet werden.

Um dies zu erreichen, fügen Sie 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 in der Liste oben links aus, und klicken Sie auf Hinzufügen, um das HyperLinkField in die Feldliste von GridView aufzunehmen.

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

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, die an jede bestimmte Zeile gebunden sind. Um einen statischen Wert für alle Zeilen anzugeben, verwenden Sie die Eigenschaften oder NavigateUrl von Text HyperLinkField. Da der Linktext für alle Zeilen identisch sein soll, legen Sie die HyperLinkField-Eigenschaft Text auf Produkte anzeigen fest.

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

Um die Text- oder URL-Werte auf Grundlage der zugrunde liegenden Daten festzulegen, die an die GridView-Zeile gebunden sind, geben Sie die Datenfelder an, aus denen die Text- oder URL-Werte in den DataTextField Eigenschaften oder DataNavigateUrlFields abgerufen werden sollen. DataTextField kann nur auf ein einzelnes Datenfeld festgelegt werden; DataNavigateUrlFieldskann jedoch auf eine durch Kommas 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 HyperLinkField-Links lautet ProductsForSupplierDetails.aspx?SupplierID=supplierID, wobei supplierID der Wert jeder GridView-Zeile SupplierID ist. Beachten Sie, dass wir hier sowohl statische als auch datengesteuerte Werte benötigen: Der ProductsForSupplierDetails.aspx?SupplierID= Teil der URL des Links ist statisch, während der supplierID Teil datengesteuert ist, da sein Wert der eigene SupplierID Wert jeder Zeile ist.

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

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

Abbildung 6: Konfigurieren des HyperLinkField so, dass die richtige Link-URL basierend auf dem SupplierID eingeschlossen wird (Klicken Sie, um das bild in voller Größe anzuzeigen)

Nachdem Sie 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 Abbildung 7 zeigt, listet die Seite derzeit alle Lieferanten einschließlich des Links Produkte anzeigen auf. Wenn Sie auf den Link Produkte anzeigen klicken, gelangen Sie zu ProductsForSupplierDetails.aspx, indem Sie die des SupplierID Lieferanten in der Abfragezeichenfolge übergeben.

Abbildung 7: Jede Lieferantenzeile enthält einen Link "Produkte anzeigen" (Zum Anzeigen des Bilds in voller Größe klicken)

Schritt 3: Auflisten der Produkte des Lieferanten inProductsForSupplierDetails.aspx

An diesem Punkt sendet die SupplierListMaster.aspx Seite Benutzer an ProductsForSupplierDetails.aspx, die den ausgewählten Lieferanten SupplierID in der Abfragezeichenfolge übergeben. Der letzte Schritt des Tutorials besteht darin, die Produkte in einer GridView anzuzeigen, in ProductsForSupplierDetails.aspx der SupplierID die SupplierID durch die Abfragezeichenfolge übergebene entspricht. Um dies zu erreichen, fügen Sie zunächst ProductsForSupplierDetails.aspx eine GridView zur Seite hinzu, indem Sie ein neues ObjectDataSource-Steuerelement namens verwenden ProductsBySupplierDataSource , das die GetProductsBySupplierID(supplierID) -Methode aus der ProductsBLL -Klasse aufruft.

Abbildung 8: Hinzufügen eines neuen ObjectDataSource-Namens ProductsBySupplierDataSource (Klicken Sie hier, 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: Lassen Sie die ObjectDataSource-Methode GetProductsBySupplierID(supplierID) aufrufen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Im letzten Schritt des Assistenten zum Konfigurieren von Datenquellen werden wir aufgefordert, die Quelle des -Parameters der GetProductsBySupplierID(supplierID) Methode supplierID anzugeben. Um den querystring-Wert zu verwenden, legen Sie die Parameterquelle auf QueryString fest, und geben Sie den Namen des querystring-Werts ein, der in das Textfeld QueryStringField (SupplierID) verwendet werden soll.

Abbildung 11: Auffüllen des supplierID Parameterwerts aus dem SupplierIDQuerystring-Wert (Klicken Sie, um das vollständige Bild anzuzeigen)

Das war es schon! Abbildung 12 zeigt die ProductsForSupplierDetails.aspx Seite, wenn Sie auf den Link Tokyo Traders von SupplierListMaster.aspxklicken.

Abbildung 12: Die von Tokyo Traders gelieferten Produkte werden angezeigt (Klicken Sie, um das bild in voller Größe anzuzeigen)

Anzeigen von Lieferanteninformationen inProductsForSupplierDetails.aspx

Wie Abbildung 12 zeigt, listet die ProductsForSupplierDetails.aspx Seite einfach die Produkte auf, die von der SupplierID in der Abfragezeichenfolge angegebenen bereitgestellt 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.

Fügen Sie zunächst eine FormView über den GridView-Produkten hinzu. Erstellen Sie ein neues ObjectDataSource-Steuerelement mit dem Namen SuppliersDataSource , das die Methode der SuppliersBLLGetSupplierBySupplierID(supplierID) Klasse aufruft.

Abbildung 13: Wählen Sie die SuppliersBLL Klasse aus (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Abbildung 14: Lassen Sie die ObjectDataSource-Methode GetSupplierBySupplierID(supplierID) aufrufen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wie bei ProductsBySupplierDataSourcehaben Sie dem Parameter den supplierID Wert des SupplierID querystring-Werts zugewiesen.

Abbildung 15: Auffüllen des supplierID Parameterwerts aus dem SupplierIDQuerystring-Wert (Klicken Sie, um das bild in voller Größe anzuzeigen)

Beim Binden der FormView an objectDataSource in der Entwurfsansicht erstellt Visual Studio automatisch die FormView-Websteuerelemente ItemTemplate, InsertItemTemplateund EditItemTemplate mit Label und TextBox für jedes von ObjectDataSource zurückgegebene Datenfeld. Da wir nur Lieferanteninformationen anzeigen möchten, können Sie die InsertItemTemplate und EditItemTemplateentfernen. Bearbeiten Sie als Nächstes die ItemTemplate so, dass der Firmenname des Lieferanten in einem <h3> Element und die Adresse, der Ort, das Land/die Region und die Telefonnummer unter dem Firmennamen angezeigt werden. Alternativ können Sie die FormViews DataSourceID manuell festlegen und das ItemTemplate Markup erstellen, wie wir es im Tutorial "Anzeigen von Daten mit der ObjectDataSource" getan haben.

Nach der Bearbeitung sollte das deklarative Markup von FormView in 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 eingeschlossen wurden.

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

Anwenden von Final Touches für dieProductsForSupplierDetails.aspxBenutzeroberfläche

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

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

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

Standardmäßig stellen alle Lieferanten in der Northwinds-Datenbank mindestens ein Produkt bereit. Für dieses Tutorial habe ich die Products Tabelle jedoch manuell so geändert, dass der Lieferant Escargots Nouveaux keinem Produkt mehr zugeordnet ist. Abbildung 18 zeigt die Detailseite für Escargots Nouveaux nach dieser Änderung.

Abbildung 18: Benutzer werden darüber informiert, dass der Lieferant keine Produkte bereitstellt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

Während master-/Detailberichte sowohl die master- als auch Detaildatensätze auf einer einzelnen Seite anzeigen können, sind sie auf vielen Websites auf zwei Webseiten getrennt. In diesem Tutorial haben wir uns mit der Implementierung eines solchen master/Detailberichts befasst, indem die Lieferanten in einer GridView auf der Webseite "master" und die zugehörigen Produkte auf der Seite "Details" aufgeführt sind. Jede Zeile des Lieferanten auf der master Webseite enthielt einen Link zur Detailseite, die den Zeilenwert SupplierID übergeben hat. Solche zeilenspezifischen Verknüpfungen können problemlos mit dem HyperLinkField von GridView hinzugefügt werden.

Auf der Detailseite wurde das Abrufen dieser Produkte für den angegebenen Lieferanten durch Aufrufen der -Methode der ProductsBLL -Klasse GetProductsBySupplierID(supplierID) erreicht. Der supplierID Parameterwert wurde deklarativ mithilfe der Abfragezeichenfolge als Parameterquelle angegeben. Außerdem haben wir uns angesehen, wie die Lieferantendetails auf der Detailseite mithilfe einer FormView angezeigt werden.

Unser nächstes Tutorial ist das letzte zu master-/Detailberichten. Wir sehen uns an, wie eine Liste von Produkten in einem GridView-Objekt angezeigt wird, in dem jede Zeile über die 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.

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Besonderer Dank an

Diese Tutorialreihe wurde von vielen hilfreichen Prüfern überprüft. Leitender Prüfer für dieses Tutorial war Hilton Giesenow. Möchten Sie meine bevorstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

ZurückWeiter