Összegzési információk megjelenítése a GridView láblécében (VB)

által Scott Mitchell

PDF letöltése

Az összefoglaló információk gyakran a jelentés alján jelennek meg egy összefoglaló sorban. A GridView vezérlő tartalmazhat egy láblécsor, amelynek celláiba programozással beilleszthetjük az összesítő adatokat. Ebben az oktatóanyagban megmutatjuk, hogyan jelenítheti meg az összesített adatokat ebben a lábléckeretben.

Bevezetés

Amellett, hogy az egyes termékek árait, a készletben lévő egységeket, a rendelési egységeket és az átrendezés szintjét is látni szeretné, a felhasználót az összesítő információk is érdekelhetik, például az átlagos ár, a készletben lévő egységek teljes száma stb. Az ilyen összefoglaló információk gyakran a jelentés alján jelennek meg egy összefoglaló sorban. A GridView vezérlő tartalmazhat egy láblécsor, amelynek celláiba programozással beilleszthetjük az összesítő adatokat.

Ez a feladat három kihívással szembesül:

1. A GridView konfigurálása a lábléc sorának megjelenítésére
2. Az összefoglaló adatok meghatározása; azaz hogyan számítjuk ki az átlagos árat vagy a készletben lévő egységek összegét?
3. Az összefoglaló adatok beillesztése az élőlábsor megfelelő celláiba

Ebben az oktatóanyagban bemutatjuk, hogyan lehet leküzdeni ezeket a kihívásokat. Pontosabban létrehozunk egy oldalt, amely egy legördülő listában listázza a kategóriákat, és a kiválasztott kategória termékei megjelennek egy GridView-ban. A GridView tartalmaz egy láblécsort, amely megjeleníti az átlagos árat és a készletben lévő egységek teljes számát, valamint az adott kategóriába tartozó termékek sorrendjét.

1. ábra: Az összefoglaló információk a GridView élőlábsorában jelennek meg (ide kattintva megtekintheti a teljes méretű képet)

Ez az oktatóanyag a termékek fő/részlet felületére vonatkozó kategóriájával a korábbi Master/Detail Filtering With a DropDownList oktatóanyagban ismertetett fogalmakra épül. Ha még nem dolgozott át a korábbi oktatóanyagon, ezt tegye meg, mielőtt folytatná ezt.

1. lépés: A Kategóriák legördülő lista és a Termékek GridView hozzáadása

Mielőtt a GridView láblécéhez összegző információkat adtunk hozzá, először egyszerűen készítsük el a fő/részlet jelentést. Az első lépés elvégzése után áttekintjük, hogyan lehet összegző adatokat belefoglalni.

Először nyissa meg a SummaryDataInFooter.aspx lapot a CustomFormatting mappában. Vegyen fel egy DropDownList vezérlőelemet, és állítsa be annak ID értékét Categories-re. Ezután kattintson az Adatforrás kiválasztása hivatkozásra a DropDownList intelligens címkéjén, és válasszon egy új ObjectDataSource-t CategoriesDataSource , amely meghívja az CategoriesBLL osztály metódusát GetCategories() .

2. ábra: Új ObjectDataSource név CategoriesDataSource hozzáadása (ide kattintva megtekintheti a teljes méretű képet)

3. ábra: Az ObjectDataSource meghívása az CategoriesBLL osztály metódusára GetCategories() (kattintson ide a teljes méretű kép megtekintéséhez)

Az ObjectDataSource konfigurálása után a varázsló visszaad minket a DropDownList Adatforráskonfiguráció varázslójának, amelyből meg kell adnunk, hogy milyen adatmező-érték jelenjen meg, és melyik feleljen meg a Legördülő lista ListItem értékének. Jelenítse meg a CategoryName mezőt, és használja a CategoryID mezőt értékként.

4. ábra: Használja a és CategoryName mezőket, mint CategoryID és Text a Value számára, ebben a sorrendben (ListItem)

Ezen a ponton van egy DropDownList (Categories), amely felsorolja a kategóriákat a rendszerben. Most hozzá kell adnunk egy GridView-t, amely felsorolja a kiválasztott kategóriába tartozó termékeket. Mielőtt azonban továbblépnénk, szánjon egy kis időt az AutoPostBack engedélyezése jelölőnégyzet ellenőrzésére a DropDownList intelligens címkéjében. Amint azt a DropDownList mester/részletszűrése című oktatóanyagban már tárgyaltuk, a DropDownList AutoPostBack tulajdonságának True beállításakor az oldal minden alkalommal újra betöltődik, amikor a DropDownList értéke megváltozik. Ez a GridView frissítését eredményezi, és megjeleníti az újonnan kiválasztott kategóriához tartozó termékeket. Ha a AutoPostBack tulajdonság False (az alapértelmezett) értéke van, a kategória módosítása nem okoz postbacket, ezért nem frissíti a felsorolt termékeket.

