Anzeigen von Zusammenfassungsinformationen im GridView-Fuß (C#)

Artikel
07/13/2023

Zusammenfassungsinformationen werden häufig am unteren Rand des Berichts in einer Zusammenfassungszeile angezeigt. Das GridView-Steuerelement kann eine Fußzeile enthalten, in deren Zellen wir Aggregatdaten programmgesteuert einfügen können. In diesem Tutorial erfahren Sie, wie Sie aggregierte Daten in dieser Fußzeile anzeigen.

Einführung

Neben den Preisen der einzelnen Produkte, lagerinternen Einheiten, Einheiten auf Bestellung und Nachbestellungsstufen kann ein Benutzer auch an aggregierten Informationen interessiert sein, z. B. den Durchschnittspreis, die Gesamtzahl der vorrätig verfügbaren Einheiten usw. Solche Zusammenfassungsinformationen werden häufig am unteren Rand des Berichts in einer Zusammenfassungszeile angezeigt. Das GridView-Steuerelement kann eine Fußzeile enthalten, in deren Zellen wir Aggregatdaten programmgesteuert einfügen können.

Diese Aufgabe stellt uns vor drei Herausforderungen:

Konfigurieren der GridView für die Anzeige der Fußzeile
Bestimmen der Zusammenfassungsdaten; Das heißt, wie berechnen wir den Durchschnittspreis oder die Gesamtsumme der vorrätig verfügbaren Einheiten?
Einfügen der Zusammenfassungsdaten in die entsprechenden Zellen der Fußzeile

In diesem Tutorial erfahren Sie, wie Sie diese Herausforderungen meistern können. Insbesondere erstellen wir eine Seite, auf der die Kategorien in einer Dropdownliste mit den Produkten der ausgewählten Kategorie in einer GridView angezeigt werden. Die GridView enthält eine Fußzeile, die den Durchschnittspreis und die Gesamtanzahl der vorrätig und nach Bestellung für Produkte in dieser Kategorie anzeigt.

Abbildung 1: Zusammenfassungsinformationen werden in der Fußzeile von GridView angezeigt (klicken, um das Bild in voller Größe anzuzeigen)

Dieses Tutorial mit seiner Kategorie für Produkte master/Detailschnittstelle baut auf den Konzepten auf, die im vorherigen Tutorial master/detail filtering with a DropDownList behandelt wurden. Wenn Sie das vorherige Tutorial noch nicht durchgearbeitet haben, tun Sie dies, bevor Sie mit diesem Tutorial fortfahren.

Schritt 1: Hinzufügen der Kategorien DropDownList und Products GridView

Bevor wir uns mit dem Hinzufügen von Zusammenfassenden Informationen zur Fußzeile von GridView in Verbindung setzen, erstellen wir zunächst einfach den master-/Detailbericht. Nachdem wir diesen ersten Schritt abgeschlossen haben, sehen wir uns an, wie Zusammenfassungsdaten eingeschlossen werden.

Öffnen Sie zunächst die SummaryDataInFooter.aspx Seite im CustomFormatting Ordner. Fügen Sie ein DropDownList-Steuerelement hinzu, und legen Sie es ID auf fest Categories. Klicken Sie als Nächstes im Smarttag der DropDownList auf den Link Datenquelle auswählen, und fügen Sie eine neue ObjectDataSource mit dem Namen hinzu CategoriesDataSource , die die Methode der CategoriesBLL Klasse GetCategories() aufruft.

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

Abbildung 3: Lassen Sie die ObjectDataSource die Methode der CategoriesBLL Klasse GetCategories() aufrufen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Nach dem Konfigurieren der ObjectDataSource kehrt der Assistent zum Assistenten für die Datenquellenkonfiguration von DropDownList zurück, in dem wir angeben müssen, welcher Datenfeldwert angezeigt werden soll und welcher dem Wert der DropDownList ListItem entsprechen soll. Lassen Sie das CategoryName Feld angezeigt werden, und verwenden Sie den CategoryID als Wert.

Abbildung 4: Verwenden Sie die CategoryName Felder und CategoryID als Text und Value für die ListItem entsprechenden Felder (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

An diesem Punkt verfügen wir über eine DropDownList (Categories), die die Kategorien im System auflistet. Wir müssen jetzt eine GridView hinzufügen, die die Produkte auflistet, die zur ausgewählten Kategorie gehören. Bevor sie dies tun, sollten Sie sich jedoch einen Moment Zeit nehmen, um das Kontrollkästchen AutoPostBack aktivieren im Smarttag der DropDownList zu aktivieren. Wie im Tutorial Master-/Detailfilterung mit einer DropDownList erläutert, wird jedes Mal, wenn der DropDownList-Wert geändert wird, durch Festlegen der DropDownList-Eigenschaft AutoPostBack auf true die Seite zurückgestellt. Dadurch wird die GridView aktualisiert, die diese Produkte für die neu ausgewählte Kategorie anzeigt. Wenn die AutoPostBack Eigenschaft auf (Standard) festgelegt ist, führt das Ändern der Kategorie nicht zu false einem Postback und wird daher die aufgeführten Produkte nicht aktualisiert.

Abbildung 5: Aktivieren Sie das Kontrollkästchen AutoPostBack aktivieren im Smarttag der DropDownList (Klicken Sie, um das bild in voller Größe anzuzeigen)

Fügen Sie der Seite ein GridView-Steuerelement hinzu, um die Produkte für die ausgewählte Kategorie anzuzeigen. Legen Sie die GridView auf ID fest ProductsInCategory , und binden Sie sie an eine neue ObjectDataSource mit dem Namen ProductsInCategoryDataSource.

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

Konfigurieren Sie objectDataSource so, dass die Methode der ProductsBLL Klasse GetProductsByCategoryID(categoryID) aufgerufen wird.

Abbildung 7: Lassen Sie die ObjectDataSource die -Methode aufrufen (Klicken Sie, um dasGetProductsByCategoryID(categoryID) bild in voller Größe anzuzeigen)

Da die GetProductsByCategoryID(categoryID) Methode einen Eingabeparameter akzeptiert, können wir im letzten Schritt des Assistenten die Quelle des Parameterwerts angeben. Um diese Produkte aus der ausgewählten Kategorie anzuzeigen, lassen Sie den Parameter aus der Categories DropDownList ziehen.

Abbildung 8: Abrufen des categoryID Parameterwerts aus der Dropdownliste "Ausgewählte Kategorien" (Klicken Sie, um das bild in voller Größe anzuzeigen)

Nach Abschluss des Assistenten verfügt die GridView über ein BoundField für jede Produkteigenschaft. Lassen Sie uns diese BoundFields sauber, damit nur die ProductName, UnitPrice, , UnitsInStockund UnitsOnOrder BoundFields angezeigt werden. Sie können den verbleibenden BoundFields einstellungen auf Feldebene hinzufügen (z. B. formatieren des UnitPrice als Währung). Nach diesen Änderungen sollte das deklarative Markup von GridView wie folgt aussehen:

<asp:GridView ID="ProductsInCategory" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ProductsInCategoryDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
            HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsInStock"
         HeaderText="Units In Stock" SortExpression="UnitsInStock">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:BoundField DataField="UnitsOnOrder"
           HeaderText="Units On Order" SortExpression="UnitsOnOrder">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

An diesem Punkt verfügen wir über einen voll funktionsfähigen master/Detailbericht, der den Namen, den Einzelpreis, die auf Lager verfügbaren Einheiten und die Bestelleinheiten für die Produkte anzeigt, die zur ausgewählten Kategorie gehören.

Abbildung 9: Abrufen des categoryID Parameterwerts aus der Dropdownliste "Ausgewählte Kategorien" (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Das GridView-Steuerelement kann sowohl eine Kopf- als auch eine Fußzeile anzeigen. Diese Zeilen werden abhängig von den Werten der ShowHeader Eigenschaften und ShowFooter angezeigt, wobei ShowHeader standardmäßig true und ShowFooter auf falsefestgelegt ist. Wenn Sie eine Fußzeile in gridView einschließen möchten, legen Sie die ShowFooter -Eigenschaft einfach auf fest true.

Abbildung 10: Legen Sie die GridView-Eigenschaft ShowFooter auf fest true (Klicken Sie, um das bild in voller Größe anzuzeigen)

Die Fußzeile enthält eine Zelle für jedes der felder, die in gridView definiert sind. Diese Zellen sind jedoch standardmäßig leer. Nehmen Sie sich einen Moment Zeit, um unseren Fortschritt in einem Browser anzuzeigen. Wenn die ShowFooter Eigenschaft jetzt auf truefestgelegt ist, enthält gridView eine leere Fußzeile.

Abbildung 11: Die GridView enthält jetzt eine Fußzeile (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Die Fußzeile in Abbildung 11 ist nicht hervorzuheben, da sie einen weißen Hintergrund aufweist. Erstellen Wir eine FooterStyle CSS-Klasse inStyles.css, die einen dunkelroten Hintergrund angibt, und konfigurieren dann die GridView.skin Skin-Datei im DataWebControls Design, um diese CSS-Klasse der Eigenschaft von CssClass GridView FooterStylezuzuweisen. Wenn Sie Skins und Designs auffrischen müssen, lesen Sie das Tutorial Anzeigen von Daten mit objectDataSource .

Fügen Sie zunächst die folgende CSS-Klasse hinzu Styles.css:

.FooterStyle
{
    background-color: #a33;
    color: White;
    text-align: right;
}

Die FooterStyle CSS-Klasse ähnelt im Stil der HeaderStyle -Klasse, obwohl die HeaderStyleHintergrundfarbe der Klasse subtil dunkler ist und ihr Text in einer fetten Schriftart angezeigt wird. Darüber hinaus ist der Text in der Fußzeile rechtsbündig, während der Text der Kopfzeile zentriert ist.

Um diese CSS-Klasse jeder GridView-Fußzeile zuzuordnen, öffnen Sie die GridView.skin Datei im DataWebControls Design, und legen Sie die FooterStyleEigenschaft "s CssClass " fest. Nach dieser Ergänzung sollte das Markup der Datei wie folgt aussehen:

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

Wie der Screenshot unten zeigt, zeichnet sich die Fußzeile durch diese Änderung deutlicher aus.

Abbildung 12: Die Fußzeile von GridView verfügt jetzt über eine rötliche Hintergrundfarbe (klicken, um das bild in voller Größe anzuzeigen)

Schritt 3: Berechnen der Zusammenfassungsdaten

Da die Fußzeile von GridView angezeigt wird, besteht die nächste Herausforderung darin, die Zusammenfassungsdaten zu berechnen. Es gibt zwei Möglichkeiten, diese aggregierten Informationen zu berechnen:

Über eine SQL-Abfrage könnten wir eine zusätzliche Abfrage für die Datenbank ausstellen, um die Zusammenfassungsdaten für eine bestimmte Kategorie zu berechnen. SQL enthält eine Reihe von Aggregatfunktionen zusammen mit einer GROUP BY -Klausel, um die Daten anzugeben, für die die Daten zusammengefasst werden sollen. Die folgende SQL-Abfrage bringt die erforderlichen Informationen zurück:
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
Natürlich möchten Sie diese Abfrage nicht direkt über die SummaryDataInFooter.aspx Seite ausstellen, sondern stattdessen eine Methode in und ProductsTableAdapter erstellen ProductsBLL.
Berechnen Sie diese Informationen, während sie der GridView hinzugefügt werden, wie im Tutorial Benutzerdefinierte Formatierung basierend auf Daten beschrieben. Der GridView-Ereignishandler RowDataBound wird einmal für jede Zeile ausgelöst, die der GridView hinzugefügt wird, nachdem sie datengebunden wurde. Durch das Erstellen eines Ereignishandlers für dieses Ereignis können wir eine ausgeführte Summe der Werte beibehalten, die wir aggregieren möchten. Nachdem die letzte Datenzeile an die GridView gebunden wurde, verfügen wir über die Summen und die Informationen, die zum Berechnen des Durchschnitts erforderlich sind.

Ich beschäftige mich in der Regel mit dem zweiten Ansatz, da dadurch eine Reise in die Datenbank und der Aufwand für die Implementierung der Zusammenfassungsfunktionalität in der Datenzugriffsebene und der Geschäftslogikebene eingespart werden, aber jeder Ansatz würde ausreichen. In diesem Tutorial verwenden wir die zweite Option und verfolgen die Gesamtanzahl der Ausführung mithilfe des RowDataBound Ereignishandlers nach.

Erstellen Sie einen RowDataBound Ereignishandler für gridView, indem Sie im Designer die GridView auswählen, im Eigenschaftenfenster auf das Blitzsymbol klicken und auf das RowDataBound Ereignis doppelklicken. Dadurch wird ein neuer Ereignishandler mit dem Namen ProductsInCategory_RowDataBound in der CodeBehind-Klasse der SummaryDataInFooter.aspx Seite erstellt.

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
}

Um eine ausgeführte Gesamtzahl beizubehalten, müssen Variablen außerhalb des Bereichs des Ereignishandlers definiert werden. Erstellen Sie die folgenden vier Variablen auf Seitenebene:

_totalUnitPrice, vom Typ decimal
_totalNonNullUnitPriceCount, vom Typ int
_totalUnitsInStock, vom Typ int
_totalUnitsOnOrder, vom Typ int

Schreiben Sie als Nächstes den Code, um diese drei Variablen für jede Datenzeile im RowDataBound Ereignishandler inkrementieren.

// Class-scope, running total variables...
decimal _totalUnitPrice = 0m;
int _totalNonNullUnitPriceCount = 0;
int _totalUnitsInStock = 0;
int _totalUnitsOnOrder = 0;
protected void ProductsInCategory_RowDataBound(object sender,
  GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Reference the ProductsRow via the e.Row.DataItem property
        Northwind.ProductsRow product =
          (Northwind.ProductsRow)
          ((System.Data.DataRowView)e.Row.DataItem).Row;
        // Increment the running totals (if they are not NULL!)
        if (!product.IsUnitPriceNull())
        {
            _totalUnitPrice += product.UnitPrice;
            _totalNonNullUnitPriceCount++;
        }
        if (!product.IsUnitsInStockNull())
            _totalUnitsInStock += product.UnitsInStock;
        if (!product.IsUnitsOnOrderNull())
            _totalUnitsOnOrder += product.UnitsOnOrder;
    }
}

Der RowDataBound Ereignishandler stellt zunächst sicher, dass es sich um einen DataRow handelt. Sobald dies eingerichtet wurde, wird die Northwind.ProductsRow instance, die nur an das GridViewRow Objekt gebunden war, e.Row in der Variablen productgespeichert. Als Nächstes werden ausgeführte Gesamtvariablen um die entsprechenden Werte des aktuellen Produkts erhöht (vorausgesetzt, sie enthalten keinen Datenbankwert NULL ). Wir behalten sowohl die laufende UnitPrice Gesamtsumme als auch die Anzahl der Nicht-DatensätzeNULLUnitPrice im Auge, da der Durchschnittspreis der Quotient dieser beiden Zahlen ist.

Schritt 4: Anzeigen der Zusammenfassungsdaten in der Fußzeile

Nach dem Summieren der Zusammenfassungsdaten besteht der letzte Schritt darin, sie in der Fußzeile von GridView anzuzeigen. Auch diese Aufgabe kann programmgesteuert über den RowDataBound Ereignishandler ausgeführt werden. Denken Sie daran, dass der RowDataBound Ereignishandler für jede Zeile ausgelöst wird, die an gridView gebunden ist, einschließlich der Fußzeile. Daher können wir unseren Ereignishandler erweitern, um die Daten in der Fußzeile mit dem folgenden Code anzuzeigen:

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      ... Increment the running totals ...
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
      ... Display the summary data in the footer ...
    }
}

