Master-/Detailfilterung mit einem DropDownList-Steuerelement und GridView (C#)

Artikel
03/02/2024

In diesem Tutorial erfahren Sie, wie Sie die master Datensätze in einem DropDownList-Steuerelement und die Details des ausgewählten Listenelements in einer GridView anzeigen.

Einführung

Ein gängiger Berichtstyp ist der master-/Detailbericht, in dem der Bericht mit einer Reihe von "master"-Datensätzen beginnt. Der Benutzer kann dann einen Drilldown in einen der master Datensätze ausführen und so die "Details" master Datensatzes anzeigen. Master-/Detailberichte sind eine ideale Wahl zum Visualisieren von 1:n-Beziehungen, z. B. einem Bericht, der alle Kategorien anzeigt und es einem Benutzer dann ermöglicht, eine bestimmte Kategorie auszuwählen und die zugehörigen Produkte anzuzeigen. Darüber hinaus sind master-/Detailberichte nützlich, um detaillierte Informationen aus besonders "breiten" Tabellen anzuzeigen (solche, die viele Spalten enthalten). Beispielsweise kann die "master"-Ebene eines master-/Detailberichts nur den Produktnamen und den Einzelpreis der Produkte in der Datenbank anzeigen, und ein Drilldown in ein bestimmtes Produkt würde die zusätzlichen Produktfelder (Kategorie, Lieferant, Menge pro Einheit usw.) anzeigen.

Es gibt viele Möglichkeiten, mit denen ein master-/Detailbericht implementiert werden kann. In diesem und den nächsten drei Tutorials sehen wir uns eine Vielzahl von master-/Detailberichten an. In diesem Tutorial erfahren Sie, wie Sie die master Datensätze in einem DropDownList-Steuerelement und die Details des ausgewählten Listenelements in einer GridView anzeigen. Insbesondere werden im master-/Detailbericht dieses Tutorials Kategorie- und Produktinformationen aufgelistet.

Schritt 1: Anzeigen der Kategorien in einer DropDownList

In unserem master/Detailbericht werden die Kategorien in einer DropDownList aufgelistet, wobei die Produkte des ausgewählten Listenelements weiter unten auf der Seite in einer GridView angezeigt werden. Die erste Aufgabe, die vor uns liegt, besteht dann darin, die Kategorien in einer DropDownList anzuzeigen. Öffnen Sie die FilterByDropDownList.aspx Seite im Filtering Ordner, ziehen Sie eine DropDownList aus der Toolbox auf den Designer der Seite, und legen Sie die ID -Eigenschaft auf fest Categories. Klicken Sie als Nächstes im Smarttag der DropDownList auf den Link Datenquelle auswählen. Dadurch wird der Datenquellenkonfigurations-Assistent angezeigt.

Abbildung 1: Angeben der Datenquelle der DropDownList (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wählen Sie aus, um eine neue ObjectDataSource mit dem Namen CategoriesDataSource hinzuzufügen, die die Methode der CategoriesBLLGetCategories() Klasse aufruft.

Abbildung 2: Hinzufügen eines neuen ObjectDataSource-Namens CategoriesDataSource (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 3: Wählen Sie aus, um die CategoriesBLL Klasse zu verwenden (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

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

Nach dem Konfigurieren der ObjectDataSource müssen wir weiterhin angeben, welches Datenquellenfeld in DropDownList angezeigt werden soll und welches als Wert für das Listenelement zugeordnet werden soll. Verwenden Sie das CategoryName Feld als Anzeige und CategoryID als Wert für jedes Listenelement.

Abbildung 5: In der DropDownList wird das CategoryName Feld angezeigt und als Wert verwendet CategoryID (Klicken Sie, um das bild in voller Größe anzuzeigen)

An diesem Punkt verfügen wir über ein DropDownList-Steuerelement, das mit den Datensätzen aus der Categories Tabelle aufgefüllt wird (alles in etwa sechs Sekunden erreicht). Abbildung 6 zeigt unseren bisherigen Fortschritt, wenn wir über einen Browser angezeigt werden.

Abbildung 6: Eine Drop-Down Listen der aktuellen Kategorien (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 2: Hinzufügen des Products GridView

Dieser letzte Schritt in unserem master/Detailbericht besteht darin, die Produkte aufzulisten, die der ausgewählten Kategorie zugeordnet sind. Um dies zu erreichen, fügen Sie der Seite eine GridView hinzu, und erstellen Sie eine neue ObjectDataSource mit dem Namen productsDataSource. Lassen Sie das productsDataSource Steuerelement seine Daten aus der -Methode der ProductsBLL -Klasse GetProductsByCategoryID(categoryID) cullen.

Abbildung 7: Auswählen der GetProductsByCategoryID(categoryID) Methode (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Nachdem Sie diese Methode ausgewählt haben, fordert uns der ObjectDataSource-Assistent zur Eingabe des Werts für den Parameter der Methode categoryID auf. Um den Wert des ausgewählten categories DropDownList-Elements zu verwenden, legen Sie die Parameterquelle auf Control und die ControlID auf fest Categories.

Abbildung 8: Legen Sie den categoryID Parameter auf den Wert der Categories DropDownList fest (Klicken Sie, um das bild in voller Größe anzuzeigen)

Nehmen Sie sich einen Moment Zeit, um unseren Fortschritt in einem Browser zu überprüfen. Beim ersten Besuch der Seite werden diese Produkte zur ausgewählten Kategorie (Getränke) angezeigt (wie in Abbildung 9 dargestellt), aber das Ändern der DropDownList aktualisiert die Daten nicht. Dies liegt daran, dass ein Postback erfolgen muss, damit gridView aktualisiert werden kann. Um dies zu erreichen, haben wir zwei Optionen (für die kein Code geschrieben werden muss):

Legen Sie die AutoPostBack-Eigenschaftvon DropDownList für Kategorienauf True fest. (Sie können dies erreichen, indem Sie die Option AutoPostBack aktivieren im Smarttag der DropDownList aktivieren aktivieren.) Dadurch wird ein Postback ausgelöst, wenn das ausgewählte Element der DropDownList vom Benutzer geändert wird. Wenn der Benutzer eine neue Kategorie aus der DropDownList auswählt, wird daher ein Postback ausgeführt, und die GridView wird mit den Produkten für die neu ausgewählte Kategorie aktualisiert. (Dies ist der Ansatz, den ich in diesem Tutorial verwendet habe.)
Fügen Sie ein Button-Websteuerelement neben der DropDownList hinzu. Legen Sie die Text Eigenschaft auf Refresh oder ähnliches fest. Bei diesem Ansatz muss der Benutzer eine neue Kategorie auswählen und dann auf die Schaltfläche klicken. Wenn Sie auf die Schaltfläche klicken, wird ein Postback ausgelöst, und die GridView wird aktualisiert, um die Produkte der ausgewählten Kategorie aufzulisten.

Abbildungen 9 und 10 veranschaulichen den master/Detailbericht in Aktion.

Abbildung 9: Beim ersten Besuch der Seite werden die Getränkeprodukte angezeigt (Klicken Sie, um das bild in voller Größe anzuzeigen)

Abbildung 10: Auswählen eines neuen Produkts (Erstellen) Bewirkt automatisch ein PostBack, Aktualisieren der GridView (Klicken, um das bild in voller Größe anzuzeigen)

Hinzufügen eines "-- Kategorie auswählen --" Listenelements

Beim ersten Besuch der FilterByDropDownList.aspx Seite wird standardmäßig die Kategorie DropDownLists erstes Listenelement (Getränke) ausgewählt, wobei die Getränkeprodukte in der GridView angezeigt werden. Anstatt die Produkte der ersten Kategorie anzuzeigen, sollten Sie stattdessen ein DropDownList-Element auswählen, das etwa "-- Kategorie auswählen --" anzeigt.

Um der DropDownList ein neues Listenelement hinzuzufügen, wechseln Sie zum Eigenschaftenfenster, und klicken Sie auf die Auslassungspunkte in der Items Eigenschaft. Fügen Sie ein neues Listenelement mit dem Text -- Kategorie auswählen --" und dem Value-1hinzu.

Abbildung 11: Hinzufügen einer -- Kategorie auswählen -- Listenelement (Klicken Sie, um das bild in voller Größe anzuzeigen)

Alternativ können Sie das Listenelement hinzufügen, indem Sie der DropDownList das folgende Markup hinzufügen:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Darüber hinaus müssen wir das DropDownList-Steuerelement AppendDataBoundItems auf True festlegen, da die Kategorien, wenn sie an die DropDownList aus der ObjectDataSource gebunden sind, alle manuell hinzugefügten Listenelemente überschreiben, wenn AppendDataBoundItems sie nicht True sind.

Legen Sie die AppendDataBoundItems-Eigenschaft auf True fest.

Abbildung 12: Festlegen der AppendDataBoundItems Eigenschaft auf True

Nach diesen Änderungen wird beim ersten Besuch der Seite die Option "-- Kategorie auswählen --" ausgewählt, und es werden keine Produkte angezeigt.

Abbildung 13: Auf der anfänglichen Seite werden keine Produkte angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Der Grund, warum keine Produkte angezeigt werden, wenn das Listenelement "-- Kategorie auswählen --" ausgewählt ist, ist, weil sein Wert ist -1 und es keine Produkte in der Datenbank mit einem CategoryID von -1gibt. Wenn dies das gewünschte Verhalten ist, sind Sie an diesem Punkt fertig! Wenn Sie jedoch alle Kategorien anzeigen möchten, wenn das Listenelement "-- Kategorie auswählen --" ausgewählt ist, kehren Sie zur ProductsBLL Klasse zurück, und passen Sie die GetProductsByCategoryID(categoryID) Methode so an, dass die Methode aufgerufen GetProducts() wird, wenn der übergebene categoryID Parameter kleiner als 0 ist:

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

Die hier verwendete Technik ähnelt dem Ansatz, den wir verwendet haben, um alle Lieferanten wieder im Tutorial Deklarative Parameter anzuzeigen, obwohl wir für dieses Beispiel den Wert von -1 verwenden, um anzugeben, dass alle Datensätze im Gegensatz zu nullabgerufen werden sollen. Dies liegt daran, dass der categoryID Parameter der GetProductsByCategoryID(categoryID) -Methode als ganzzahliger Wert erwartet wird, der übergeben wird, während wir im Tutorial "Deklarative Parameter" einen Zeichenfolgeneingabeparameter übergeben haben.

Abbildung 14 zeigt einen Screenshot, FilterByDropDownList.aspx wann die Option "-- Kategorie auswählen --" ausgewählt ist. Hier werden standardmäßig alle Produkte angezeigt, und der Benutzer kann die Anzeige einschränken, indem er eine bestimmte Kategorie auswählt.

Abbildung 14: Alle Produkte werden jetzt standardmäßig aufgelistet (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Zusammenfassung

Bei der Anzeige hierarchisch bezogener Daten ist es häufig hilfreich, die Daten mithilfe von master-/Detailberichten darzustellen, aus denen der Benutzer die Daten von oben in der Hierarchie durchgehen und einen Drilldown in Details durchführen kann. In diesem Tutorial haben wir die Erstellung eines einfachen master-/Detailberichts mit den Produkten einer ausgewählten Kategorie untersucht. Dies wurde erreicht, indem eine DropDownList für die Liste der Kategorien und eine GridView für die Produkte verwendet wurden, die zur ausgewählten Kategorie gehören.

Im nächsten Tutorial gehen wir mit der DropDownList-Schnittstelle einen Schritt weiter und verwenden dabei zwei DropDownLists.

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 Stunden. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Share via