5. ábra: Ellenőrizze az AutoPostBack engedélyezése jelölőnégyzetet a Legördülő lista intelligens címkéjében (kattintson ide a teljes méretű kép megtekintéséhez)

Adjon hozzá egy GridView-vezérlőt a laphoz a kiválasztott kategória termékeinek megjelenítéséhez. Állítsa be a GridView ID-ját ProductsInCategory-re, és kösse egy új ProductsInCategoryDataSource nevű ObjectDataSource-hoz.

6. ábra: Új ObjectDataSource név ProductsInCategoryDataSource hozzáadása (ide kattintva megtekintheti a teljes méretű képet)

Konfigurálja az ObjectDataSource-t úgy, hogy meghívja az ProductsBLL osztály metódusát GetProductsByCategoryID(categoryID) .

7. ábra: Az ObjectDataSource meghívja a metódust GetProductsByCategoryID(categoryID) (kattintson ide a teljes méretű kép megtekintéséhez)

Mivel a GetProductsByCategoryID(categoryID) metódus egy bemeneti paramétert használ, a varázsló utolsó lépésében megadhatja a paraméter értékének forrását. A kiválasztott kategóriából származó termékek megjelenítéséhez a paramétert húzza ki a Categories legördülő listából.

8. ábra: A paraméter értékének categoryID lekérése a kijelölt kategóriák legördülő listából (kattintson ide a teljes méretű kép megtekintéséhez)

A varázsló befejezése után a GridView minden terméktulajdonsághoz egy BoundFieldet fog létrehozni. Tisztítsuk meg ezeket a BoundFieldeket, hogy csak a ProductName, UnitPrice, UnitsInStock és UnitsOnOrder BoundField jelenjen meg. Bármilyen mezőszintű beállítást hozzáadhat a többi BoundFields mezőhöz (például UnitPrice pénznemként formázhatja). A módosítások elvégzése után a GridView deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

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

Ezen a ponton van egy teljes körűen működő fő/részlet jelentésünk, amely a kiválasztott kategóriába tartozó termékek nevét, egységárát, készleten lévő egységét és egységeinek sorrendjét jeleníti meg.

9. ábra: A paraméterérték lekérése categoryID a kijelölt kategóriák legördülő listájából (ide kattintva megtekintheti a teljes méretű képet)

2. lépés: Lábjegyzet megjelenítése a rácsnézetben

A GridView vezérlő fejléce és lábléce is megjeleníthető. A sorok megjelenítése a ShowHeader és a ShowFooter tulajdonságok értékeitől függően történik, ahol a ShowHeader alapértelmezetten True, és a ShowFooter alapértelmezetten False. Ha egy láblécet szeretne belefoglalni a GridView-ba, egyszerűen állítsa a tulajdonságát ShowFooter a következőre True: .

10. ábra: Állítsa be a GridView tulajdonságát ShowFooterTrue (kattintson ide a teljes méretű kép megtekintéséhez)

Az élőláb sorában található egy cella a GridView-ban definiált mezők mindegyikéhez; ezek a cellák azonban alapértelmezés szerint üresek. Szánjon egy kis időt az előrehaladás megtekintésére egy böngészőben. Ha a ShowFooter tulajdonság most már be van állítva True, a GridView tartalmaz egy üres láblécsort.

11. ábra: A GridView most már tartalmaz egy élőlábsort (ide kattintva megtekintheti a teljes méretű képet)

A 11. ábrán szereplő láblécsor nem tűnik ki, mivel fehér háttérrel rendelkezik. Hozzunk létre egy FooterStyle CSS-osztályt Styles.css-ban, amely sötétvörös hátteret határoz meg, majd konfiguráljuk a GridView.skin Skin-fájlt a DataWebControls Témában úgy, hogy ezt a CSS-osztályt a GridView FooterStyle tulajdonságához rendeljük CssClass. Ha felfrissíteni szeretné az ismereteit a Skin-ekkel és a témákkal kapcsolatban, tekintse meg az Adatok megjelenítése az ObjectDataSource segítségével oktatóanyagot.

