選択可能なマスター GridView と詳細 DetailView を使用してマスター/詳細を表示する (C#)

Scott Mitchellによる

PDF をダウンロードする

このチュートリアルでは、各商品の名前と価格が [選択] ボタンとともに行に含まれている GridView について説明します。 特定の商品の [選択] ボタンをクリックすると、その完全な詳細が同じページの DetailsView コントロールに表示されます。

はじめに

前の チュートリアル では、2 つの Web ページを使用してマスター/詳細レポートを作成する方法について説明しました。"マスター" Web ページから、サプライヤーの一覧を表示しました。および選択したサプライヤーが提供する製品を一覧表示する "詳細" Web ページ。 この 2 ページのレポート形式は、1 ページにまとめることができます。 このチュートリアルでは、各商品の名前と価格が [選択] ボタンとともに行に含まれている GridView について説明します。 特定の商品の [選択] ボタンをクリックすると、その完全な詳細が同じページの DetailsView コントロールに表示されます。

図 1: [選択] ボタンをクリックすると、製品の詳細が表示されます (フルサイズの画像を表示する場合にクリックします)。

手順 1: 選択可能な GridView を作成する

2 ページのマスター/詳細レポートには、各マスター レコードにハイパーリンクが含まれており、これをクリックすると、クリックされた行の SupplierID 値がクエリ文字列で渡されてユーザーが詳細ページに送信されたことを思い出してください。 このようなハイパーリンクは、HyperLinkField を使用して各 GridView 行に追加されました。 単一ページのマスター/詳細レポートでは、クリックすると詳細が表示されるボタンが GridView 行ごとに必要になります。 GridView コントロールは、ポストバックを発生させ、その行を GridView の SelectedRow としてマークする各行の [選択] ボタンを含むように構成できます。

まず、GridView コントロールを DetailsBySelecting.aspx フォルダー内のFiltering ページに追加して、その ID プロパティを ProductsGrid に設定します。. 次に、AllProductsDataSource クラスの ProductsBLL メソッドを呼び出す GetProducts() という名前の新しい ObjectDataSource を追加します。

図 2: AllProductsDataSource という名前の ObjectDataSource を作成する (フルサイズの画像を表示する をクリックします)

図 3: ProductsBLL クラスを使用する (フルサイズの画像を表示する] をクリックします)

図 4: GetProducts() メソッドを呼び出すように ObjectDataSource を構成する (フルサイズの画像を表示する をクリックします)。

GridView のフィールドを編集して、ProductName と UnitPrice を除くすべての BoundField を削除します。 また、必要に応じてこれらの BoundFields を自由にカスタマイズできます。たとえば、UnitPrice BoundField を通貨として書式設定したり、BoundFields の HeaderText プロパティを変更したりできます。 これらの手順は、GridView のスマート タグから [列の編集] リンクをクリックするか、宣言構文を手動で構成することで、グラフィカルに実行できます。

図 5: ProductName と BoundFields を除くすべての UnitPrice を削除します (フルサイズの画像を表示する をクリックします)。

GridView の最終的なマークアップは次のとおりです。

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

次に、GridView を選択可能としてマークする必要があります。これにより、各行に [選択] ボタンが追加されます。 これを行うには、GridView のスマート タグの [選択を有効にする] チェック ボックスをオンにするだけです。

図 6: GridView の行を選択可能にする (フルサイズの画像を表示する をクリックします)

[選択を有効にする] オプションをオンにすると、CommandField が ProductsGrid GridView に追加され、その ShowSelectButton プロパティが True に設定されます。 これにより、図 6 に示すように、GridView の行ごとに [選択] ボタンが表示されます。 既定では、[選択] ボタンは LinkButton としてレンダリングされますが、代わりに CommandField の ButtonType プロパティを介して Button または ImageButton を使用できます。

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

GridView 行の [選択] ボタンをクリックすると、ポストバックが発生し、GridView の SelectedRow プロパティが更新されます。 SelectedRowプロパティに加えて、GridView には SelectedIndex、SelectedValue、SelectedDataKey プロパティが用意されています。 SelectedIndex プロパティは選択した行のインデックスを返しますが、SelectedValueプロパティと SelectedDataKey プロパティは GridView の DataKeyNames プロパティに基づいて値を返します。

この DataKeyNames プロパティは、1 つ以上のデータ フィールド値を各行に関連付けるために使用され、一般的に、基になるデータからの一意の識別情報を各 GridView 行に関連付けるために使用されます。 SelectedValue プロパティは、選択した行の最初の DataKeyNames データ フィールドの値を返し、SelectedDataKey プロパティは、選択した行の DataKey オブジェクトを返します。このオブジェクトには、その行の指定されたデータ キー フィールドのすべての値が含まれています。

DataKeyNames プロパティは、Designer を使用してデータ ソースを GridView、DetailsView、または FormView にバインドする際に、一意に識別されるデータ フィールドに自動的に設定されます。 このプロパティは、前のチュートリアルでは自動的に設定されていましたが、そこでの例は DataKeyNames プロパティを指定しなくても機能します。 しかし、このチュートリアルでの選択可能な GridView、および挿入、更新、削除について検討する今後のチュートリアルでは、DataKeyNames プロパティを適切に設定する必要があります。 ここで、GridView の DataKeyNames プロパティが ProductID に設定されていることを確認してください。

