GridView のフッターに概要情報を表示する (VB)

[アーティクル]
07/13/2023

概要情報は、多くの場合、レポートの下部にあるサマリー行に表示されます。 GridView コントロールには、プログラムによって集計データを挿入できるセルを含むフッター行を含めることができます。このチュートリアルでは、このフッター行に集計データを表示する方法について説明します。

はじめに

各製品の価格、在庫単位、注文単位、並べ替えレベルに加えて、ユーザーは、平均価格、在庫の合計ユニット数などの集計情報にも関心がある場合があります。このような概要情報は、多くの場合、レポートの下部にあるサマリー行に表示されます。 GridView コントロールには、プログラムによって集計データを挿入できるセルを含むフッター行を含めることができます。

このタスクは、次の 3 つの課題を示します。

フッター行を表示するように GridView を構成する
概要データの決定。つまり、平均価格または在庫単位の合計を計算するにはどうすればよいですか?
フッター行の適切なセルにサマリーデータを挿入する

このチュートリアルでは、これらの課題を克服する方法について説明します。具体的には、選択したカテゴリの製品が GridView に表示されているドロップダウンリストにカテゴリを一覧表示するページを作成します。 GridView にはフッター行が含まれます。この行には、在庫の平均価格と合計ユニット数、およびそのカテゴリの製品の注文を示す行が含まれます。

図 1: 概要情報が GridView のフッター行に表示される (フルサイズの画像を表示するをクリックします)

このチュートリアルでは、製品マスター/詳細インターフェイスへのカテゴリを使用して、前の「Master/Detail Filtering With a DropDownList 」チュートリアルで説明した概念に基づいています。前のチュートリアルをまだ行っていない場合は、このチュートリアルを続行する前に行ってください。

手順 1: カテゴリ DropDownList と Products GridView の追加

GridView のフッターに概要情報を追加する前に、まずマスター/詳細レポートを作成しましょう。この最初の手順を完了したら、概要データを含める方法について説明します。

まず、フォルダー内の SummaryDataInFooter.aspx ページを CustomFormatting 開きます。 DropDownList コントロールを追加し、そのを ID に設定します Categories。次に、DropDownList のスマートタグから [データソースの選択] リンクをクリックし、クラスのメソッドを呼び出すという名前CategoriesDataSourceのGetCategories()新しい ObjectDataSource をCategoriesBLL追加することを選択します。

図 2: 名前付きの CategoriesDataSource 新しい ObjectDataSource を追加する (フルサイズの画像を表示する場合はクリックします)

図 3: ObjectDataSource でクラスのメソッドをCategoriesBLL呼び出す (フルサイズのGetCategories()画像を表示する場合はクリックします)

ObjectDataSource を構成すると、DropDownList のデータソース構成ウィザードに戻ります。そこから、表示するデータフィールドの値と、DropDownList ListItem の値に対応するデータフィールドの値を指定する必要があります。フィールドを CategoryName 表示し、を CategoryID 値として使用します。

図 4: フィールドと CategoryID フィールドをそれぞれ CategoryName ととしてListItemTextValue使用します (フルサイズの画像を表示するには、ここをクリックします)

この時点で、システム内のカテゴリを一覧表示する DropDownList (Categories) があります。ここで、選択したカテゴリに属する製品を一覧表示する GridView を追加する必要があります。ただし、その前に、DropDownList のスマートタグの [自動ポストバックを有効にする] チェックボックスをチェックしてください。 「Master/Detail Filtering With a DropDownList」チュートリアルで説明したように、DropDownList のAutoPostBackプロパティをページにTrue設定すると、DropDownList の値が変更されるたびにポストバックされます。これにより、GridView が更新され、新しく選択されたカテゴリの製品が表示されます。プロパティが AutoPostBack (既定値) に False 設定されている場合、カテゴリを変更してもポストバックは発生しないため、一覧表示されている製品は更新されません。

図 5: DropDownList のスマートタグの [自動ポストバックを有効にする] チェックボックスをオンにする (フルサイズの画像を表示するをクリックします)

選択したカテゴリの製品を表示するために、GridView コントロールをページに追加します。 GridView のをにProductsInCategory設定し、という名前ProductsInCategoryDataSourceのID新しい ObjectDataSource にバインドします。

図 6: 名前付きの ProductsInCategoryDataSource 新しい ObjectDataSource を追加する (フルサイズの画像を表示する場合はクリックします)

クラスGetProductsByCategoryID(categoryID)のメソッドを呼び出すように ObjectDataSource をProductsBLL構成します。

図 7: ObjectDataSource でメソッドを呼び出す GetProductsByCategoryID(categoryID) (クリックするとフルサイズの画像が表示されます)

