ASP.NET 2.0 の GridView の例: 詳細データへのドリルダウン

[アーティクル]
06/24/2011

ここをクリックして TOC に戻ります。

[ GridView に表示されるデータのフィルター処理] セクションで、ユーザーが DropDownList に製品の一覧を表示できるようにする方法を確認し、選択した製品について、 GridView で製品の注文の詳細を一覧表示する方法を確認しました。このデモは、特定の製品の注文の詳細を表示するのに適していますが、製品の注文の詳細を表示することが二次的な懸念事項として、製品情報の表示に重点を置きたい場合を想像してください。このような状況では、特定の GridView 行を "選択" する方法で、製品の GridView を表示する必要がある場合があります。そうすると、選択した製品の注文の詳細が別の GridView に表示されます。

この一般的な種類のレポートは、1 つのレベル (製品の一覧) でデータを表示し、特定の製品に固有の情報 (関連付けられている注文の詳細の一覧) をドリルダウンできるため、しばしばドリルダウンレポートと呼ばれます。多くのプロパティを持つデータを表示するときに、もう 1 つの一般的な種類のドリルダウンレポートが使用されます。たとえば、Northwind データベースには、多数のフィールドを含む Customers テーブルがあります。 GridView で顧客に関する情報を表示する場合、GridView の Customers テーブルのすべてのフィールドを一覧表示するのは実用的でない場合があります。むしろ、最もドイツ語のフィールドのみを各行に表示し、クリックすると特定の顧客の完全な情報を表示する [詳細] ボタンを表示する方が理にかなっている場合があります。

これらの種類のドリルダウンレポートはどちらも 、GridView を使用して簡単に実行でき、プログラミングは必要ありません。次の 2 つのセクションでは、ドリルダウンレポートをいかに簡単に作成できるかを確認します。

1 から多へのドリルダウン

Northwind データベース内の多くの一対多リレーションシップの 1 つは、Orders テーブルまたは Order Details テーブルの間にあります。 Orders テーブルには、注文ごとに 1 つのレコードが含まれています。注文は 1 から多くの品目で構成され、各品目は Order Details テーブルにレコードとして格納されます。 1 対多のドリルダウンレポートを示すために、1 つの GridView で使用可能なすべての注文を一覧表示する ASP.NET ページを作成します。この GridView の各行には、[注文の詳細の表示] ボタンがあり、クリックすると特定の注文の品目が別の GridView に表示されます。

これを実現するには、まず、Orders テーブルからすべてのレコードを取得する ページに SqlDataSource を追加します。次に、 ページに GridView を追加し、この SqlDataSource にバインドします。 GridView から項目を選択するには、GridView のスマートタグの [選択を有効にする] リンクをチェックします。これにより、CommandField が [選択] ボタンを使用して GridView に追加されます。

メモ CommandField は、前に調べた BoundField や ImageField などの GridView 列型のもう 1 つの種類です。 CommandField は、選択、削除、更新のボタンなどの一般的なコマンドボタンを表示するために使用されます。 CommandField のその他の例については、 GridView の基になるデータの削除と編集に関するデモを参照してください。

次に、選択した注文の注文詳細の適切なサブセットを返す SqlDataSource が必要です。これを行うには、ページに別の SqlDataSource を追加し、Order Details テーブルから適切な列を選択するように構成します。次に、[WHERE] ボタンをクリックし、[ OrderID ] フィールドに WHERE 条件を追加し、Orders GridView の SelectedValue に関連付けられたパラメーターを作成します (図 29 を参照)。

ms972814.gridview_fg29(en-us,MSDN.10).gif

図 29