ここまでの進行状況をブラウザーで確認してみましょう。 GridView には、すべての商品の名前と価格が [選択] LinkButton とともに一覧表示されていることに注意してください。 [選択] ボタンをクリックするとポストバックが発生します。 手順 2 では、選択した商品の詳細を表示することによって、DetailsView でこのポストバックに応答する方法について説明します。

図 7: 各製品行には、リンク ボタンの選択が含まれています (フルサイズの画像を表示する をクリックします)。

選択した行の強調表示

ProductsGrid GridView には、選択した行のビジュアル スタイルを指定するために使用できる SelectedRowStyle プロパティがあります。 これを適切に使用して、現在選択されている GridView の行をより明確に示すことで、ユーザーのエクスペリエンスを向上させることができます。 このチュートリアルでは、選択した行を黄色の背景で強調表示しましょう。

前のチュートリアルと同様に、外観に関連する設定は CSS クラスとして定義するようにしましょう。 そのため、Styles.css という名前の新しい CSS クラスを SelectedRowStyle に作成します。

.SelectedRowStyle
{
    background-color: Yellow;
}

この CSS クラスをこのチュートリアル シリーズの "すべて" の GridView の SelectedRowStyle プロパティに適用するには、次に示すように テーマの GridView.skin スキンを DataWebControls 設定を含むように編集します。SelectedRowStyle

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

この追加により、選択した GridView の行が黄色の背景色で強調表示されるようになりました。

図 8: GridView の SelectedRowStyle プロパティを使用して選択した行の外観をカスタマイズする (フルサイズの画像を表示する をクリックします)。

手順 2: 選択した商品の詳細を DetailsView に表示する

ProductsGrid GridView が完了したら、あとは、選択した特定の商品に関する情報を表示する DetailsView を追加するだけです。 GridView の上に DetailsView コントロールを追加して、ProductDetailsDataSource という名前の新しい ObjectDataSource を作成します。 この DetailsView に選択した商品に関する特定の情報を表示する必要があるため、ProductDetailsDataSource クラスの ProductsBLL メソッドを使用するように GetProductByProductID(productID) を構成します。

図 9: ProductsBLL クラスの GetProductByProductID(productID) メソッドを呼び出す (フルサイズの画像を表示する をクリックします)。

GridView コントロールの productID プロパティから SelectedValue パラメーターの値が取得されるようにします。 前に説明したように、GridView の SelectedValue プロパティは、選択した行の最初のデータ キー値を返します。 したがって、GridView の DataKeyNames プロパティを ProductID に設定して、選択した行の ProductID 値が SelectedValue から返されるようにする必要があります。

図 10: productID パラメーターを GridView の SelectedValue プロパティに設定します (フルサイズの画像を表示する をクリックします)。

productDetailsDataSource ObjectDataSource が正しく構成され、DetailsView にバインドされたら、このチュートリアルは完了です。 ページに最初にアクセスしたときは行が選択されていないため、GridView の SelectedValue プロパティは null を返します。 NULL ProductID値を持つ製品がないため、GetProductByProductID(productID) メソッドによってレコードは返されません。つまり、DetailsView は表示されません (図 11 を参照)。 GridView 行の [選択] ボタンをクリックすると、ポストバックが発生し、DetailsView が更新されます。 今度は、GridView の SelectedValue プロパティは選択した行の ProductID を返し、GetProductByProductID(productID) メソッドによってその特定の商品に関する情報を含む ProductsDataTable が返されて、DetailsView にこれらの詳細が表示されます (図 12 を参照)。

図 11: 最初にアクセスすると、GridView のみが表示されます (フルサイズの画像を表示する をクリックします)。

図 12: 行を選択すると、製品の詳細が表示されます (フルサイズの画像を表示する をクリックします)。

まとめ

このチュートリアルと前の 3 つのチュートリアルでは、マスター/詳細レポートを表示するためのさまざまな手法を見てきました。 このチュートリアルでは、選択可能な GridView を使用してマスター レコードを格納し、DetailsView を使用して選択したマスター レコードの詳細を同じページに表示することを検討しました。 前のチュートリアルでは、DropDownLists を使用してマスター/詳細レポートを表示する方法と、ある Web ページにマスター レコードを表示し、別の Web ページに詳細レコードを表示する方法について検討しました。

このチュートリアルで、マスター/詳細レポートの検討は終了です。 次のチュートリアルからは、GridView、DetailsView、FormView を使用して、カスタマイズされた書式設定の確認を開始します。 これらのコントロールの外観を、それらにバインドされたデータに基づいてカスタマイズする方法、GridView のフッター内のデータを集計する方法、テンプレートを使用してレイアウトをより詳細に制御する方法について説明します。

プログラミングに満足!

著者について

7 冊の ASP/ASP.NET 書籍の著者であり、4GuysFromRolla.com の創設者である Scott Mitchell は、1998 年から Microsoft Web テクノロジを使用しています。 Scott は、独立したコンサルタント、トレーナー、ライターとして働いています。 彼の最新の本は サムズ・ティーチ・セルフ ASP.NET 24時間で2.0です。 彼には mitchell@4GuysFromRolla.comで連絡できます。

特別な感謝

このチュートリアル シリーズは、多くの役に立つ校閲者によってレビューされました。 このチュートリアルのリード レビュー担当者は Hilton Giesenow です。 今後の MSDN の記事を確認することに関心がありますか? その場合は、mitchell@4GuysFromRolla.comにメッセージを送ってください。