Wyświetlanie informacji podsumowania w stopce kontrolki GridView (C#)

Autor: Scott Mitchell

Pobierz plik PDF

Podsumowanie informacji jest często wyświetlane w dolnej części raportu w wierszu podsumowania. Kontrolka GridView może zawierać wiersz stopki, do którego komórki możemy programowo wstrzykiwać zagregowane dane. W tym samouczku zobaczymy, jak wyświetlić zagregowane dane w tym wierszu stopki.

Wprowadzenie

Oprócz wyświetlania cen produktów, jednostek w magazynie, jednostek na poziomie zamówienia i zmiany kolejności użytkownik może również zainteresować się zagregowanymi informacjami, takimi jak średnia cena, całkowita liczba jednostek w magazynie itd. Takie informacje podsumowania są często wyświetlane w dolnej części raportu w wierszu podsumowania. Kontrolka GridView może zawierać wiersz stopki, do którego komórki możemy programowo wstrzykiwać zagregowane dane.

To zadanie przedstawia nam trzy wyzwania:

1. Konfigurowanie kontrolki GridView w celu wyświetlenia wiersza stopki
2. Określanie danych podsumowania; oznacza to, jak obliczamy średnią cenę lub łączną liczbę jednostek w magazynie?
3. Wstrzykiwanie danych podsumowania do odpowiednich komórek wiersza stopki

W tym samouczku zobaczymy, jak przezwyciężyć te wyzwania. W szczególności utworzymy stronę zawierającą listę kategorii na liście rozwijanej z produktami wybranej kategorii wyświetlanymi w elemecie GridView. Element GridView będzie zawierać wiersz stopki, który pokazuje średnią cenę i łączną liczbę jednostek w magazynie oraz kolejność produktów w tej kategorii.

Rysunek 1. Informacje podsumowania są wyświetlane w wierszu stopki kontrolki GridView (kliknij, aby wyświetlić obraz pełnowymiarowy)

Ten samouczek, wraz z jego kategorią do interfejsu wzorca/szczegółów produktów, opiera się na pojęciach omówionych we wcześniejszym samouczku Filtrowanie wzorca/szczegółów za pomocą listy rozwijanej. Jeśli jeszcze nie znasz wcześniejszego samouczka, przed kontynuowaniem pracy z tym samouczkiem wykonaj tę czynność.

Krok 1. Dodawanie listy rozwijanej kategorii i elementów GridView produktów

Przed dodaniem informacji podsumowania do stopki elementu GridView najpierw skompilujmy raport główny/szczegółowy. Po ukończeniu tego pierwszego kroku przyjrzymy się sposobom dołączania danych podsumowania.

Zacznij od otwarcia SummaryDataInFooter.aspx strony w folderze CustomFormatting . Dodaj kontrolkę DropDownList i ustaw ją ID na Categories. Następnie kliknij link Wybierz źródło danych z tagu inteligentnego Listy rozwijanej i wybierz opcję dodania nowego obiektu ObjectDataSource o nazwie CategoriesDataSource , która wywołuje CategoriesBLL metodę klasy GetCategories() .

Rysunek 2. Dodawanie nowego obiektuDataSource nazwane CategoriesDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Rysunek 3. Wywołanie metody klasy GetCategories() ObjectDataSource CategoriesBLL (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po skonfigurowaniu obiektu ObjectDataSource kreator zwraca nas do kreatora konfiguracji źródła danych Listy rozwijanej, z którego musimy określić, jaka wartość pola danych powinna być wyświetlana i która powinna odpowiadać wartości listy Rozwijanej ListItem . CategoryName Wyświetl pole i użyj wartości CategoryID jako wartości.

Rysunek 4. Użyj CategoryName pól i jako Text wartości i CategoryIDValue dla ListItem s (kliknij, aby wyświetlić obraz pełnowymiarowy)

W tym momencie mamy listę rozwijaną (Categories), która zawiera listę kategorii w systemie. Teraz musimy dodać element GridView, który zawiera listę tych produktów należących do wybranej kategorii. Zanim jednak zrobimy to, poświęć chwilę, aby zaznaczyć pole wyboru Włącz autopostback w tagu inteligentnym Listy rozwijanej. Zgodnie z opisem w samouczku Master/Detail Filtering With a DropDownList (Filtrowanie wzorca/szczegółów przy użyciu listy rozwijanej) ustawienie właściwości DropDownList AutoPostBack na true stronę zostanie opublikowane z powrotem za każdym razem, gdy wartość DropDownList zostanie zmieniona. Spowoduje to odświeżenie elementu GridView z wyświetlonymi produktami dla nowo wybranej kategorii. AutoPostBack Jeśli właściwość jest ustawiona na false (wartość domyślna), zmiana kategorii nie spowoduje powrotu po awarii i w związku z tym nie zaktualizuje wymienionych produktów.

Rysunek 5. Zaznacz pole wyboru Włącz autopostback w tagu inteligentnym Listy rozwijanej (kliknij, aby wyświetlić obraz pełnowymiarowy)

Dodaj kontrolkę GridView do strony, aby wyświetlić produkty dla wybranej kategorii. Ustaw właściwość GridView ID na ProductsInCategory i powiąż ją z nowym obiektem ObjectDataSource o nazwie ProductsInCategoryDataSource.

Rysunek 6. Dodawanie nowego obiektuDataSource nazwane ProductsInCategoryDataSource (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Skonfiguruj obiekt ObjectDataSource, aby wywoływać metodę ProductsBLL klasy GetProductsByCategoryID(categoryID) .

Rysunek 7. Wywołaj metodę GetProductsByCategoryID(categoryID) ObjectDataSource (Kliknij, aby wyświetlić obraz pełnowymiarowy)

GetProductsByCategoryID(categoryID) Ponieważ metoda przyjmuje parametr wejściowy, w ostatnim kroku kreatora możemy określić źródło wartości parametru. Aby wyświetlić te produkty z wybranej kategorii, należy pobrać parametr z Listy rozwijanej Categories .

Rysunek 8. Pobieranie wartości parametru categoryID z listy rozwijanej Wybrane kategorie (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po ukończeniu pracy kreatora element GridView będzie miał pole BoundField dla każdej właściwości produktu. Wyczyśćmy te pola Granic, aby były wyświetlane tylko ProductNamepola , UnitPrice, UnitsInStocki UnitsOnOrder BoundFields. Możesz dodać wszystkie ustawienia na poziomie pola do pozostałych pól BoundFields (na przykład formatowanie jako UnitPrice waluty). Po wprowadzeniu tych zmian znacznik deklaratywne elementu GridView powinien wyglądać podobnie do następującego:

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

W tym momencie mamy w pełni działający raport główny/szczegółowy, który pokazuje nazwę, cenę jednostkową, jednostki w magazynie i jednostki w kolejności dla tych produktów należących do wybranej kategorii.

Rysunek 9. Pobieranie wartości parametru categoryID z listy rozwijanej Wybrane kategorie (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 2. Wyświetlanie stopki w siatceView

Kontrolka GridView może wyświetlać zarówno nagłówek, jak i wiersz stopki. Te wiersze są wyświetlane w zależności od wartości ShowHeader właściwości iShowFooter, odpowiednio, z wartością domyślną i ShowFooter wartością falseShowHeadertrue . Aby dołączyć stopkę do kontrolki GridView, wystarczy ustawić jej ShowFooter właściwość na true.

Rysunek 10. Ustaw właściwość GridView ShowFooter na true (kliknij, aby wyświetlić obraz pełnowymiarowy)

Wiersz stopki zawiera komórkę dla każdego z pól zdefiniowanych w elemecie GridView; jednak te komórki są domyślnie puste. Poświęć chwilę, aby wyświetlić postęp w przeglądarce. Gdy właściwość jest teraz ustawiona ShowFooter na truewartość , element GridView zawiera pusty wiersz stopki.

Rysunek 11. Widok GridView zawiera teraz wiersz stopki (kliknij, aby wyświetlić obraz pełnowymiarowy)

Wiersz stopki na rysunku 11 nie wyróżnia się, ponieważ ma białe tło. Utwórzmy klasę FooterStyle CSS, która Styles.css określa ciemnoczerwone tło, a następnie skonfigurujemy GridView.skin plik Skin w DataWebControls temacie Motyw, aby przypisać tę klasę CSS do właściwości GridViewFooterStyleCssClass. Jeśli musisz za pomocą pędzla na temat skórek i motywów, zapoznaj się z samouczkiem Wyświetlanie danych za pomocą obiektu ObjectDataSource .

Zacznij od dodania następującej klasy CSS do Styles.css:

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

Klasa FooterStyle CSS jest podobna do HeaderStyle klasy, chociaż HeaderStylekolor tła jest subtelnie ciemniejszy, a jego tekst jest wyświetlany na pogrubionej czcionki. Ponadto tekst w stopce jest wyrównany do prawej, natomiast tekst nagłówka jest wyśrodkowany.

Następnie, aby skojarzyć tę klasę CSS z stopką elementu GridView, otwórz GridView.skin plik w obszarze DataWebControls Motyw i ustaw FooterStylewłaściwość "s CssClass ". Po dodaniu znaczniki pliku powinny wyglądać następująco:

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

Jak pokazano na poniższym zrzucie ekranu, ta zmiana sprawia, że stopka wyróżnia się wyraźniej.

Rysunek 12. Wiersz stopki kontrolki GridView ma teraz czerwony kolor tła (kliknij, aby wyświetlić obraz pełnowymiarowy)

Krok 3. Przetwarzanie danych podsumowania

Po wyświetleniu stopki GridView następnym wyzwaniem, przed którym stoimy, jest obliczanie danych podsumowania. Istnieją dwa sposoby obliczania tych zagregowanych informacji:

1. Za pomocą zapytania SQL możemy wydać dodatkowe zapytanie do bazy danych w celu obliczenia danych podsumowania dla określonej kategorii. Język SQL zawiera szereg funkcji agregujących wraz z klauzulą GROUP BY określającą dane, za pomocą których dane mają być podsumowane. Następujące zapytanie SQL przywróci potrzebne informacje:

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

   Oczywiście nie chcesz wystawiać tego zapytania bezpośrednio ze SummaryDataInFooter.aspx strony, ale raczej przez utworzenie metody w elemecie ProductsTableAdapter i .ProductsBLL

2. Oblicz te informacje, ponieważ są dodawane do kontrolki GridView zgodnie z opisem w samouczku Custom Formatting Based On Data (Niestandardowe formatowanie oparte na danych ), program obsługi zdarzeń GridView jest uruchamiany raz dla każdego wiersza dodawanego do elementu GridView RowDataBound po jego ruchu przychodzącego. Tworząc procedurę obsługi zdarzeń dla tego zdarzenia, możemy zachować łączną liczbę wartości, które chcemy agregować. Po powiązaniu ostatniego wiersza danych z elementem GridView mamy sumy i informacje potrzebne do obliczenia średniej.

Zwykle używam drugiego podejścia, ponieważ zapisuje podróż do bazy danych i nakład pracy potrzebny do zaimplementowania funkcji podsumowania w warstwie dostępu do danych i warstwie logiki biznesowej, ale wystarczyłoby to dowolne podejście. Na potrzeby tego samouczka użyjemy drugiej opcji i śledźmy łączną liczbę uruchomień przy użyciu procedury obsługi zdarzeń RowDataBound .

Utwórz procedurę RowDataBound obsługi zdarzeń dla kontrolki GridView, wybierając element GridView w Projektant, klikając ikonę błyskawicy z okno Właściwości i klikając RowDataBound dwukrotnie zdarzenie. Spowoduje to utworzenie nowej procedury obsługi zdarzeń o nazwie ProductsInCategory_RowDataBound w SummaryDataInFooter.aspx klasie kodu za stroną.

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

Aby zachować sumę bieżącą, musimy zdefiniować zmienne poza zakresem programu obsługi zdarzeń. Utwórz następujące cztery zmienne na poziomie strony:

• _totalUnitPrice, typu decimal
• _totalNonNullUnitPriceCount, typu int
• _totalUnitsInStock, typu int
• _totalUnitsOnOrder, typu int

Następnie napisz kod, aby zwiększać te trzy zmienne dla każdego wiersza danych napotkanego w procedurze obsługi zdarzeń RowDataBound .

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

Procedura RowDataBound obsługi zdarzeń rozpoczyna się od upewnienia się, że mamy do czynienia z elementem DataRow. Po ustanowieniu tego wystąpienia, które zostało po prostu powiązane z obiektem w , Northwind.ProductsRow jest przechowywane w zmiennej product.e.RowGridViewRow Następnie zmienne sumy bieżącej są zwiększane przez odpowiadające im wartości bieżącego produktu (przy założeniu, że nie zawierają wartości bazy danych NULL ). Śledzimy zarówno sumę bieżącą UnitPrice , jak i liczbę rekordów,NULLUnitPrice ponieważ średnia cena jest ilorazem tych dwóch liczb.

Krok 4. Wyświetlanie danych podsumowania w stopce

Po zsumieniu danych podsumowania ostatnim krokiem jest wyświetlenie go w wierszu stopki kontrolki GridView. To zadanie można również wykonać programowo za pomocą programu obsługi zdarzeń RowDataBound . Pamiętaj, że RowDataBound procedura obsługi zdarzeń jest uruchamiana dla każdego wiersza powiązanego z kontrolką GridView, w tym wiersza stopki. W związku z tym możemy rozszerzyć naszą procedurę obsługi zdarzeń, aby wyświetlić dane w wierszu stopki przy użyciu następującego kodu:

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

Ponieważ wiersz stopki jest dodawany do kontrolki GridView po dodaniu wszystkich wierszy danych, możemy mieć pewność, że do momentu, gdy wszystko będzie gotowe do wyświetlenia danych podsumowania w stopce, zostaną ukończone obliczenia sumy bieżącej. Ostatnim krokiem jest ustawienie tych wartości w komórkach stopki.

Aby wyświetlić tekst w określonej komórce stopki, użyj polecenia e.Row.Cells[index].Text = value, gdzie Cells indeksowanie zaczyna się od 0. Poniższy kod oblicza średnią cenę (łączną cenę podzieloną przez liczbę produktów) i wyświetla ją wraz z całkowitą liczbą jednostek w magazynie i jednostkach w kolejności w odpowiednich komórkach stopki kontrolki 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();
    }
}

Rysunek 13 przedstawia raport po dodaniu tego kodu. Zwróć uwagę na sposób ToString("c") formatowania informacji podsumowania średniej ceny, takich jak waluta.

Rysunek 13. Wiersz stopki kontrolki GridView ma teraz kolor tła reddish (kliknij, aby wyświetlić obraz pełnowymiarowy)

Podsumowanie

Wyświetlanie danych podsumowania jest typowym wymaganiem dotyczącym raportu, a kontrolka GridView ułatwia dołączanie takich informacji do wiersza stopki. Wiersz stopki jest wyświetlany, gdy właściwość GridView jest ustawiona ShowFooter na true i może mieć tekst w komórkach ustawiony programowo za pośrednictwem RowDataBound programu obsługi zdarzeń. Obliczanie danych podsumowania można wykonać przez ponowne wykonanie zapytania względem bazy danych lub użycie kodu w klasie ASP.NET strony w celu programowego obliczenia danych podsumowania.

Ten samouczek kończy badanie niestandardowego formatowania za pomocą kontrolek GridView, DetailsView i FormView. Nasz następny samouczek rozpoczyna eksplorację wstawiania, aktualizowania i usuwania danych przy użyciu tych samych kontrolek.

Szczęśliwe programowanie!

Informacje o autorze

Scott Mitchell, autor siedmiu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 2.0 w ciągu 24 godzin. Można do niego dotrzeć pod adresem mitchell@4GuysFromRolla.com. Lub za pośrednictwem swojego bloga, który można znaleźć na stronie http://ScottOnWriting.NET.

WsteczDalej