Először adja hozzá a következő CSS-osztályt a következőhöz Styles.css:

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

A FooterStyle CSS-osztály stílusban hasonló az HeaderStyle osztályhoz, bár a HeaderStyleháttér színe finomabb, a szöveg pedig félkövér betűtípussal jelenik meg. Ezenkívül a láblécben lévő szöveg jobbra igazított, míg a fejléc szövege középre igazított.

Ezután, ha ezt a CSS-osztályt minden GridView lábléchez szeretné társítani, nyissa meg a fájlt a GridView.skinDataWebControls Témában, és állítsa be a FooterStyle tulajdonságot CssClass. A hozzáadás után a fájl jelölőjének a következőképpen kell kinéznie:

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

Ahogy az alábbi képernyőfelvételen látható, ez a módosítás az élőlábat jobban kiemeli.

12. ábra: A GridView láblécsora vöröses háttérszínnel rendelkezik (kattintson ide a teljes méretű kép megtekintéséhez)

3. lépés: Az összefoglaló adatok számítása

A GridView láblécének megjelenítésével a következő kihívás számunkra az összefoglaló adatok kiszámítása. Az összesítő információk kiszámításának két módja van:

1. Egy SQL-lekérdezésen keresztül egy további lekérdezést adhatunk ki az adatbázisnak egy adott kategóriához tartozó összesítő adatok kiszámításához. Az SQL számos összesítő függvényt és egy záradékot GROUP BY tartalmaz az adatok összegzéséhez. A következő SQL-lekérdezés visszaadja a szükséges információkat:

   SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
   SUM(UnitsOnOrder)
   FROM Products
   WHERE CategoryID = categoryID
   GROUP BY CategoryID
   

   Természetesen nem közvetlenül a SummaryDataInFooter.aspx lapról szeretné kibocsátani ezt a lekérdezést, hanem egy metódust létrehozva a ProductsTableAdapter-ban és a ProductsBLL-ban.

2. Ezeket az információkat úgy számíthatja ki, hogy azokat hozzáadja a GridView-hoz az egyéni formázás az adatok alapján oktatóanyagban leírtak szerint. A GridView eseménykezelője RowDataBound az adatösszekapcsolás után minden egyes sornál aktiválódik, amelyet hozzáadnak a GridView-hoz. Ha létrehozunk egy eseménykezelőt az eseményhez, megtarthatjuk az összesíteni kívánt értékek futó összegét. Miután az utolsó adatsort a GridView-hoz kötöttük, az összegeket és az átlag kiszámításához szükséges információkat is meg fogjuk adni.

Általában a második megközelítést alkalmazom, mivel elkerülhetővé teszi az adatbázis elérését, valamint az adatelérési rétegben és az üzleti logikai rétegben lévő összegző funkciók implementálásához szükséges erőfeszítést, de bármelyik megközelítés megfelelne. Ebben az oktatóanyagban használjuk a második lehetőséget, és nyomon követjük a futó végösszeget az RowDataBound eseménykezelővel.

Hozzon létre egy eseménykezelőt RowDataBound a GridView-hoz a Tervezőben a GridView kiválasztásával, a Tulajdonságok ablak villámgyors ikonjára kattintva, majd kattintson duplán az RowDataBound eseményre. Másik lehetőségként kiválaszthatja a GridView és annak RowDataBound eseményét a ASP.NET mögötti kód mögötti osztályfájl tetején található legördülő listákból. Ezzel létrehoz egy új eseménykezelőt ProductsInCategory_RowDataBound a SummaryDataInFooter.aspx lap kód mögötti osztályában.

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
End Sub

A futó összeg fenntartásához az eseménykezelő hatókörén kívüli változókat kell definiálnunk. Hozza létre a következő négy oldalszintű változót:

• _totalUnitPrice, típus Decimal
• _totalNonNullUnitPriceCount, típus Integer
• _totalUnitsInStock, típus Integer
• _totalUnitsOnOrder, típus Integer

Ezután írja be a kódot, hogy növelje ezt a három változót az RowDataBound eseménykezelőben észlelt minden adatsorhoz.

