|
.NET TIPS ［ASP.NET］GridView＋DetailsViewコントロールで一覧／明細画面を作成するには？［2.0、3.0、3.5、C#、VB］山田 祥寛2010/02/25 |
 |
|
|
|
ある情報を一覧表（グリッド表）で表示しておいて、詳細情報は明細フォームで表示するという仕組みは、さまざまなサイトでよく見かける。ASP.NETでは、このような典型的な仕組みも、GridView／DetailsViewコントロールを使えばコーディングレスで実現できる。
 |
 |
| GridView／DetailsViewコントロールで実装した一覧画面（上）と詳細画面（下） |
本稿では、このような一覧／詳細画面を実装する手順について解説する。なお、本稿では一覧ビューとしては「TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？」で作成したサンプルを、詳細ビューとしては「TIPS：［ASP.NET］DetailsViewコントロールの列表示をカスタマイズするには？」で作成したサンプルを、それぞれ利用する。GridView／DetailsViewコントロールを実装する手順そのものについては、それぞれ対応するTIPSをご確認いただきたい。
1. GridViewコントロールに［詳細］列を追加する
まずは、一覧画面（MList.aspx）に詳細画面（MDetails.aspx）に移動するための［詳細］列を追加する。GridViewコントロールの列を編集するには、GridViewコントロール右肩のタスク・メニューから［列の編集］を選択する。
 |
| ［フィールド］ダイアログ |
上の画面のような［フィールド］ダイアログが表示されるので、［使用できるフィールド］欄から［HyperLinkField］（ハイパーリンク列）を選択し、［選択されたフィールド］欄の先頭に来るように追加する（列の順番は［↑］［↓］ボタンで変更できる）。
あとは［選択されたフィールド］欄で、追加したHyperLinkField列を選択したうえで、右側のプロパティ・グリッドから以下のようにプロパティを設定するだけだ。
| プロパティ | 概要 | 設定値 |
| DataNavigateUrlFormatString | リンク先のURLを表す書式文字列 | MDetails.aspx?isbn={0} |
| DataNavigateUrlFields | 書式文字列に埋め込むパラメータ | isbn |
| Text | リンク文字列 | 詳細 |
 |
||
| HyperLinkFieldプロパティの設定 | ||
これで詳細画面（MDetails.aspx）への以下のようなハイパーリンクが生成されることになる。
<a href="MDetails.aspx?isbn=978-4-7980-1616-0">詳細</a> |
2. DetailsViewコントロールに絞り込み条件を追加する
クエリ情報isbn経由で渡されたパラメータ値を受け取れるように、DetailsViewコントロール（正確には、DetailsViewコントロールが使用しているSqlDataSourceコントロール）の設定を変更する。
DetailsViewコントロールがクエリ情報で表示データを絞り込めるようにするには、コントロール右肩のタスク・メニューから［データ ソースの構成］を選択する。データソース構成ウィザードが起動するので、［次へ］ボタンで［Select ステートメントの構成］ページまで進め、［WHERE］ボタンをクリックする。
 |
| ［WHERE 句の追加］ダイアログ |
［WHERE 句の追加］ダイアログが起動するので、上の画面の要領で必要な情報を入力する。これでクエリ情報（QueryString）isbnで指定された値とisbnフィールドの値が等しいレコードのみを取得するという意味になる。データソース構成ウィザードの下部に、以下のようなSELECT命令文が生成されていることも確認してほしい。
SELECT * FROM [book] WHERE ([isbn] = @isbn) |
ウィザードを閉じると、以下のようにDetailsViewコントロールの行フィールドを再生成するかどうかを聞かれるが、取得列などの情報を変更したわけではないので、ここでは［いいえ］ボタンを選択する。［はい］ボタンを選択してしまうと、DetailsViewコントロールに設定した各列の設定が消去されてしまうので注意されたい。
 |
| データソース更新時の警告ダイアログ |
また、DetailsViewコントロールのEmptyDataTextプロパティに対しては、「対応するデータが存在しません。」と設定しておこう。EmptyDataTextプロパティは、指定キーに対応するデータを取得できなかった場合に表示するテキストを表すものだ。
本来、一覧表から［詳細］リンクをたどってくれば、データがないということはないはずだが、詳細画面に直接アクセスされた場合に備えた設定である。これによって、直接にページにリンクされた場合などに以下のように表示されるようになる。
 |
| ページに直接リンクされた場合の結果 |
以上で一覧／詳細画面をリンクするための最小限の手順は完了である。一覧表から適当な行の［詳細］リンクをクリックし、対応する詳細画面が表示されることを確認してほしい。
なお、本稿ではDetailsViewコントロールを例に詳細画面を構築しているが、もちろん、FormViewコントロールでも同様に実装が可能だ。FormViewコントロールについては、「TIPS：［ASP.NET］FormViewコントロールで単票を表示するには？」も参照されたい。
| 利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム 処理対象：GridViewコントロール 使用ライブラリ：GridViewコントロール 関連TIPS：［ASP.NET］GridViewコントロールで各列の表示をカスタマイズするには？ 関連TIPS：［ASP.NET］DetailsViewコントロールの列表示をカスタマイズするには？ 関連TIPS：［ASP.NET］FormViewコントロールで単票を表示するには？ |
 |
「.NET TIPS」 |
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
