Share via

Master-/Detailbericht unter Verwendung eines auswählbaren GridView-Mastersteuerelements mit einem DetailView-Detailsteuerelement (C#)

  • Artikel

von Scott Mitchell

PDF herunterladen

Dieses Tutorial enthält eine GridView, deren Zeilen den Namen und preis der einzelnen Produkte sowie eine Schaltfläche Auswählen enthalten. Wenn Sie auf die Schaltfläche Auswählen für ein bestimmtes Produkt klicken, werden die vollständigen Details in einem DetailsView-Steuerelement auf derselben Seite angezeigt.

Einführung

Im vorherigen Tutorial haben wir gezeigt, wie Sie einen master-/Detailbericht mithilfe von zwei Webseiten erstellen: eine "master"-Webseite, von der aus die Liste der Lieferanten angezeigt wurde; und eine "Details"-Webseite, auf der die vom ausgewählten Lieferanten bereitgestellten Produkte aufgeführt sind. Dieses Berichtsformat für zwei Seiten kann zu einer Seite zusammengefasst werden. Dieses Tutorial enthält eine GridView, deren Zeilen den Namen und preis der einzelnen Produkte sowie eine Schaltfläche Auswählen enthalten. Wenn Sie auf die Schaltfläche Auswählen für ein bestimmtes Produkt klicken, werden die vollständigen Details in einem DetailsView-Steuerelement auf derselben Seite angezeigt.

Wenn Sie auf die Schaltfläche Auswählen klicken, werden die Produktdetails angezeigt.

Abbildung 1: Beim Klicken auf die Schaltfläche "Auswählen" werden die Produktdetails angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Schritt 1: Erstellen einer auswählbaren GridView

Erinnern Sie sich daran, dass im zweiseitigen master-/Detailbericht jeder master Datensatz einen Link enthielt, der den Benutzer beim Klicken auf die Detailseite gesendet hat, die den Wert der geklickten Zeile SupplierID in der Abfragezeichenfolge übergibt. Ein solcher Link wurde jeder GridView-Zeile mithilfe eines HyperLinkField hinzugefügt. Für den Einzelseitenbericht master/Details benötigen wir eine Schaltfläche für jede GridView-Zeile, die beim Klicken die Details anzeigt. Das GridView-Steuerelement kann so konfiguriert werden, dass es eine Select-Schaltfläche für jede Zeile enthält, die ein Postback verursacht und diese Zeile als SelectedRow von GridView markiert.

Fügen Sie zunächst der Seite im Filtering Ordner ein GridView-Steuerelement DetailsBySelecting.aspx hinzu, und legen Sie dessen ID Eigenschaft auf festProductsGrid. Fügen Sie als Nächstes eine neue ObjectDataSource mit dem Namen hinzu AllProductsDataSource , die die Methode der ProductsBLL Klasse GetProducts() aufruft.

Erstellen einer ObjectDataSource mit dem Namen AllProductsDataSource

Abbildung 2: Erstellen eines ObjectDataSource-Namens AllProductsDataSource (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Verwenden der ProductsBLL-Klasse

Abbildung 3: Verwenden der ProductsBLL -Klasse (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Konfigurieren der ObjectDataSource zum Aufrufen der GetProducts()-Methode

Abbildung 4: Konfigurieren der ObjectDataSource zum Aufrufen der GetProducts() -Methode (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Bearbeiten Sie die Felder von GridView, wobei alle außer boundFields ProductName und UnitPrice entfernt werden. Außerdem können Sie diese BoundFields nach Bedarf anpassen, z. B. das Formatieren des UnitPrice BoundField als Währung und das Ändern der HeaderText Eigenschaften von BoundFields. Diese Schritte können grafisch ausgeführt werden, indem Sie im Smarttag des GridView-Smarttags auf den Link Spalten bearbeiten klicken oder die deklarative Syntax manuell konfigurieren.

Alle Außer productName und UnitPrice BoundFields entfernen

Abbildung 5: Entfernen von "Alle außer den ProductName BoundFields" und UnitPrice "BoundFields" (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Das endgültige Markup für die GridView lautet:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Als Nächstes müssen wir die GridView als auswählbar markieren, wodurch jeder Zeile eine Schaltfläche Auswählen hinzugefügt wird. Aktivieren Sie dazu einfach das Kontrollkästchen Auswahl aktivieren im Smarttag von GridView.

Auswählen der GridView-Zeilen

Abbildung 6: Festlegen der Auswahl der Zeilen der GridView (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Durch Aktivieren der Option Auswahl aktivieren wird der ProductsGrid GridView ein CommandField hinzugefügt, dessen ShowSelectButton Eigenschaft auf True festgelegt ist. Dies führt zu einer Schaltfläche Auswählen für jede Zeile der GridView, wie Abbildung 6 veranschaulicht. Standardmäßig werden die Select-Schaltflächen als LinkButtons gerendert. Sie können stattdessen Schaltflächen oder ImageButtons über die CommandField-Eigenschaft ButtonType verwenden.

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Wenn auf die Schaltfläche Auswählen einer GridView-Zeile geklickt wird, erfolgt ein Postback, und die GridView-Eigenschaft SelectedRow wird aktualisiert. Zusätzlich zur SelectedRow -Eigenschaft stellt GridView die Eigenschaften SelectedIndex, SelectedValue und SelectedDataKey bereit. Die SelectedIndex -Eigenschaft gibt den Index der ausgewählten Zeile zurück, während die SelectedValue Eigenschaften und SelectedDataKey Werte basierend auf der DataKeyNames-Eigenschaft von GridView zurückgeben.

Die DataKeyNames -Eigenschaft wird verwendet, um jeder Zeile einen oder mehrere Datenfeldwerte zuzuordnen und wird häufig verwendet, um jeder GridView-Zeile eindeutig identifizierende Informationen aus den zugrunde liegenden Daten zuzuordnen. Die SelectedValue -Eigenschaft gibt den Wert des ersten DataKeyNames Datenfelds DataKey für die ausgewählte Zeile zurück, wobei die SelectedDataKey -Eigenschaft das Objekt der ausgewählten Zeile zurückgibt, das alle Werte für die angegebenen Datenschlüsselfelder für diese Zeile enthält.

Die DataKeyNames -Eigenschaft wird automatisch auf die eindeutig identifizierenden Datenfelder festgelegt, wenn Sie eine Datenquelle über die Designer an eine GridView-, DetailsView- oder FormView-Instanz binden. Obwohl diese Eigenschaft für uns in den vorherigen Tutorials automatisch festgelegt wurde, hätten die Beispiele ohne die DataKeyNames angegebene Eigenschaft funktioniert. Für die auswählbare GridView in diesem Tutorial sowie für zukünftige Tutorials, in denen wir das Einfügen, Aktualisieren und Löschen untersuchen, muss die DataKeyNames Eigenschaft jedoch ordnungsgemäß festgelegt werden. Nehmen Sie sich einen Moment Zeit, um sicherzustellen, dass die Eigenschaft Ihrer GridView DataKeyNames auf ProductIDfestgelegt ist.

Sehen Wir uns unseren bisherigen Fortschritt über einen Browser an. Beachten Sie, dass die GridView den Namen und den Preis für alle Produkte zusammen mit einem LinkButton auswählen auflistet. Durch Klicken auf die Schaltfläche Auswählen wird ein Postback verursacht. In Schritt 2 erfahren Sie, wie eine DetailsView auf dieses Postback reagiert, indem die Details für das ausgewählte Produkt angezeigt werden.

Jede Produktzeile enthält ein Select LinkButton

Abbildung 7: Jede Produktzeile enthält einen Link auswählenButton (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Markieren der ausgewählten Zeile

GridView ProductsGrid verfügt über eine SelectedRowStyle Eigenschaft, die verwendet werden kann, um den visuellen Stil für die ausgewählte Zeile zu diktieren. Richtig verwendet, kann dies die Benutzerfreundlichkeit verbessern, indem deutlicher angezeigt wird, welche Zeile der GridView derzeit ausgewählt ist. In diesem Tutorial können Sie die ausgewählte Zeile mit einem gelben Hintergrund hervorheben.

Wie in unseren früheren Tutorials streben wir an, die ästhetischen Einstellungen beizubehalten, die als CSS-Klassen definiert sind. Erstellen Sie daher eine neue CSS-Klasse mit Styles.css dem Namen SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Um diese CSS-Klasse auf die SelectedRowStyle Eigenschaft aller GridViews in unserer Tutorialreihe anzuwenden, bearbeiten Sie die GridView.skin Skin im DataWebControls Design, um die SelectedRowStyle Einstellungen wie unten dargestellt einzuschließen:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Mit dieser Ergänzung wird die ausgewählte GridView-Zeile jetzt mit einer gelben Hintergrundfarbe hervorgehoben.

Anpassen der Darstellung der ausgewählten Zeile mithilfe der SelectedRowStyle-Eigenschaft von GridView

Abbildung 8: Anpassen der Darstellung der ausgewählten Zeile mithilfe der GridView-Eigenschaft SelectedRowStyle (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Schritt 2: Anzeigen der Details des ausgewählten Produkts in einer Detailansicht

Wenn gridView ProductsGrid abgeschlossen ist, müssen Sie nur noch eine DetailsView hinzufügen, die Informationen zu dem ausgewählten Produkt anzeigt. Fügen Sie ein DetailsView-Steuerelement über gridView hinzu, und erstellen Sie eine neue ObjectDataSource mit dem Namen ProductDetailsDataSource. Da in dieser DetailsView bestimmte Informationen zum ausgewählten Produkt angezeigt werden sollen, konfigurieren Sie für die ProductDetailsDataSource Verwendung der -Methode der ProductsBLL -Klasse GetProductByProductID(productID) .

Aufrufen der Methode GetProductByProductID(productID) der ProductsBLL-Klasse

Abbildung 9: Aufrufen der Methode der ProductsBLL Klasse GetProductByProductID(productID) (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Lassen Sie den productID Wert des Parameters aus der Eigenschaft des GridView-Steuerelements SelectedValue abrufen. Wie bereits erläutert, gibt die GridView-Eigenschaft SelectedValue den ersten Datenschlüsselwert für die ausgewählte Zeile zurück. Daher ist es zwingend erforderlich, dass die GridView-Eigenschaft DataKeyNames auf ProductIDfestgelegt ist, damit der Wert der ausgewählten Zeile ProductID von SelectedValuezurückgegeben wird.

Legen Sie den productID-Parameter auf die SelectedValue-Eigenschaft von GridView fest.

Abbildung 10: Legen Sie den productID Parameter auf die GridView-Eigenschaft SelectedValue fest (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Sobald die productDetailsDataSource ObjectDataSource ordnungsgemäß konfiguriert und an die DetailsView gebunden wurde, ist dieses Tutorial abgeschlossen! Wenn die Seite zum ersten Mal besucht wird, wird keine Zeile ausgewählt, sodass die GridView-Eigenschaft SelectedValue zurückgibt null. Da es keine Produkte mit einem NULLProductID Wert gibt, werden von der GetProductByProductID(productID) -Methode keine Datensätze zurückgegeben, was bedeutet, dass die DetailsView nicht angezeigt wird (siehe Abbildung 11). Wenn Sie auf die Schaltfläche Auswählen einer GridView-Zeile klicken, folgt ein Postback, und die DetailsView wird aktualisiert. Dieses Mal gibt die GridView-Eigenschaft SelectedValue die ProductID der ausgewählten Zeile zurück, die GetProductByProductID(productID) -Methode gibt eine ProductsDataTable mit Informationen zu diesem bestimmten Produkt zurück, und die DetailsView zeigt diese Details an (siehe Abbildung 12).

Beim ersten Besuch wird nur die GridView angezeigt.

Abbildung 11: Beim ersten Besuch wird nur die GridView angezeigt (Klicken Sie, um das bild in voller Größe anzuzeigen)

Beim Auswählen einer Zeile werden die Produktdetails angezeigt.

Abbildung 12: Beim Auswählen einer Zeile werden die Produktdetails angezeigt (Klicken Sie, um das Bild in voller Größe anzuzeigen).

Zusammenfassung

In diesem und den drei vorherigen Tutorials haben wir eine Reihe von Techniken zum Anzeigen von master-/Detailberichten gesehen. In diesem Tutorial haben wir die Verwendung eines auswählbaren GridView-Steuerelements zum Aufnehmen der master Datensätze und einer DetailsView untersucht, um Details zum ausgewählten master Datensatz auf derselben Seite anzuzeigen. In den vorherigen Tutorials haben wir uns mit der Anzeige von master-/Detailberichten mithilfe von DropDownLists und dem Anzeigen master Datensätzen auf einer Webseite und detailierten Datensätzen auf einer anderen Seite befasst.

Dieses Tutorial schließt unsere Untersuchung von master/Detailberichten ab. Ab dem nächsten Tutorial beginnen wir mit der Untersuchung der benutzerdefinierten Formatierung mit GridView, DetailsView und FormView. Wir erfahren, wie Sie die Darstellung dieser Steuerelemente basierend auf den an sie gebundenen Daten anpassen, wie Daten in der Fußzeile von GridView zusammengefasst werden und wie Sie Vorlagen verwenden, um ein größeres Maß an Kontrolle über das Layout zu erhalten.

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.

Besonderen Dank an

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

ZurückWeiter