Zobrazení souhrnných informací v zápatí prvku GridView (VB)

Scott Mitchell

Stáhnout PDF

Souhrnné informace se často zobrazují v dolní části sestavy v souhrnném řádku. Ovládací prvek GridView může obsahovat řádek zápatí, do jehož buněk můžeme programově vkládat agregovaná data. V tomto kurzu se dozvíte, jak zobrazit agregovaná data v tomto řádku zápatí.

Úvod

Kromě zobrazení cen jednotlivých produktů, skladových jednotek, jednotek na objednávkách a přeobjednání můžou uživatele zajímat také agregované informace, jako je průměrná cena, celkový počet jednotek na skladě atd. Tyto souhrnné informace se často zobrazují v dolní části sestavy v souhrnném řádku. Ovládací prvek GridView může obsahovat řádek zápatí, do jehož buněk můžeme programově vkládat agregovaná data.

Tento úkol představuje tři výzvy:

1. Konfigurace objektu GridView pro zobrazení řádku zápatí
2. Určení souhrnných dat; To znamená, jak vypočítáme průměrnou cenu nebo celkový počet jednotek na skladě?
3. Vložení souhrnných dat do příslušných buněk řádku zápatí

V tomto kurzu se dozvíte, jak tyto výzvy překonat. Konkrétně vytvoříme stránku, která uvádí kategorie v rozevíracím seznamu s produkty vybrané kategorie zobrazenými v zobrazení GridView. GridView bude obsahovat řádek zápatí, který zobrazuje průměrnou cenu a celkový počet jednotek na skladě a v objednávce produktů v dané kategorii.

Obrázek 1: Souhrnné informace se zobrazují v řádku zápatí objektu GridView (kliknutím zobrazíte obrázek v plné velikosti)

Tento kurz se svou kategorií na hlavní/podrobné rozhraní produktů vychází z konceptů popsaných v dřívějším kurzu Filtrování hlavních a podrobných dat pomocí rozevíracího seznamu . Pokud jste ještě nepropracovali předchozí kurz, udělejte to před pokračováním v tomto kurzu.

Krok 1: Přidání rozevíracího seznamu Kategorií a GridView produktů

Než se začneme zaobranit přidáním souhrnných informací do zápatí GridView, pojďme nejprve jednoduše sestavit hlavní/podrobnou sestavu. Po dokončení tohoto prvního kroku se podíváme na to, jak zahrnout souhrnná data.

Začněte otevřením SummaryDataInFooter.aspx stránky ve CustomFormatting složce. Přidejte ovládací prvek DropDownList a nastavte ho ID na Categories. Potom klikněte na odkaz Zvolit zdroj dat z inteligentní značky DropDownList a zvolte přidání nového ObjectDataSource s názvem CategoriesDataSource , který vyvolá metodu CategoriesBLL třídy GetCategories() .

Obrázek 2: Přidání nového objektuDataSource s názvem CategoriesDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 3: Nechte objekt ObjectDataSource vyvolat metodu CategoriesBLL třídy GetCategories() (kliknutím zobrazíte obrázek v plné velikosti)

Po konfiguraci ObjectDataSource nás průvodce vrátí do průvodce Konfigurace zdroje dat dropDownList, ze kterého musíme určit, jaká hodnota datového pole se má zobrazit a která má odpovídat hodnotě rozevíracího ListItem seznamu. CategoryName Nechte pole zobrazit a jako hodnotu použijte CategoryID hodnotu .

Obrázek 4: Jako a Value pro ListItem s použijte CategoryName pole Text a CategoryID (Kliknutím zobrazíte obrázek v plné velikosti)

V tomto okamžiku máme rozevírací seznam (Categories), který uvádí kategorie v systému. Teď musíme přidat GridView se seznamem produktů, které patří do vybrané kategorie. Než to ale uděláme, zaškrtněte políčko Enable AutoPostBack (Povolit autoPostBack) v inteligentní značce DropDownList. Jak je popsáno v kurzu Filtrování předlohy a podrobností s rozevíracím seznamem , nastavením vlastnosti DropDownList AutoPostBack na True stránku se vrátí zpět při každé změně hodnoty DropDownList. To způsobí, že gridView se aktualizuje a zobrazí se tyto produkty pro nově vybranou kategorii. AutoPostBack Pokud je vlastnost nastavená na False (výchozí), změna kategorie nezpůsobí zpětné vrácení, a proto se neaktualizuje uvedené produkty.

Obrázek 5: Zaškrtněte políčko Povolit AutoPostBack v inteligentní značce rozevíracího seznamu (kliknutím zobrazíte obrázek v plné velikosti).

Přidejte na stránku ovládací prvek GridView, aby se zobrazily produkty pro vybranou kategorii. Nastavte objekty GridView ID na ProductsInCategory a vytvořte vazbu k novému objektu ObjectDataSource s názvem ProductsInCategoryDataSource.

