.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コントロールで単票を表示するには?」も参照されたい。End of Article

利用可能バージョン:.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
[ASP.NET]DetailsViewコントロールで単票を表示するには?
[ASP.NET]DetailsViewコントロールの列表示をカスタマイズするには?
[ASP.NET]FormViewコントロールで単票を表示するには?
[ASP.NET]GridViewコントロールを階層表示させるには?
[ASP.NET]GridViewコントロールの表示データを特定条件で絞り込むには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH