データベースの 1 レコードを詳しく表示する方法

サンプルコードのダウンロード (aspnettips_DetailsView.msi, 304 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。

ASP.NET 2.0では、DetailsView コントロールを使うことで、データーベースの 1 レコード分を取り出して詳しく表示させることができます。GridView コントロール中の 1 レコードを選択して、DetailsView にレコード内容を表示させるようにすると便利です。

GridView コントロールの使い方については、データベースの内容を 1 ページずつ区切って表示する方法で紹介しました。この中で作成したサンプルをベースに、今回 DetailsView コントロールを追加してみます。

次のようなページを作成します（図 1）。このページは、「データベースの内容を 1 ページずつ区切って表示する方法」で貼り付けた GridView コントロールの下に DetailsView コントロールを配置しています。

　

　図 1 今回作成するページ

今回は、次の手順でページを作成します。

DetailsView コントロールの配置
データソースの選択
GridView コントロールの設定
実行

(1) DetailsView コントロールの配置

「データベースの内容を 1 ページずつ区切って表示する方法」で作成したサンプルプログラムにある、GridView コントロールの下に、DetailsView コントロールを配置します（図 2）。

　

　図 2 DetailsView コントロール

(2) データソースの選択

DetailsView コントロール上のにある右三角形のボタンを押し、「DetailsView タスク」メニューを表示します。このメニューの「データソースの選択」ドロップダウンリストで、「新しいデータソース」を選択してください（図 3）。

　

　図 3 DetailsView タスクメニュー

「データソース構成ウィザード」ダイアログボックスが表示されるので、「Access データベース」を選択します（図 4）。

　

　図 4 データソースの種類を選択

次に mdb ファイルを選択する画面が表示されるので、使用する mdb ファイルを指定します（図 5）。

　

　図 5 データベースの選択

「Select ステートメントの構成」画面が表示されます。ここで、次のように表示するテーブルと列を選択します（図 6）。

　

　図 6 Select ステートメントの構成

その後、このダイアログで [WHERE...] ボタンを押し、「WHERE 句の追加」ダイアログボックスを表示させます。ここで、図 7 のように値を設定し、[追加] ボタンを押します。

　

　図 7 WHERE 句の追加

次に表示される「クエリのテスト」画面で、実際の DB から取得するデータを確認できます（図 8）。

　

　図 8 クエリのテスト

[完了] ボタンを押すと、AccessDataSource コントロールが自動的に配置され、DetailsView コントロールにデータベースの内容がバインドされます。

(3) GridView コントロールの設定

GridView コントロールで選択したレコードを DetailsView コントロールに表示するため、GridView コントロールを「選択可能」な設定にします。「GridView タスク」メニューを表示し、「選択を有効にする」チェックボックスをクリックして有効にしてください。また、GridView コントロールの DataKeyNames プロパティを設定しておく必要があります。もし設定されていない場合、GridView コントロールを選択し、DataKeyNames プロパティを「PubID」に設定してください（図 9）。

　

　図 9 GridView コントロールの DataKeyNames プロパティ

あと、今回は選択したレコードがすぐに分かるように、選択中の行の色を設定しておきます。GridView コントロールにある SelectedRowStyle の BackColor プロパティを #FFFFC0 にしました。

(4) 実行

実行してみます。図 10 のように、データを選択すると DetailsView にそのレコードの情報が表示されます。

　

　図 10 実行したところ