連載：Visual Studio 2005でいってみようDBプログラミング 第5回　開発生産性を向上させるASP.NET 2.0のサーバ・コントロール 山田 祥寛（http://www.wings.msn.to/） 2006/07/01

Page1 Page2 Page3 Page4

　前回までは、主にGridViewコントロールによるグリッド表の作成にフォーカスしてきましたが、ASP.NET 2.0では、そのほかにもさまざまな高機能なサーバ・コントロールを提供しています。ツリー・メニューや“パンくずリスト”などのナビゲーションUIを提供する「ナビゲーション・コントロール」やユーザー管理にかかわる諸機能を提供する「ログイン・コントロール」、My Yahoo!のようなパーソナライズ機能を実装するための「WebPartsコントロール」などなどです。

　1つ1つ挙げていくとキリがありませんが、今回は、データソース・コントロールとの連携という点にフォーカスして、DetailsView、Wizard、TreeViewコントロールについて取り上げます。これらコントロールの利用を通じて、データベース連携アプリケーションの勘所を学んでみましょう。

今回作成するサンプル・プログラムのダウンロード（vs2005db_05.zip）

GridView／DetailsViewコントロールで一覧／詳細マルチビューを生成する

　ASP.NET 2.0のデータアクセス・コントロールでGridViewコントロールと並んで、もう1つ忘れてはならないのがDetailsViewコントロールです。GridViewコントロールが一覧（グリッド）表を生成するのに対して、DetailsViewコントロールは、その名のとおり、データベースから取得した内容を単票形式（詳細ビュー）として出力します。

　DetailsViewコントロールは見掛けこそ単票形式で、GridViewコントロールとはまったくの別物であるかのように見えますが、データソース・コントロールとの関連付けやXxxxxFieldフィールドによるカラム・レイアウトのカスタマイズなどは、ほとんどGridViewコントロールと同じ要領で利用することができます。

　DetailsViewコントロールは（もちろん）それ単体で利用することも可能ですが、GridViewコントロールと併用することで、一覧表で選択された行の詳細を詳細ビューで表示する、というような機能を容易に作成できます。

　以下では、GridViewコントロールで選択された行に関連付いた出版社情報（publishテーブル*1）を詳細ビューで表示するサンプル・アプリケーションを作成してみましょう。

*1 publishテーブルは第4回で作成したものと同じです。本サンプルを動作させるには、あらかじめデータベース上にpublishテーブルを作成し、適当なデータを入力しておく必要があります。

行を選んで［選択］ボタンをクリック

図1　サンプル・アプリケーションの実行結果

一覧表（GridViewコントロール）で選択された行の詳細を詳細ビュー（DetailsViewコントロール）で表示する。

　以下に、具体的な手順を見ていきます。

［1］サーバ・コントロールを配置する

　新規に作成したWebフォーム「MultiView.aspx」に図2の要領で、サーバ・コントロールを配置します。GridViewコントロールに関しては前回でカスタマイズを行ったもの（GridView_Custom2.aspx）をコピーして貼り付けてください。

　また、DetailsViewコントロールに対してデータソースを関連付ける方法については、第2回の「GridViewコントロールにデータをバインドする」の内容を参考にしてください。

　最終的に［データ ソースの構成］ウィザードで以下のようなSQL命令が生成されていればOKです*2。

SELECT [name], [postnum], [address]        FROM [publish] WHERE ([name] = @name)

*2 本来であれば、DetailsViewコントロールの列情報も設定するべきですが、本稿では割愛します。手順はGridViewコントロールのそれと同様ですので、詳細は第3回を参照してください。

図2　MultiView.aspxのレイアウト

MultiViewコントロール（mv）を配置。 　 Viewコントロール（v1）を配置。 　 Viewコントロール（v2）を配置。 　 前回作成したグリッド表［GridView_Custom2.aspx］をコピー＆ペースト。［選択］ボタンを追加。 　 DetailsViewコントロール（dv）を配置。オートフォーマットで［シンプル］を設定。 　 Buttonコントロール（btnReturn）を配置。