メソッドは GetProductsByCategoryID(categoryID) 入力パラメーターを受け取るので、ウィザードの最後の手順でパラメーター値のソースを指定できます。選択したカテゴリの製品を表示するには、パラメーターを DropDownList から Categories プルします。

図 8: 選択したカテゴリ DropDownList からパラメーター値を取得 categoryID する (フルサイズの画像を表示するをクリックします)

ウィザードを完了すると、GridView には各製品プロパティの BoundField が含まれます。これらの BoundFields をクリーンして、および UnitsOnOrder BoundFields のみがUnitsInStockProductNameUnitPrice表示されるようにしましょう。フィールドレベルの設定を残りの BoundFields に自由に追加できます (通貨としてを UnitPrice 書式設定するなど)。これらの変更を行った後、GridView の宣言型マークアップは次のようになります。

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

この時点で、選択したカテゴリに属する製品の名前、単価、在庫単位、および注文単位を示す完全に機能するマスター/詳細レポートがあります。

図 9: 選択したカテゴリの DropDownList からパラメーター値を取得 categoryID する (フルサイズの画像を表示するをクリックします)

GridView コントロールは、ヘッダー行とフッター行の両方を表示できます。これらの行は、プロパティとプロパティのShowHeader値に応じてそれぞれ表示され、ShowHeader既定値Trueはと ShowFooter に設定Falseされます。ShowFooter GridView にフッターを含めるには、そのプロパティを ShowFooter に True設定するだけです。

図 10: GridView のプロパティをにTrue設定します (フルサイズのShowFooter画像を表示する場合はクリックします)

フッター行には、GridView で定義されている各フィールドのセルがあります。ただし、これらのセルは既定では空です。ブラウザーで進行状況を確認してください。プロパティを ShowFooter に True設定すると、GridView には空のフッター行が含まれます。

図 11: GridView にフッター行が含まれるようになりました (フルサイズの画像を表示する場合をクリックします)

図 11 のフッター行は、背景が白であるため目立ちません。では、濃い赤色の背景をFooterStyle指定する CSS クラスStyles.cssを作成し、Theme のスキンファイルをDataWebControls構成GridView.skinして、この CSS クラスを GridView の FooterStyleCssClass プロパティに割り当ててみましょう。スキンとテーマをブラッシュアップする必要がある場合は、 ObjectDataSource を使用したデータの表示に関するチュートリアルを参照してください。

まず、次の CSS クラスをに追加します Styles.css。

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

CSS クラスの FooterStyle スタイルはクラスに HeaderStyle 似ていますが HeaderStyle、の背景色は微妙に濃く、テキストは太字で表示されます。さらに、フッター内のテキストは右揃えですが、ヘッダーのテキストは中央に配置されます。

次に、この CSS クラスを GridView のすべてのフッターに関連付けるには、Theme でファイルをGridView.skinDataWebControls開き、の CssClass プロパティをFooterStyle設定します。この追加後、ファイルのマークアップは次のようになります。

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

次のスクリーンショットに示すように、この変更によりフッターがより明確に目立ちます。

図 12: GridView のフッター行に赤みがかった背景色が表示されるようになりました (フルサイズの画像を表示するをクリックします)

手順 3: 概要データの計算

GridView のフッターを表示すると、次に直面する課題は、概要データを計算する方法です。この集計情報を計算するには、次の 2 つの方法があります。

SQL クエリを使用して、データベースに追加のクエリを発行して、特定のカテゴリの概要データを計算できます。 SQL には、データを集計するデータを指定する句と GROUP BY 共に、多数の集計関数が含まれています。次の SQL クエリでは、必要な情報が返されます。
```
SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock),
SUM(UnitsOnOrder)
FROM Products
WHERE CategoryID = categoryID
GROUP BY CategoryID
```
もちろん、このクエリをページからSummaryDataInFooter.aspx直接発行するのではなく、と ProductsBLLでProductsTableAdapterメソッドを作成します。
「データに基づくカスタム書式設定」チュートリアルで説明されているように、GridView に追加されているこの情報を計算します。GridView の RowDataBound イベントハンドラーは、データのバインド後に GridView に追加される各行に対して 1 回起動されます。このイベントのイベントハンドラーを作成することで、集計する値の実行合計を保持できます。最後のデータ行が GridView にバインドされると、合計と平均の計算に必要な情報が得られます。

私は通常、2番目のアプローチを採用しています。これは、データベースへの移動と、データアクセス層とビジネスロジック層に概要機能を実装するために必要な労力を節約しますが、どちらの方法でも十分です。このチュートリアルでは、2 番目のオプションを使用し、イベントハンドラーを使用して、実行中の合計を RowDataBound 追跡しましょう。