Dim _totalUnitPrice As Decimal = 0
Dim _totalNonNullUnitPriceCount As Integer = 0
Dim _totalUnitsInStock As Integer = 0
Dim _totalUnitsOnOrder As Integer = 0
Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() Then
            _totalUnitPrice += product.UnitPrice
            _totalNonNullUnitPriceCount += 1
        End If
        If Not product.IsUnitsInStockNull() Then
            _totalUnitsInStock += product.UnitsInStock
        End If
        If Not product.IsUnitsOnOrderNull() Then
            _totalUnitsOnOrder += product.UnitsOnOrder
        End If
    ElseIf e.Row.RowType = DataControlRowType.Footer Then
        Dim avgUnitPrice As Decimal = _
            _totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
        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()
    End If
End Sub

Az RowDataBound eseménykezelő azzal kezdődik, hogy ellenőrizzük, hogy egy DataRow-val foglalkozunk. A létrehozást követően a rendszer az Northwind.ProductsRow éppen az GridViewRow objektumhoz e.Row kötött példányt a változóban producttárolja. Ezután a futó összes változót az aktuális termék megfelelő értékei növelik (feltéve, hogy nem tartalmaznak adatbázis-értéket NULL ). Nyomon követjük mind a folyó UnitPrice végösszeget, mind a nemNULLUnitPrice rekordok számát, mivel az átlagos ár a két szám hányadosa.

4. lépés: Az összefoglaló adatok megjelenítése a láblécben

Az összegző adatok összegzésével az utolsó lépés az, hogy megjeleníti azokat a GridView láblécsorában. Ez a feladat programozott módon is elvégezhető az RowDataBound eseménykezelőn keresztül. Ne feledje, hogy az eseménykezelő aktiválódik RowDataBound olyan sornál, amely a GridView-hoz van kötve, beleértve az élőlábsort is. Ezért bővíthetjük az eseménykezelőt, hogy az alábbi kóddal jelenítsük meg az adatokat az élőlábsorban.

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
      ... Increment the running totals ...
    ElseIf e.Row.RowType = DataControlRowType.Footer
      ... Display the summary data in the footer ...
    End If
End Sub

Mivel a lábléc sor az összes adatsor hozzáadása után kerül hozzáadásra a GridView-hoz, biztosak lehetünk abban, hogy mire készen állunk az összefoglaló adatokat a lábléc sorban megjeleníteni, az értékek futóösszegei elkészültek. Az utolsó lépés tehát ezeknek az értékeknek az élőláb celláiban való beállítása.

Ha szöveget szeretne megjeleníteni egy adott élőlábcellában, használja a e.Row.Cells(index).Text = value elemet, ahol az Cells indexelés 0-nál kezdődik. Az alábbi kód kiszámítja az átlagos árat (a teljes árat a termékek számával osztva), és megjeleníti a készletben lévő egységek és egységek teljes számát sorrendben a GridView megfelelő lábléccelláiban.

Protected Sub ProductsInCategory_RowDataBound _
    (sender As Object, e As GridViewRowEventArgs) _
        Handles ProductsInCategory.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
      ... <i>Increment the running totals</i> ...
    ElseIf e.Row.RowType = DataControlRowType.Footer
      Dim avgUnitPrice As Decimal = _
        _totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
      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()
    End If
End Sub

A 13. ábrán a kód hozzáadása utáni jelentés látható. Figyelje meg, hogyan formázza az ToString("c") az átlagos árösszesítő információt pénznemként.

Képernyőkép, amely a GridView láblécének pénznemként formázott összegző adatait mutatja.

13. ábra: A GridView láblécsora most vöröses háttérszínnel rendelkezik (kattintson ide a teljes méretű kép megtekintéséhez)

Összefoglalás

Az összefoglaló adatok megjelenítése gyakori jelentéskövetelmény, és a GridView vezérlő megkönnyíti ezeknek az információknak a lábléc sorába történő beillesztését. Az élőláb sor megjelenik, amikor a GridView ShowFooter tulajdonsága True és a cellákban található szöveg programozottan beállítható a RowDataBound eseménykezelő segítségével. Az összefoglaló adatok számítása történhet az adatbázis ismételt lekérdezésével vagy a ASP.NET lap kód mögötti osztályában található kód használatával az összefoglaló adatok programozott kiszámításához.

Ez az oktatóanyag befejezi az egyéni formázás vizsgálatát a GridView, a DetailsView és a FormView vezérlőkkel. A következő oktatóanyag elindítja az adatok beszúrásának, frissítésének és törlésének feltárását ugyanezekkel a vezérlőkkel.

Boldog programozást!

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Tanuld meg ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Előző