Da die Fußzeile der GridView hinzugefügt wird, nachdem alle Datenzeilen hinzugefügt wurden, können wir sicher sein, dass die ausgeführten Gesamtberechnungen abgeschlossen sind, sobald wir bereit sind, die Zusammenfassungsdaten in der Fußzeile anzuzeigen. Der letzte Schritt besteht dann darin, diese Werte in den Fußzeilenzellen festzulegen.

Um Text in einer bestimmten Fußzeile anzuzeigen, verwenden Sie e.Row.Cells[index].Text = value, wobei die Cells Indizierung bei 0 beginnt. Der folgende Code berechnet den Durchschnittspreis (der Gesamtpreis dividiert durch die Anzahl der Produkte) und zeigt ihn zusammen mit der Gesamtanzahl der Einheiten auf Lager und einheiten auf Bestellung in den entsprechenden Fußzeilenzellen der GridView an.

protected void ProductsInCategory_RowDataBound
    (object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      ... <i>Increment the running totals</i> ...
    }
    else if (e.Row.RowType == DataControlRowType.Footer)
    {
      // Determine the average UnitPrice
      decimal avgUnitPrice = _totalUnitPrice / (decimal) _totalNonNullUnitPriceCount;
      // Display the summary data in the appropriate cells
      e.Row.Cells[1].Text = "Avg.: " + avgUnitPrice.ToString("c");
      e.Row.Cells[2].Text = "Total: " + _totalUnitsInStock.ToString();
      e.Row.Cells[3].Text = "Total: " + _totalUnitsOnOrder.ToString();
    }
}

