Samenvattingsgegevens weergeven in de voettekst van GridView (C#)

Samenvattingsgegevens worden vaak onder aan het rapport weergegeven in een samenvattingsrij. Het GridView-besturingselement kan een voettekstrij bevatten waarbij we geaggregeerde gegevens in de cellen kunnen injecteren. In deze handleiding gaan we bekijken hoe u geaggregeerde gegevens in deze voettekstrij kunt weergeven.

Introductie

Naast het zien van de prijzen van elk van de producten, eenheden op voorraad, eenheden op bestelling en herschikkingsniveaus, kan een gebruiker ook geïnteresseerd zijn in geaggregeerde informatie, zoals de gemiddelde prijs, het totale aantal eenheden op voorraad, enzovoort. Dergelijke samenvattingsgegevens worden vaak onder aan het rapport weergegeven in een samenvattingsrij. Het GridView-besturingselement kan een voettekstrij bevatten waarbij we geaggregeerde gegevens in de cellen kunnen injecteren.

Deze taak biedt ons drie uitdagingen:

De GridView configureren om de voettekstrij weer te geven
De samenvattingsgegevens bepalen; Dat wil zeggen, hoe berekenen we de gemiddelde prijs of het totaal van de eenheden op voorraad?
Het plaatsen van de samenvattingsgegevens in de juiste cellen van de voettekstrij

In deze zelfstudie zien we hoe u deze uitdagingen kunt overwinnen. We maken met name een pagina met de categorieën in een vervolgkeuzelijst met de producten van de geselecteerde categorie die worden weergegeven in een GridView. De GridView bevat een voettekstrij met de gemiddelde prijs en het totale aantal eenheden op voorraad en op bestelling voor producten in die categorie.

Afbeelding 1: Samenvattingsinformatie wordt weergegeven in de voettekstrij van GridView (klik om de volledige afbeelding weer te geven)

Deze zelfstudie, met de bijbehorende categorie voor de hoofd-/detailinterface van producten, is gebaseerd op de concepten die worden behandeld in de eerdere zelfstudie Master/Detail Filtering met een DropDownList-zelfstudie . Als u nog niet aan de eerdere zelfstudie hebt gewerkt, doet u dit voordat u verdergaat met deze zelfstudie.

Stap 1: De categorieën DropDownList en Products GridView toevoegen

Voordat we ons bezighouden met het toevoegen van samenvattingsinformatie in de voettekst van de GridView, laten we eerst het hoofd/detailrapport opstellen. Zodra we deze eerste stap hebben voltooid, bekijken we hoe we samenvattingsgegevens kunnen opnemen.

Open eerst de SummaryDataInFooter.aspx pagina in de CustomFormatting map. Voeg een DropDownList-besturingselement toe en stel zijn ID in op Categories. Klik vervolgens op de koppeling Gegevensbron kiezen in de smarttag van de DropDownList en kies ervoor om een nieuwe ObjectDataSource toe te voegen met de naam CategoriesDataSource die de methode van CategoriesBLL de GetCategories() klasse aanroept.

Afbeelding 2: Een nieuwe ObjectDataSource met de naam CategoriesDataSource toevoegen (klik om de afbeelding op volledige grootte weer te geven)

Afbeelding 3: Laat de ObjectDataSource de methode van CategoriesBLL de GetCategories() klasse aanroepen (klik om de afbeelding op volledige grootte weer te geven)

Nadat de ObjectDataSource is geconfigureerd, retourneert de wizard ons naar de wizard Gegevensbronconfiguratie van vervolgkeuzelijst waaruit we moeten opgeven welke gegevensveldwaarde moet worden weergegeven en welke moet overeenkomen met de waarde van de vervolgkeuzelijst ListItem . Laat het CategoryName veld weergeven en de CategoryID waarde gebruiken.

Afbeelding 4: Gebruik de CategoryName velden CategoryID als respectievelijk de Text en Value voor de ListItem s (klik om de afbeelding op volledige grootte weer te geven)

Op dit moment hebben we een vervolgkeuzelijst (Categories) waarin de categorieën in het systeem worden vermeld. We moeten nu een GridView toevoegen waarin de producten worden vermeld die deel uitmaken van de geselecteerde categorie. Neem even de tijd om het selectievakje 'AutoPostBack inschakelen' in de smart tag van de DropDownList aan te vinken. Zoals besproken in de zelfstudie Master/Detail Filtering met een DropDownList, zal de pagina opnieuw worden geladen telkens wanneer de eigenschap van DropDownList AutoPostBack wordt ingesteld op true en de waarde van de DropDownList wordt gewijzigd. Dit zorgt ervoor dat de GridView wordt vernieuwd, waarbij deze producten voor de zojuist geselecteerde categorie worden weergegeven. Als de AutoPostBack eigenschap is ingesteld op false (de standaardinstelling), veroorzaakt het wijzigen van de categorie geen terugpost en worden de vermelde producten daarom niet bijgewerkt.

Afbeelding 5: Schakel het selectievakje AutoPostBack inschakelen in de smarttag van de vervolgkeuzelijst in (klik om de volledige afbeelding weer te geven)

Voeg een GridView-besturingselement toe aan de pagina om de producten voor de geselecteerde categorie weer te geven. Stel de ID van de GridView in op ProductsInCategory en verbind deze met een nieuwe ObjectDataSource genaamd ProductsInCategoryDataSource.

Afbeelding 6: Een nieuwe ObjectDataSource met de naam ProductsInCategoryDataSource Toevoegen (klik om de volledige afbeelding weer te geven)

Configureer de ObjectDataSource zodat deze de methode ProductsBLL van de klasse GetProductsByCategoryID(categoryID) aanroept.

Afbeelding 7: Laat objectdatasource de GetProductsByCategoryID(categoryID) methode aanroepen (klik om de afbeelding op volledige grootte weer te geven)

Omdat de GetProductsByCategoryID(categoryID) methode een invoerparameter inneemt, kunnen we in de laatste stap van de wizard de bron van de parameterwaarde opgeven. Als u deze producten uit de geselecteerde categorie wilt weergeven, moet u de parameter ophalen uit de Categories vervolgkeuzelijst.

Afbeelding 8: De categoryID parameterwaarde ophalen uit de vervolgkeuzelijst Geselecteerde categorieën (klik hier om de volledige afbeelding weer te geven)

Na het voltooien van de wizard heeft GridView een BoundField voor elk van de producteigenschappen. We gaan deze BoundFields opschonen, zodat alleen de ProductName, UnitPriceen UnitsInStockUnitsOnOrder BoundFields worden weergegeven. U kunt instellingen op veldniveau toevoegen aan de resterende BoundFields (zoals het opmaken van de UnitPrice als valuta). Nadat u deze wijzigingen hebt aangebracht, moet de declaratieve markering van GridView er ongeveer als volgt uitzien:

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

Op dit moment hebben we een volledig functionerend hoofd-/detailrapport waarin de naam, eenheidsprijs, voorraadeenheden en eenheden op bestelling worden weergegeven voor die producten die tot de geselecteerde categorie behoren.

Afbeelding 9: De categoryID parameterwaarde ophalen uit de vervolgkeuzelijst Geselecteerde categorieën (klik hier om de volledige afbeelding weer te geven)

Het besturingselement GridView kan zowel een kop- als voettekstrij weergeven. Deze rijen worden weergegeven afhankelijk van de waarden van de eigenschappen ShowHeader en ShowFooter, waarbij ShowHeader standaard op true staat en ShowFooter op false. Als u een voettekst in de GridView wilt opnemen, stelt u de ShowFooter eigenschap ervan in op true.

Afbeelding 10: Stel de eigenschap van GridView ShowFooter in op true (klik om de afbeelding op volledige grootte weer te geven)

De voettekstrij bevat een cel voor elk van de velden die zijn gedefinieerd in de GridView; deze cellen zijn echter standaard leeg. Neem even de tijd om onze voortgang in een browser weer te geven. Nu de ShowFooter eigenschap is ingesteld op true, bevat GridView een lege voettekstrij.

Afbeelding 11: De Rasterweergave bevat nu een voettekstrij (klik hier om de volledige afbeelding weer te geven)

De voettekstrij in afbeelding 11 onderscheidt zich niet, omdat deze een witte achtergrond heeft. Laten we een FooterStyle CSS-klasse maken die een donkerrode achtergrond specificeert en vervolgens het Styles.css Skin-bestand in de GridView.skin Thema configureren om deze CSS-klasse toe te wijzen aan de eigenschap DataWebControls van de FooterStyle GridView. Als u uw kennis over Skins en Thema's wilt opfrissen, kunt u de tutorial Weergave van gegevens met de ObjectDataSource raadplegen.

Voeg eerst de volgende CSS-klasse toe aan Styles.css:

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

De FooterStyle CSS-klasse is vergelijkbaar met de HeaderStyle klasse, hoewel de achtergrondkleur subtiel donkerder is en de HeaderStyletekst wordt weergegeven in een vet lettertype. Bovendien is de tekst in de voettekst rechts uitgelijnd, terwijl de tekst in de koptekst gecentreerd is.

Als u deze CSS-klasse vervolgens wilt koppelen aan elke voettekst van iedere GridView, opent u het GridView.skin bestand in het DataWebControls thema en stelt u de eigenschap FooterStyle van CssClass in. Na deze toevoeging moet de opmaak van het bestand er als volgt uitzien:

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

Zoals in de onderstaande schermafbeelding wordt weergegeven, zorgt deze wijziging ervoor dat de voettekst meer opvalt.

Afbeelding 12: De voettekstrij van GridView heeft nu een roodachtige achtergrondkleur (klik om de volledige afbeelding weer te geven)

Stap 3: De samenvattingsgegevens berekenen

Nu de voettekst van GridView wordt weergegeven, is de volgende uitdaging waarmee we te maken hebben de samenvattingsgegevens te berekenen. Er zijn twee manieren om deze geaggregeerde informatie te berekenen:

Via een SQL-query kunnen we een extra query aan de database uitgeven om de samenvattingsgegevens voor een bepaalde categorie te berekenen. SQL bevat een aantal statistische functies, samen met een GROUP BY component om de gegevens op te geven waarvan de gegevens moeten worden samengevat. De volgende SQL-query brengt de benodigde informatie terug:
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
Natuurlijk wilt u deze query niet rechtstreeks vanaf de SummaryDataInFooter.aspx pagina uitgeven, maar in plaats daarvan door een methode te maken in de ProductsTableAdapter en de ProductsBLL.
Bereken deze informatie terwijl deze wordt toegevoegd aan de GridView zoals besproken in de zelfstudie Aangepaste opmaak op basis van gegevens. De gebeurtenis-handler van de GridView RowDataBound wordt één keer geactiveerd voor elke rij die aan de GridView wordt toegevoegd nadat de gegevens zijn verbonden. Door een gebeurtenis-handler voor deze gebeurtenis te maken, kunnen we het totaal van de waarden die we willen aggregeren behouden. Nadat de laatste gegevensrij is gebonden aan de GridView, hebben we de totalen en de informatie die nodig is om het gemiddelde te berekenen.

Normaal gesproken gebruik ik de tweede benadering omdat daarmee een trip naar de database en de inspanning voor het implementeren van de samenvattingsfunctionaliteit in de Data Access Layer en Business Logic Layer wordt bespaard, maar beide benaderingen zouden volstaan. Voor deze zelfstudie gebruiken we de tweede optie en houden we het totaal bij met behulp van de RowDataBound eventhandler.

Maak een RowDataBound gebeurtenis-handler voor GridView door de GridView in de ontwerpfunctie te selecteren, op het bliksemschichtpictogram in het venster Eigenschappen te klikken en op de RowDataBound gebeurtenis te dubbelklikken. Hiermee maakt u een nieuwe gebeurtenis-handler met de naam ProductsInCategory_RowDataBound in de code-behind-klasse van de SummaryDataInFooter.aspx pagina.

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

Om een voorlopig totaal te behouden, moeten we variabelen definiëren buiten het bereik van de gebeurtenis-handler. Maak de volgende vier variabelen op paginaniveau:

_totalUnitPrice, van het type decimal
_totalNonNullUnitPriceCount, van het type int
_totalUnitsInStock, van het type int
_totalUnitsOnOrder, van het type int

Schrijf vervolgens de code om deze drie variabelen te verhogen voor elke gegevensrij die in de RowDataBound gebeurtenis-handler is aangetroffen.

// 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;
    }
}

