Master-/Detailfilterung mit einer DropDownList und DataList (VB)

Artikel
07/13/2023

In diesem Tutorial erfahren Sie, wie Sie master-/Detailberichte auf einer einzelnen Webseite mithilfe von DropDownLists anzeigen, um die Datensätze "master" und eine DataList zum Anzeigen der "Details" anzuzeigen.

Einführung

Der master-/Detailbericht, den wir zuerst mithilfe einer GridView im vorherigen Tutorial master/detail Filtering With a DropDownList erstellt haben, beginnt mit einer Reihe von "master"-Datensätzen. 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 und zum Anzeigen detaillierter Informationen aus besonders "breiten" Tabellen (solche mit vielen Spalten). In den vorherigen Tutorials haben wir untersucht, wie Sie master-/Detailberichte mithilfe der Steuerelemente GridView und DetailsView implementieren. In diesem Tutorial und den beiden nächsten Werden diese Konzepte erneut überprüft, konzentrieren wir uns jedoch stattdessen auf die Verwendung von DataList- und Repeater-Steuerelementen.

In diesem Tutorial sehen wir uns die Verwendung einer DropDownList an, um die "master"-Datensätze zu enthalten, wobei die "Details"-Datensätze in einer DataList angezeigt werden.

Schritt 1: Hinzufügen der Master-/Detailtutorial-Webseiten

Bevor wir mit diesem Tutorial beginnen, nehmen wir uns zunächst einen Moment Zeit, um den Ordner und ASP.NET Seiten hinzuzufügen, die wir für dieses Tutorial und die nächsten beiden Seiten benötigen, die sich mit master/Detailberichten mit den DataList- und Repeater-Steuerelementen befassen. Erstellen Sie zunächst einen neuen Ordner im Projekt mit dem Namen DataListRepeaterFiltering. Fügen Sie als Nächstes die folgenden fünf ASP.NET Seiten zu diesem Ordner hinzu, wobei alle für die Verwendung der master Seite Site.masterkonfiguriert sind:

Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx

Erstellen eines DataListRepeaterFiltering-Ordners und Hinzufügen des Tutorials ASP.NET Seiten

Abbildung 1: Erstellen eines DataListRepeaterFiltering Ordners und Hinzufügen des Tutorials ASP.NET Seiten

Öffnen Sie als Nächstes die Default.aspx Seite, und ziehen Sie das SectionLevelTutorialListing.ascx Benutzersteuerelement aus dem UserControls Ordner auf die Entwurfsoberfläche. Dieses Benutzersteuerelement, das wir im Tutorial Gestaltungsvorlagen und Websitenavigation erstellt haben, listet die Websiteübersicht auf und zeigt die Tutorials aus dem aktuellen Abschnitt in einer Aufzählung an.