Abbildung 13 zeigt den Bericht, nachdem dieser Code hinzugefügt wurde. Beachten Sie, wie die ToString("c") durchschnittlichen Preiszusammenfassungsinformationen wie eine Währung formatiert werden.

Abbildung 13: Die Fußzeile von GridView weist jetzt eine rötliche Hintergrundfarbe auf (klicken, um das bild in voller Größe anzuzeigen)

Zusammenfassung

Das Anzeigen von Zusammenfassungsdaten ist eine häufige Berichtsanforderung, und das GridView-Steuerelement erleichtert das Einschließen solcher Informationen in die Fußzeile. Die Fußzeile wird angezeigt, wenn die GridView-Eigenschaft ShowFooter auf true festgelegt ist und den Text in den zugehörigen Zellen programmgesteuert über den RowDataBound Ereignishandler festlegen kann. Das Berechnen der Zusammenfassungsdaten kann entweder durch erneutes Abfragen der Datenbank oder mithilfe von Code in der Code-Behind-Klasse der ASP.NET Seite erfolgen, um die Zusammenfassungsdaten programmgesteuert zu berechnen.

Dieses Tutorial schließt unsere Untersuchung der benutzerdefinierten Formatierung mit den Steuerelementen GridView, DetailsView und FormView ab. Unser nächstes Tutorial beginnt mit der Untersuchung des Einfügens, Aktualisierens und Löschens von Daten mithilfe derselben Steuerelemente.

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.

Zurück Weiter

Share via