De RowDataBound event-handler begint door ervoor te zorgen dat we werken met een DataRow. Zodra dat is vastgesteld, wordt het Northwind.ProductsRow exemplaar dat net is gebonden aan het GridViewRow object in e.Row de variabele productopgeslagen. Vervolgens worden lopende totaalvariabelen verhoogd met de overeenkomende waarden van het huidige product, ervan uitgaande dat er geen databasewaarde NULL in zit. We houden zowel het lopende UnitPrice totaal als het aantal records zonder NULLUnitPrice bij omdat de gemiddelde prijs het quotiënt is van deze twee getallen.

Stap 4: De samenvattingsgegevens weergeven in de voettekst

Wanneer de samenvattingsgegevens zijn opgeteld, is de laatste stap om deze weer te geven in de voettekstrij van de GridView. Deze taak kan ook programmatisch worden uitgevoerd via de RowDataBound gebeurtenis-handler. Zoals u weet, wordt de RowDataBound gebeurtenis-handler geactiveerd voor elke rij die is gebonden aan GridView, inclusief de voettekstrij. Daarom kunnen we onze gebeurtenis-handler uitbreiden om de gegevens in de voettekstrij weer te geven met behulp van de volgende code:

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

Omdat de voettekstrij aan de GridView wordt toegevoegd nadat alle gegevensrijen zijn toegevoegd, kunnen we er zeker van zijn dat tegen de tijd dat we de samenvattingsgegevens in de voettekst willen tonen, de lopende totaalberekeningen zijn voltooid. De laatste stap is het instellen van deze waarden in de cellen van de voettekst.