Abbildung 2: Hinzufügen des SectionLevelTutorialListing.ascx Benutzersteuerelements zu Default.aspx (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Damit die Aufzählungsliste die master-/Detailtutorials anzeigt, die wir erstellen werden, müssen wir sie der Websiteübersicht hinzufügen. Öffnen Sie die Web.sitemap Datei, und fügen Sie das folgende Markup nach dem Siteübersichtsknotenmarkup "Daten mit DataList und Repeater anzeigen" hinzu:

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                     both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</siteMapNode>

Aktualisieren der Websiteübersicht, um die neuen ASP.NET-Seiten einzuschließen

Abbildung 3: Aktualisieren der Websiteübersicht, um die neue ASP.NET-Seiten einzuschließen

Schritt 2: Anzeigen der Kategorien in einer DropDownList

Unser master/Detailbericht listet die Kategorien in einer DropDownList auf, wobei die Produkte des ausgewählten Listenelements weiter unten auf der Seite in einer DataList angezeigt werden. Die erste Aufgabe, die vor uns liegt, besteht dann darin, die Kategorien in einer DropDownList anzuzeigen. Öffnen Sie zunächst die FilterByDropDownList.aspx Seite im DataListRepeaterFiltering Ordner, und ziehen Sie eine DropDownList aus der Toolbox in den Designer der Seite. Legen Sie als Nächstes ID die DropDownList-Eigenschaft auf fest Categories. Klicken Sie im Smarttag der DropDownList auf den Link Datenquelle auswählen, und erstellen Sie eine neue ObjectDataSource mit dem Namen CategoriesDataSource.

Abbildung 4: Hinzufügen eines neuen ObjektsDataSource namens CategoriesDataSource (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Konfigurieren Sie die neue ObjectDataSource so, dass die Methode der CategoriesBLL Klasse GetCategories() aufgerufen wird. Nach dem Konfigurieren der ObjectDataSource müssen wir weiterhin angeben, welches Datenquellenfeld in der DropDownList angezeigt werden soll und welches als Wert für jedes 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 der Produktdatenliste

Der 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 DataList hinzu, und erstellen Sie eine neue ObjectDataSource mit dem Namen ProductsByCategoryDataSource. Lassen Sie das ProductsByCategoryDataSource Steuerelement seine Daten aus der -Methode der ProductsBLL -Klasse GetProductsByCategoryID(categoryID) abrufen. Da dieser master/Detailbericht schreibgeschützt ist, wählen Sie die Option (Keine) auf den Registerkarten EINFÜGEN, AKTUALISIEREN und LÖSCHEN aus.

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

Nachdem Sie auf Weiter geklickt haben, fordert uns der ObjectDataSource-Assistent zur Angabe der Quelle des Werts categoryID für den Parameter der GetProductsByCategoryID(categoryID) Methode 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)

Nach Abschluss des Assistenten "Datenquelle konfigurieren" generiert Visual Studio automatisch eine ItemTemplate für die DataList, die den Namen und den Wert jedes Datenfelds anzeigt. Lassen Sie uns die DataList erweitern, um stattdessen ein ItemTemplate zu verwenden, das nur den Namen, die Kategorie, den Lieferanten, die Menge pro Einheit und den Preis des Produkts anzeigt, zusammen mit einem SeparatorTemplate , das ein <hr> Element zwischen den einzelnen Elementen einschleust. Ich werde das ItemTemplate aus einem Beispiel im Tutorial Anzeigen von Daten mit den DataList- und Repeatersteuerelementen verwenden, aber sie können das Vorlagenmarkup verwenden, das Sie visuell am ansprechendsten finden.

Nachdem Sie diese Änderungen vorgenommen haben, sollte Das Markup Ihrer DataList und des zugehörigen ObjectDataSource-Markups wie folgt aussehen:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label ID="ProductNameLabel" runat="server"
                Text='<%# Eval("ProductName") %>' />
        </h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Nehmen Sie sich einen Moment Zeit, um unseren Fortschritt in einem Browser zu überprüfen. Beim ersten Besuch der Seite werden die Produkte angezeigt, die zur ausgewählten Kategorie (Getränke) gehören (wie in Abbildung 9 dargestellt), aber das Ändern der DropDownList aktualisiert die Daten nicht. Dies liegt daran, dass ein Postback erfolgen muss, damit die DataList aktualisiert werden kann. Um dies zu erreichen, können wir entweder die Eigenschaft der AutoPostBack DropDownList auf true festlegen oder der Seite ein Button-Websteuerelement hinzufügen. In diesem Tutorial habe ich mich dafür entschieden, die DropDownList-Eigenschaft AutoPostBack auf truefestzulegen.

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 DataList (Klicken, um das bild in voller Größe anzuzeigen)

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

Beim ersten Besuch der FilterByDropDownList.aspx Seite ist standardmäßig die Kategorien DropDownLists erstes Listenelement (Getränke) ausgewählt, wobei die Getränkeprodukte in der DataList angezeigt werden. Im Tutorial Master-/Detailfilterung mit DropDownList haben wir der DropDownList die Option "-- Kategorie auswählen" hinzugefügt, die standardmäßig ausgewählt war und bei Auswahl alle Produkte in der Datenbank angezeigt hat. Ein solcher Ansatz war beim Auflisten der Produkte in einer GridView verwaltbar, da jede Produktzeile eine kleine Menge an Bildschirmimmobilien in Anspruch nahm. Mit der DataList verbrauchen die Informationen jedes Produkts jedoch einen viel größeren Teil des Bildschirms. Fügen wir trotzdem eine Option "-- Kategorie auswählen --" hinzu, und lassen Sie sie standardmäßig auswählen, aber anstatt alle Produkte anzuzeigen, wenn sie ausgewählt ist, konfigurieren wir sie so, dass keine Produkte angezeigt werden.

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

Hinzufügen eines

Abbildung 11: Hinzufügen eines Listenelements "-- Kategorie auswählen --"

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="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

Darüber hinaus müssen wir das DropDownList-Steuerelement AppendDataBoundItems auf true festlegen, denn wenn es auf false (Standard) festgelegt ist, werden die Kategorien an die DropDownList aus der ObjectDataSource gebunden, alle manuell hinzugefügten Listenelemente überschrieben.

Legen Sie die AppendDataBoundItems-Eigenschaft auf True fest.

Abbildung 12: Festlegen der AppendDataBoundItems Eigenschaft auf True

Der Grund, warum wir den Wert 0 für das Listenelement "-- Wählen Sie eine Kategorie --" ausgewählt haben, liegt daran, dass es im System keine Kategorien mit dem Wert von 0gibt, sodass keine Produktdatensätze zurückgegeben werden, wenn das Listenelement "-- Kategorie auswählen --" ausgewählt ist. Um dies zu bestätigen, nehmen Sie sich einen Moment Zeit, um die Seite über einen Browser zu besuchen. Wie Abbildung 13 zeigt, wird beim ersten Anzeigen der Seite das Listenelement "-- Kategorie auswählen --" ausgewählt, und es werden keine Produkte angezeigt.

Abbildung 13: Wenn das Listenelement "-- Kategorie auswählen --" ausgewählt ist, werden keine Produkte angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn Sie lieber alle Produkte anzeigen möchten, wenn die Option "-- Kategorie auswählen --" ausgewählt ist, verwenden Sie stattdessen einen Wert von -1 . Der kluge Leser erinnert sich daran, dass wir im Tutorial Master/Detailfilterung mit dropDownList die Methode der ProductsBLL Klasse GetProductsByCategoryID(categoryID) aktualisiert haben, sodass alle Produktdatensätze zurückgegeben wurden, wenn ein categoryID Wert von -1 übergeben wurde.

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 DataList für die Produkte verwendet wurden, die zur ausgewählten Kategorie gehören.

Im nächsten Tutorial sehen wir uns die Trennung der master- und Detaildatensätze auf zwei Seiten an. Auf der ersten Seite wird eine Liste der "master"-Datensätze mit einem Link zum Anzeigen der Details angezeigt. Wenn Sie auf den Link klicken, gelangen Sie zur zweiten Seite, auf der die Details für den ausgewählten master Datensatz angezeigt werden.

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. Lead Reviewer für dieses Tutorial war Randy Schmidt. Möchten Sie meine bevorstehenden MSDN-Artikel lesen? Wenn dies der Fall ist, legen Sie eine Zeile unter abmitchell@4GuysFromRolla.com.

Zurück Weiter

Share via