　MultiViewコントロールは1つのページ上で複数のビュー（Viewコントロール）を切り替えて表示するためのサーバ・コントロールです。MultiViewコントロールで切り替え可能なビューは、Viewコントロールで定義する必要があります。Viewコントロールは必ずMultiViewコントロールの配下に配置しなければなりません*3。

*3 MultiViewコントロールに関する詳細は「.NET TIPS：［ASP.NET］MultiView／Viewコントロールでマルチビューのページを作成するには？」を参照してください。

［2］プロパティ情報を設定する

　次に、表1の要領でMultiView.aspx上に配置したサーバ・コントロールのプロパティ情報を設定します（第4回で設定した内容については割愛しています）。

コントロール プロパティ 設定値 MultiView ActiveViewIndex 0 DetailsView Width △（ブランク） Button CommandName PrevView Text 一覧へ戻る

表1　MultiView.aspxのプロパティ情報

　Viewコントロール配下のボタン・コントロール*4では、ボタンに特殊な機能を持たせるために、CommandName（コマンド名）とCommandArgument（コマンド引数）プロパティに設定可能な予約済みの値が用意されています。Viewコントロールでは、これらのプロパティに対して予約値を設定しておくことで、コーディングレスでビューの切り替えを行うことができます。

*4 Button、LinkButton、ImageButtonなどのコントロールを指します。

　例えば、ここではCommandNameプロパティを「PrevView」に設定していますが、この場合、ボタン・クリック時に1つ前のビュー（つまり、グリッド表）に切り替えることができます。MultiView／Viewコントロールで利用可能なCommandName／CommandArgumentプロパティの値は表2のとおりです。

CommandName CommandArgument 概要 PrevView − 前のビューに切り替え NextView − 次のビューに切り替え SwitchViewByID ViewコントロールのID値 指定されたビューに切り替え SwitchViewByIndex Viewコントロールのインデックス 指定されたビューに切り替え

表2　Viewコントロール配下で利用可能な予約コマンド

［3］イベント・ハンドラを定義する

　最後に、GridViewコントロール上で［選択］ボタンをクリックしたタイミングで、詳細ビューに切り替えるイベント・ハンドラを定義します。GridView.SelectedIndexChangedイベント・ハンドラを作成し、リスト1のようなコードを記述してください。

Protected Sub grid_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)   Dim lbl As Label = _     DirectCast(grid.SelectedRow.FindControl("Label1"), Label)   sds_d.SelectParameters("name").DefaultValue = lbl.Text   mv.ActiveViewIndex = 1 End Sub

リスト1　［選択］ボタン・クリック時に実行されるコード

　SelectedRowプロパティはグリッド上の選択行を取得します。ここでは前回も紹介したFindControlメソッドを使用して、選択行上の「出版社」列のラベルを取得しているわけです（「Label1」は「出版社」列で定義されたLabelコントロールのID値です）。

　あとは、取得した出版社名を、DetailsViewコントロールに関連付いたSqlDataSourceコントロール「sds_d」のSELECTステートメントにセットするだけです。SelectParametersプロパティはSELECTステートメントで定義されたパラメータを取得します。

　最後に、MultiViewコントロールのActiveViewIndexプロパティに1をセットすることで、表示ビューを2番目のビューに切り替えることができます。インデックス値は0スタートである点に注意してください。

　以上を理解したら、MultiView.aspxを実際に実行してみましょう。図1のように一覧／詳細ビューを切り替え表示することができれば成功です。

INDEX
	Visual Studio 2005でいってみようDBプログラミング
	第5回　開発生産性を向上させるASP.NET 2.0のサーバ・コントロール
	1．GridView／DetailsViewコントロールで一覧／詳細マルチビューを生成する
	2．Wizardコントロールでウィザード形式の入力画面を作成する（1）
	3．Wizardコントロールでウィザード形式の入力画面を作成する（2）
	4．TreeViewコントロールでツリー・メニューを作成する

　

「Visual Studio 2005でいってみようDBプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）