最後に、別の GridView をページに追加し、注文の詳細 SqlDataSource にバインドします。この 2 つの手順を完了すると、ASP.NET ページの宣言構文は次のようになります。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:50%;float:left;padding-right:10px;">
        <h2>Select an Order from the Left...</h2>
            <asp:SqlDataSource ID="ordersDataSource" Runat="server" 
             SelectCommand="SELECT dbo.Orders.OrderID, 
             dbo.Customers.CompanyName, dbo.Orders.OrderDate FROM 
             dbo.Orders INNER JOIN dbo.Customers ON dbo.Orders.CustomerID 
             = dbo.Customers.CustomerID"
                ConnectionString=
                "<%$ ConnectionStrings:NWConnectionString %>">
            </asp:SqlDataSource>
            <asp:GridView ID="orderGridView" Runat="server" 
             DataSourceID="ordersDataSource" DataKeyNames="OrderID"
                AutoGenerateColumns="False" AllowPaging="True" 
                BorderWidth="1px" BackColor="#DEBA84"
                CellPadding="3" CellSpacing="2" BorderStyle="None" 
                BorderColor="#DEBA84" 
                OnPageIndexChanged="orderGridView_PageIndexChanged">
                <FooterStyle ForeColor="#8C4510" 
                 BackColor="#F7DFB5"></FooterStyle>
                <PagerStyle ForeColor="#8C4510" 
                   HorizontalAlign="Center"></PagerStyle>
                <HeaderStyle ForeColor="White" Font-Bold="True" 
                BackColor="#A55129"></HeaderStyle>
                <Columns>
                    <asp:CommandField ShowSelectButton="True" 
                     SelectText="View Order Details"></asp:CommandField>
                    <asp:BoundField HeaderText="Company" 
                     DataField="CompanyName" 
                     SortExpression="CompanyName"></asp:BoundField>
                    <asp:BoundField HeaderText="Order Date" 
                      DataField="OrderDate" SortExpression="OrderDate"
                        DataFormatString="{0:d}">
                        <ItemStyle HorizontalAlign="Right"></ItemStyle>
                    </asp:BoundField>
                </Columns>
                <SelectedRowStyle ForeColor="White" Font-Bold="True" 
                   BackColor="#738A9C"></SelectedRowStyle>
                <RowStyle ForeColor="#8C4510" BackColor="#FFF7E7"></RowStyle>
            </asp:GridView>
    </div>
    <div>
        <h2>... and View the Order Details on the Right</h2>
        <asp:SqlDataSource ID="orderDetailsDataSource" Runat="server" 
           SelectCommand="SELECT dbo.[Order Details].OrderID, 
dbo.Products.ProductName, dbo.[Order Details].UnitPrice, 
dbo.[Order Details].Quantity, dbo.[Order Details].Discount 
FROM dbo.[Order Details] INNER JOIN dbo.Products 
ON dbo.[Order Details].ProductID = dbo.Products.ProductID 
WHERE dbo.[Order Details].OrderID = @OrderID"
            ConnectionString="<%$ ConnectionStrings:NWConnectionString %>">
            <SelectParameters>
                <asp:ControlParameter ControlID="orderGridView" 
                  Name="OrderID" Type="Int32" 
                  PropertyName="SelectedValue" />
            </SelectParameters>
        </asp:SqlDataSource>
        
        <asp:GridView ID="detailsGridView" Runat="server" 
            DataSourceID="orderDetailsDataSource"
            AutoGenerateColumns="False" BorderWidth="1px" 
            BackColor="#DEBA84" CellPadding="3"
            CellSpacing="2" BorderStyle="None" BorderColor="#DEBA84">
            <FooterStyle ForeColor="#8C4510" 
               BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" 
                HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" Font-Bold="True" 
                BackColor="#A55129"></HeaderStyle>
            <Columns>
                <asp:BoundField HeaderText="Product" 
                    DataField="ProductName" 
                    SortExpression="ProductName"></asp:BoundField>
                <asp:BoundField HeaderText="Unit Price" 
                  DataField="UnitPrice" SortExpression="UnitPrice"
                    DataFormatString="{0:c}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Quantity" 
                  DataField="Quantity" SortExpression="Quantity">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Discount" 
                   DataField="Discount" SortExpression="Discount"
                    DataFormatString="{0:P}">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </asp:BoundField>
            </Columns>
            <SelectedRowStyle ForeColor="White" Font-Bold="True" 
              BackColor="#738A9C"></SelectedRowStyle>
            <RowStyle ForeColor="#8C4510" BackColor="#FFF7E7"></RowStyle>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

マークアップを調べるときは、次の点に注意してください。

GridView に [選択] ボタンを追加すると、CommandField が追加されます。既定では、[選択] ボタンのテキストは "選択" になりますが、これは SelectText プロパティを使用して変更できます。 SelectImageUrl プロパティにイメージへのパスを指定することで、[選択] ボタンにイメージを使用することもできます。
orderGridViewGridView の DataKeyNames プロパティは OrderID に設定されています。 GridView の特定のレコードが選択されている場合、GridView の SelectedValue プロパティはその行の OrderID 値に設定されます。
orderDetailsDataSourceSqlDataSource には、SELECTParameters> セクションで値が指定されている WHERE 句 (@OrderID) に<パラメーターが含まれています。 <asp:ControlParameter は、>パラメーターが Int32 型であり、その値を orderGridView **GridView'**s SelectedValue プロパティに設定する必要があることを示します。

図 30 と図 31 は、動作中のドリルダウンレポートを示しています。最初のページ読み込みでは、 注文の GridView のみが表示されることに注意してください (図 30 を参照)。注文の [注文の詳細の表示] リンクがクリックされると、ポストバックが発生し、注文の詳細 GridView が、選択した注文に関連付けられているすべての注文詳細レコードを返す SqlDataSource にバインドされます (図 31 を参照)。

図 30 (図をクリックすると大きな画像が表示されます)

図 31 (図をクリックすると大きな画像が表示されます)

このデモの小さな問題の 1 つは、GridView のページング時に GridView の SelectedIndex の注文が変更されないことです。これは、1 ページ目で 2 番目の注文の [注文の詳細の表示] をクリックすると、その注文の詳細が期待どおりに右側に表示されることを意味します。ただし、ページ 2 をクリックしてアクセスすると、2 ページ目の 2 番目の注文が選択され、その詳細が右側に表示されます。ページをステップ実行するときに SelectedIndex をリセットしたいと思いました。これを実現するには、 GridView の PageIndexChanged イベントのイベントハンドラーを作成するだけです。 PageIndexChanged イベントは、ユーザーが新しいデータページを要求するたびに発生します。このイベントハンドラーでは、次のコードスニペットに示すように、 GridViewの SelectedIndex を -1 にリセットします。

PageIndexChanged イベントハンドラー (Visual Basic)

Sub orderGridView_PageIndexChanged(ByVal sender As Object, _
   ByVal e As System.EventArgs)
    orderGridView.SelectedIndex = -1