RowDataBound Designerで GridView を選択し、プロパティウィンドウから稲妻アイコンをクリックし、イベントをダブルクリックして、GridView のイベントハンドラーをRowDataBound作成します。または、ASP.NET 分離コードクラスファイルの上部にあるドロップダウンリストから GridView とその RowDataBound イベントを選択することもできます。これにより、ページの分離コードクラスに SummaryDataInFooter.aspx という名前ProductsInCategory_RowDataBoundの新しいイベントハンドラーが作成されます。

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

実行中の合計を維持するには、イベントハンドラーのスコープ外で変数を定義する必要があります。次の 4 つのページレベルの変数を作成します。

_totalUnitPrice型の。 Decimal
_totalNonNullUnitPriceCount型の。 Integer
_totalUnitsInStock型の。 Integer
_totalUnitsOnOrder型の。 Integer

次に、イベントハンドラーで検出されたデータ行ごとに、これら 3 つの変数をインクリメントするコードを RowDataBound 記述します。

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

イベントハンドラーは RowDataBound 、まず、DataRow を処理していることを確認します。それが確立されると、内の Northwind.ProductsRow オブジェクトe.RowにGridViewRowバインドされたインスタンスが変数 productに格納されます。次に、実行中の合計変数は、現在の製品の対応する値 (データベース NULL 値が含まれていない場合) でインクリメントされます。平均価格はこれら 2 つの数値の商であるため、実行中 UnitPrice の合計と非NULLUnitPrice レコードの数の両方を追跡します。

手順 4: フッターにサマリーデータを表示する

集計されたサマリーデータを使用して、最後の手順は GridView のフッター行に表示することです。このタスクも、イベントハンドラーを使用して RowDataBound プログラムで実行できます。イベントハンドラーは RowDataBound 、フッター行を含め、GridView にバインド されているすべての 行に対して発生することを思い出してください。そのため、次のコードを使用して、イベントハンドラーを拡張してフッター行にデータを表示できます。

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

すべてのデータ行が追加された後、フッター行が GridView に追加されるため、フッターにサマリーデータを表示する準備が整うまでに、実行中の合計計算が完了したと確信できます。最後の手順では、フッターのセルにこれらの値を設定します。

特定のフッターセルにテキストを表示するには、を使用 e.Row.Cells(index).Text = valueします。ここで、インデックス作成は Cells 0 から始まります。次のコードは、平均価格 (合計価格を製品数で割った値) を計算し、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

図 13 は、このコードが追加された後のレポートを示しています。によって、平均価格の概要情報が通貨のように書式設定される方法 ToString("c") に注意してください。

図 13: GridView のフッター行に赤みがかった背景色が表示されるようになりました (フルサイズの画像を表示するをクリックします)

まとめ

概要データの表示は一般的なレポート要件であり、GridView コントロールを使用すると、そのような情報をフッター行に簡単に含めることができます。フッター行は、GridView ShowFooter のプロパティがに設定されている場合に True 表示され、イベントハンドラーを使用してセル内のテキストを RowDataBound プログラムによって設定できます。概要データの計算は、データベースの再クエリを実行するか、ASP.NET ページの分離コードクラスのコードを使用して、サマリーデータをプログラムで計算することによって行うことができます。

このチュートリアルでは、GridView、DetailsView、および FormView コントロールを使用したカスタム書式設定の検討を終了します。次のチュートリアルでは、これらの同じコントロールを使用してデータを挿入、更新、削除する方法について説明します。

幸せなプログラミング!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、 4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジと協力しています。 Scott は独立したコンサルタント、トレーナー、ライターとして働いています。彼の最新の本は サムズ・ティーチ・自分自身 ASP.NET 24時間で2.0です。にアクセスmitchell@4GuysFromRolla.comすることも、ブログを介してアクセスすることもできます。これはでhttp://ScottOnWriting.NET確認できます。

[戻る]

Share via

GridView のフッターに概要情報を表示する (VB)

はじめに

手順 1: カテゴリ DropDownList と Products GridView の追加

手順 2: GridView にフッターを表示する

手順 3: 概要データの計算

手順 4: フッターにサマリーデータを表示する

まとめ

著者について

フィードバック

フィードバック

その他のリソース

Share via

GridView のフッターに概要情報を表示する (VB)

はじめに

手順 1: カテゴリ DropDownList と Products GridView の追加

手順 2: GridView にフッターを表示する

手順 3: 概要データの計算

手順 4: フッターにサマリー データを表示する

まとめ

著者について

フィードバック

フィードバック

その他のリソース

手順 4: フッターにサマリーデータを表示する