Obrázek 6: Přidání nového objektuDataSource s názvem ProductsInCategoryDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Nakonfigurujte ObjectDataSource tak, aby vyvolal metodu ProductsBLL třídy GetProductsByCategoryID(categoryID) .

Obrázek 7: Nechte objekt ObjectDataSource vyvolat metodu GetProductsByCategoryID(categoryID) (kliknutím zobrazíte obrázek v plné velikosti)

Vzhledem k tomu, že GetProductsByCategoryID(categoryID) metoda přebírá vstupní parametr, můžeme v posledním kroku průvodce určit zdroj hodnoty parametru. Pokud chcete zobrazit tyto produkty z vybrané kategorie, nechte si parametr načíst z rozevíracího Categories seznamu.

Obrázek 8: Získání hodnoty parametru categoryID z rozevíracího seznamu Vybrané kategorie (kliknutím zobrazíte obrázek v plné velikosti)

Po dokončení průvodce bude gridView mít BoundField pro každou z vlastností produktu. Pojďme tyto objekty BoundFields vyčistit tak, aby se zobrazily pouze ProductNameobjekty , UnitPriceUnitsInStock, a UnitsOnOrder BoundFields. Do zbývajících polí BoundFields (například formátování UnitPrice jako měny) můžete přidat jakékoli nastavení na úrovni pole. Po provedení těchto změn by deklarativní kód objektu GridView měl vypadat nějak takto:

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

V tuto chvíli máme plně funkční hlavní/podrobnou sestavu, která zobrazuje název, jednotkovou cenu, skladové jednotky a jednotky na objednávku produktů, které patří do vybrané kategorie.