End Sub
The PageIndexChanged Event Handler (C#)
void orderGridView_PageIndexChanged(object sender, EventArgs e)
{
    orderGridView.SelectedIndex = -1;
}

概要から詳細へのドリルダウン

ドリルダウンレポートのもう 1 つのフレーバーは、簡潔なビューから詳細ビューに拡張されています。たとえば、Northwind データベースの Customers テーブルには多数のフィールドが含まれており、 GridView 内のすべてのフィールドを表示すると、読みにくい幅の広い扱いにくい GridView になります。すべての顧客関連フィールドを表示するのではなく、関連するフィールド (CompanyName と ContactName) を各行の [顧客の詳細の表示] リンクと共に表示する方が適切な場合があります。エンドユーザーが特定の顧客のすべてのフィールドを表示する場合は、その顧客の詳細リンクをクリックできます。

詳細ドリルダウンレポートに対してこのような概要を作成する方法は、 DetailsView Web コントロールを ASP.NET 2.0 で非常に簡単に作成できます。これは、情報を一度に 1 レコードずつ表示するように設計されています ( GridView など、多数のレコードを一度に表示するのではなく)。後ほど説明しますが、 DetailsView を使用して特定の顧客の完全な詳細を表示することは、 GridView の追加と構成と同じくらい簡単です。

作業を開始するには、Customers テーブルから CustomerID、 CompanyName、 ContactName の各フィールドのみを取得し、 GridView に表示する必要があります。前のドリルダウンレポートの例と同様に、これは SqlDataSource を追加して構成し、 GridView をバインドすることによって実現されます。次に、Customers テーブルのすべてのフィールドを取得する別の SqlDataSource を追加します。

この時点で、前のドリルダウン例と同様に WHERE 句を追加し、パラメーターを顧客の GridView にバインドすることもできますが、この演習では、顧客 DetailsView の正しい顧客にアクセスするための別の方法を試してみましょう。 WHERE 句を追加せずに 2 番目の SqlDataSource を構成した後、デザインビューから SqlDataSource のプロパティに移動し、SqlDataSource の FilterExpression プロパティ CustomerID=''{0} に次を追加します。次に、 FilterParameters プロパティをクリックして、[パラメーターコレクションエディター] ダイアログボックスを開きます。このダイアログボックスは、前のドリルダウンレポートの例の WHERE 句パラメーターを構成したときに、図 29 に示したダイアログボックスとよく似た外観になります。顧客の GridView に基づいてパラメーターを設定します。

最後の手順では、 DetailsView をページに追加します。 [ツールボックス] からコントロールをドラッグアンドドロップするだけで DetailsView を追加し、そのスマートタグから、先ほど構成したデータソースコントロールに関連付けます。

このページを構成すると、ページの宣言構文は次のマークアップのようになります。前の例と同様に、このページを作成するためにソースコードは必要ありません。このマークアップを調べるときは、次の点に注意してください。

customerGridViewGridView の DataKeyNames プロパティは CustomerID に設定されています。前のドリルダウンレポートの例で説明したように、 これは、GridView 行を選択すると、 GridView の SelectedValue プロパティがその行の CustomerID の値に設定されることを示しています。
customerDetailsDataSourceSqlDataSource の SelectCommand には WHERE 句は含まれません。代わりに、FilterExpression -CustomerID=''{0} と共<に、filter パラメーター () に customerGridView GridView の SelectedValue プロパティの値があることを示す FilterParameters> セクションが含まれています。{0}

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:50%;float:left;padding-right:10px;">
        <h2>Select a Customer from the Left...</h2>
        <asp:SqlDataSource ID="customerDataSource" Runat="server" 
           SelectCommand="SELECT [CustomerID], [CompanyName], 
           [ContactName] FROM [Customers] ORDER BY [CompanyName]"
            ConnectionString="<%$ ConnectionStrings:NWConnectionString %>">
        </asp:SqlDataSource>
        <asp:GridView ID="customerGridView" Runat="server" 
            DataSourceID="customerDataSource" DataKeyNames="CustomerID"
            AutoGenerateColumns="False" BorderWidth="1px" 
            BackColor="White" CellPadding="4"
            BorderStyle="None" BorderColor="#CC9966">
            <FooterStyle ForeColor="#330099" 
             BackColor="#FFFFCC"></FooterStyle>
            <PagerStyle ForeColor="#330099" HorizontalAlign="Center" 
             BackColor="#FFFFCC"></PagerStyle>
            <HeaderStyle ForeColor="#FFFFCC" Font-Bold="True" 
             BackColor="#990000"></HeaderStyle>
            <Columns>
                <asp:CommandField ShowSelectButton="True" 
                   SelectText="View Customer Details"></asp:CommandField>
                <asp:BoundField HeaderText="CompanyName" 
                   DataField="CompanyName" 
                   SortExpression="CompanyName"></asp:BoundField>
                <asp:BoundField HeaderText="ContactName" 
                    DataField="ContactName" 
                    SortExpression="ContactName"></asp:BoundField>
            </Columns>
            <SelectedRowStyle ForeColor="#663399" Font-Bold="True" 
               BackColor="#FFCC66"></SelectedRowStyle>
            <RowStyle ForeColor="#330099" BackColor="White"></RowStyle>
        </asp:GridView>
    </div>
    <div>
        <h2>... and See Their Detailed Information on the Right</h2>
        <asp:SqlDataSource ID="customerDetailsDataSource" 
            Runat="server" 
            SelectCommand="SELECT [CompanyName], [ContactName], 
              [ContactTitle], [Address], [City], [Region], [PostalCode], 
              [Country], [Phone], [Fax], [CustomerID] FROM [Customers]"
            ConnectionString="<%$ ConnectionStrings:NWConnectionString %>" 
               FilterExpression="CustomerID='{0}'">
            <FilterParameters>
                <asp:ControlParameter Name="CustomerID" DefaultValue="-1" 
                   Type="String" ControlID="customerGridView"
                    PropertyName="SelectedValue"></asp:ControlParameter>
            </FilterParameters>
        </asp:SqlDataSource>
        <asp:DetailsView ID="customerDetailsView" Runat="server" 
            DataSourceID="customerDetailsDataSource"
            BorderWidth="1px" BackColor="White" CellPadding="4" 
            BorderStyle="None" BorderColor="#CC9966"
            AutoGenerateRows="False">
            <FooterStyle ForeColor="#330099" 
                 BackColor="#FFFFCC"></FooterStyle>
            <RowStyle ForeColor="#330099" BackColor="White"></RowStyle>
            <PagerStyle ForeColor="#330099" HorizontalAlign="Center" 
               BackColor="#FFFFCC"></PagerStyle>
            <Fields>
                <asp:BoundField HeaderText="CompanyName" 
                  DataField="CompanyName" 
                  SortExpression="CompanyName"></asp:BoundField>
                <asp:BoundField HeaderText="ContactName" 
                  DataField="ContactName" 
                  SortExpression="ContactName"></asp:BoundField>
                <asp:BoundField HeaderText="ContactTitle" 
                  DataField="ContactTitle" 
                  SortExpression="ContactTitle"></asp:BoundField>
                <asp:BoundField HeaderText="Address" 
                  DataField="Address" 
                  SortExpression="Address"></asp:BoundField>
                <asp:BoundField HeaderText="City" DataField="City" 
                  SortExpression="City"></asp:BoundField>
                <asp:BoundField HeaderText="Region" DataField="Region" 
                  SortExpression="Region"></asp:BoundField>
                <asp:BoundField HeaderText="PostalCode" 
                  DataField="PostalCode" 
                  SortExpression="PostalCode"></asp:BoundField>
                <asp:BoundField HeaderText="Country" DataField="Country" 
                  SortExpression="Country"></asp:BoundField>
                <asp:BoundField HeaderText="Phone" DataField="Phone" 
                  SortExpression="Phone"></asp:BoundField>
                <asp:BoundField HeaderText="Fax" DataField="Fax" 
                  SortExpression="Fax"></asp:BoundField>
            </Fields>
            <FieldHeaderStyle ForeColor="#FFFFCC" Font-Bold="True" 
                  BackColor="#990000"></FieldHeaderStyle>
            <HeaderStyle ForeColor="#FFFFCC" Font-Bold="True" 
                  BackColor="#990000"></HeaderStyle>
            <EditRowStyle ForeColor="#663399" Font-Bold="True" 
                  BackColor="#FFCC66"></EditRowStyle>
        </asp:DetailsView>
        </div>    
    </form>
</body>
</html>

図 32 と図 33 は、動作中のドリルダウンレポートを示しています。

図 32 (図をクリックすると大きな画像が表示されます)

図 33 (図をクリックすると大きな画像が表示されます)

次のセクション: フッターにサマリーデータを表示する

ASP.NET 2.0 の GridView の例: 詳細データへのドリルダウン

1 から多へのドリルダウン

概要から詳細へのドリルダウン

その他のリソース