Als u tekst in een bepaalde voettekstcel wilt weergeven, gebruikt e.Row.Cells[index].Text = valueu , waarbij de Cells indexering begint bij 0. De volgende code berekent de gemiddelde prijs (de totale prijs gedeeld door het aantal producten) en geeft deze weer, samen met het totale aantal eenheden in voorraad en eenheden op volgorde in de juiste voettekstcellen van de GridView.

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();
    }
}

In afbeelding 13 ziet u het rapport nadat deze code is toegevoegd. Let op hoe de ToString("c") ervoor zorgt dat de gemiddelde prijssamenvatting wordt opgemaakt in valutaformaat.

Afbeelding 13: De voettekstrij van GridView heeft nu een roodachtige achtergrondkleur (klik om de volledige afbeelding weer te geven)

Samenvatting

Het weergeven van samenvattingsgegevens is een algemene rapportvereiste en met het besturingselement GridView kunt u deze informatie eenvoudig opnemen in de voettekstrij. De voettekstrij wordt weergegeven wanneer de eigenschap van GridView ShowFooter is ingesteld op true en de tekst in de cellen programmatisch kan worden ingesteld via de RowDataBound evenementenbeheerder. Het berekenen van de samenvattingsgegevens kan worden uitgevoerd door de database opnieuw op te vragen of door code te gebruiken in de code-achterklasse van de ASP.NET pagina om de samenvattingsgegevens programmatisch te berekenen.

In deze handleiding wordt onze bespreking van aangepaste opmaak afgesloten met de besturingselementen GridView, DetailsView en FormView. Onze volgende zelfstudie begint met het verkennen van het invoegen, bijwerken en verwijderen van gegevens met behulp van dezelfde besturingselementen.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Vorige Volgende

Feedback

Is deze pagina nuttig?

Last updated on 2025-04-30