Obrázek 9: Získání hodnoty parametru categoryID z rozevíracího seznamu Vybrané kategorie (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Zobrazení zápatí v zobrazení GridView

Ovládací prvek GridView může zobrazit řádek záhlaví i zápatí. Tyto řádky se zobrazí v závislosti na hodnotách ShowHeader vlastností a ShowFooter s ShowHeader výchozím nastavením na True a ShowFooter .False Chcete-li zahrnout zápatí do objektu GridView, jednoduše nastavte jeho ShowFooter vlastnost na True.

Obrázek 10: Nastavení vlastnosti GridView ShowFooter na True (Kliknutím zobrazíte obrázek v plné velikosti)

Řádek zápatí má buňku pro každé z polí definovaných v GridView; Tyto buňky jsou ale ve výchozím nastavení prázdné. Chvíli si prohlédněte průběh v prohlížeči. ShowFooter Vlastnost je nyní nastavena na True, GridView obsahuje prázdný řádek zápatí.

Obrázek 11: GridView teď obsahuje řádek zápatí (kliknutím zobrazíte obrázek v plné velikosti)

Řádek zápatí na obrázku 11 nevyniká, protože má bílé pozadí. Pojďme vytvořit FooterStyle třídu CSS, Styles.css která určuje tmavě červené pozadí a pak nakonfigurujte GridView.skin soubor Skin v motivu DataWebControls tak, aby tuto třídu CSS přiřadil vlastnosti GridViewFooterStyleCssClass. Pokud potřebujete vyčistit skiny a motivy, projděte si kurz Zobrazení dat pomocí ObjectDataSource .

Začněte přidáním následující třídy CSS do Styles.css:

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

Třída FooterStyle CSS je stylově HeaderStyle podobná třídě, i když HeaderStyleje barva pozadí je jemná tmavší a její text se zobrazuje tučným písmem. Text v zápatí je navíc zarovnaný doprava, zatímco text záhlaví je zarovnaný na střed.

Chcete-li přidružit tuto třídu CSS k zápatí každého objektu GridView, otevřete GridView.skin soubor v motivu DataWebControls a nastavte FooterStylevlastnost 's CssClass . Po tomto přidání by revize souboru měla vypadat takto:

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

Jak je vidět na následujícím snímku obrazovky, tato změna zápatí jasněji vynikne.

Obrázek 12: Řádek zápatí objektu GridView teď má červenou barvu pozadí (kliknutím zobrazíte obrázek v plné velikosti)

Krok 3: Výpočet souhrnných dat

Po zobrazení zápatí GridView je dalším problémem, před kterým stojíme, jak vypočítat souhrnná data. Tyto agregované informace se dají vypočítat dvěma způsoby:

1. Prostřednictvím dotazu SQL bychom mohli do databáze vydat další dotaz pro výpočet souhrnných dat pro konkrétní kategorii. SQL obsahuje řadu agregačních funkcí spolu s klauzulí GROUP BY pro určení dat, pro která se mají data sumarizovat. Následující dotaz SQL vrátí potřebné informace:

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

   Samozřejmě byste tento dotaz nechtěli vydat přímo ze SummaryDataInFooter.aspx stránky, ale spíše vytvořením metody v objektu ProductsTableAdapterProductsBLLa .

2. Vypočítá tyto informace při přidání do objektu GridView, jak je popsáno v kurzu Vlastní formátování založené na datech , obslužná rutina RowDataBound události GridView se aktivuje jednou pro každý řádek přidaný do objektu GridView po jeho příchozím datovém spojení. Vytvořením obslužné rutiny události pro tuto událost můžeme zachovat průběžný součet hodnot, které chceme agregovat. Po vazbě posledního řádku dat na GridView máme celkové součty a informace potřebné k výpočtu průměru.

Obvykle používám druhý přístup, protože šetří cestu k databázi a úsilí potřebné k implementaci souhrnné funkce ve vrstvě přístupu k datům a vrstvě obchodní logiky, ale oba přístupy by stačily. Pro účely tohoto kurzu použijeme druhou možnost a pomocí obslužné rutiny události sledujme průběžný součet RowDataBound .

Vytvořte obslužnou RowDataBound rutinu události pro GridView tak, že v Designer vyberete objekt GridView, kliknete na ikonu blesku z okno Vlastnosti a poklikáním RowDataBound na událost. Alternativně můžete vybrat GridView a jeho RowDataBound událost z rozevíracích seznamů v horní části ASP.NET souboru třídy kódu na pozadí. Tím se vytvoří nová obslužná rutina události s názvem ProductsInCategory_RowDataBound ve SummaryDataInFooter.aspx třídě kódu na pozadí stránky.

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

Abychom zachovali průběžný součet, musíme definovat proměnné mimo obor obslužné rutiny události. Vytvořte následující čtyři proměnné na úrovni stránky:

• _totalUnitPrice, typu Decimal
• _totalNonNullUnitPriceCount, typu Integer
• _totalUnitsInStock, typu Integer
• _totalUnitsOnOrder, typu Integer

Dále napište kód pro zvýšení těchto tří proměnných pro každý řádek dat, který se vyskytl v obslužné rutině RowDataBound události.

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

Obslužná rutina RowDataBound události začíná tím, že zajišťujeme, že se jedná o DataRow. Po vytvoření se instance, která byla právě svázaná s objektem v , Northwind.ProductsRow uloží do proměnné product.e.RowGridViewRow Dále se proměnné průběžných součtů navyšují o odpovídající hodnoty aktuálního produktu (za předpokladu, že neobsahují hodnotu databáze NULL ). Sledujeme průběžný součet UnitPrice i počet záznamů, které nejsouNULLUnitPrice , protože průměrná cena je podílem těchto dvou čísel.

Krok 4: Zobrazení souhrnných dat v zápatí

Se součtem dat je posledním krokem jejich zobrazení v řádku zápatí objektu GridView. I tuto úlohu je možné provést programově prostřednictvím obslužné rutiny RowDataBound události. Vzpomeňte RowDataBound si, že obslužná rutina události se aktivuje pro každý řádek, který je vázaný na GridView, včetně řádku zápatí. Proto můžeme pomocí následujícího kódu rozšířit naši obslužnou rutinu události tak, aby zobrazovala data v řádku zápatí:

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

Vzhledem k tomu, že se řádek zápatí přidá do ovládacího prvku GridView po přidání všech řádků dat, můžeme si být jistí, že než budeme připraveni zobrazit souhrnná data v zápatí, budou výpočty průběžných součtů dokončeny. Posledním krokem je nastavení těchto hodnot v buňkách zápatí.

Pokud chcete zobrazit text v určité buňce zápatí, použijte , e.Row.Cells(index).Text = valuekde Cells indexování začíná na 0. Následující kód vypočítá průměrnou cenu (celkovou cenu dělenou počtem produktů) a zobrazí ji spolu s celkovým počtem jednotek na skladě a jednotkami v pořadí v příslušných buňkách zápatí GridView.

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

Obrázek 13 znázorňuje sestavu po přidání tohoto kódu. Všimněte si, jak to ToString("c") způsobí, že se souhrnné informace o průměrných cenách formátují jako měna.

Obrázek 13: Řádek zápatí objektu GridView teď má červenou barvu pozadí (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

Zobrazení souhrnných dat je běžným požadavkem sestavy a ovládací prvek GridView usnadňuje zahrnutí těchto informací do řádku zápatí. Řádek zápatí se zobrazí, když je vlastnost GridView ShowFooter nastavena na True a může mít text v buňkách nastaven programově prostřednictvím obslužné rutiny RowDataBound události. Výpočet souhrnných dat lze provést buď opětovným dotazováním databáze, nebo pomocí kódu ve třídě kódu na pozadí ASP.NET stránky k programovému výpočtu souhrnných dat.

Tento kurz uzavírá naši kontrolu vlastního formátování pomocí ovládacích prvků GridView, DetailsView a FormView. Náš další kurz zahájí náš průzkum vkládání, aktualizace a odstraňování dat pomocí stejných ovládacích prvků.

Všechno nejlepší na programování!

O autorovi

Scott Mitchell, autor sedmi knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Můžete ho zastihnout na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na adrese http://ScottOnWriting.NET.

Předchozí