.NET TIPS

[ASP.NET]DetailsViewコントロールの列表示をカスタマイズするには?[2.0、3.0、3.5、C#、VB]

山田 祥寛
2009/02/26

 「TIPS:[ASP.NET]DetailsViewコントロールで単票を表示するには?」で紹介したように、DetailsViewコントロールはデータ・バインドによりデータを表示できる。しかしもちろん、データをそのままバインドするばかりではない。バインドしたデータを整形したり、単なるテキストとしてではなくハイパーリンクや画像として表示したりすることも可能である。

 1つの活用例として、ここではDetailsViewコントロールの表示を以下のようにカスタマイズしてみよう。

  • 各列のヘッダ行を日本語表記で置き換える
  • price列を「\9,999」の形式に整形する
  • published列を「YYYY年MM月DD日」の形式に整形する
  • isbn列の値に基づいて、対応する表紙画像を表示する(画像データは「http://www.wings.msn.to/books/<ISBN値>/<ISBN値>.jpg」に保存されているものとする)
カスタマイズされたDetailsViewコントロールの表示

 DetailsViewコントロールの列設定をカスタマイズするには、DetailsViewコントロールのタスク・メニューから[フィールドの編集]を選択する。

[フィールド]ダイアログ
DetailsViewコントロールの表示列は、[フィールド]ダイアログからXxxxxFieldフィールドを設定することでカスタマイズすることができる。

 [フィールド]ダイアログや、XxxxxFieldフィールド(System.Web.UI.WebControls.DataControlFieldクラスの派生クラス)については、「TIPS:[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?」を始め、「TIPS:[ASP.NET]GridViewコントロールでハイパーリンクを表示するには?」「 TIPS:[ASP.NET]GridViewコントロールで画像を表示するには?」が詳しいので、併せてご参照いただきたい。

 ここでは、以下の表の要領でそれぞれの列情報を設定するものとする。

フィールド プロパティ 設定値
ImageField(追加) DataAlternateTextField title
DataImageUrlField isbn
DataImageUrlFormatString http://www.wings.msn.to/books/{0}/{0}.jpg
HeaderText 表紙画像
ReadOnly True
InsertVisible False
BoundField(isbn) DataField isbn
HeaderText ISBNコード
ReadOnly True
SortExpression isbn
BoundField(title) DataField title
HeaderText 書名
SortExpression title
BoundField(price) DataField price
HeaderText 価格
SortExpression price
DataFormatString {0:¥#,###}
HtmlEncode False
BoundField(publish) DataField publish
HeaderText 出版社
SortExpression publish
BoundField(published) DataField published
HeaderText 刊行日
SortExpression published
DataFormatString {0:yyyy年MM月dd日}
CommandField ShowDeleteButton True
ShowEditButton True
ShowInsertButton True
[フィールド]ダイアログにおける列情報の設定

 GridViewコントロールの場合と比べてみても、ほとんど同じ要領で設定できることが理解できるだろう。唯一異なる点は、DetailsViewコントロールでは新規データの登録にも対応しているということだ(GridViewコントロールは更新/削除のみ)。

 そのため、例えばフィールド共通のInsertVisibleプロパティ(挿入モードで列を表示するか)やCommandFieldフィールドのShowInsertButtonプロパティ([新規作成]ボタンを表示するか)などを利用することができる。

 以上を理解したら、ここまでのサンプル・プログラムを実行してみよう。冒頭の画面のように、詳細ビューの内容がカスタマイズされていることを確認してほしい。

●列レイアウトをテンプレートとして定義する

 これら標準のXxxxxFieldフィールドで賄えない内容は、TemplateFieldフィールドを使用することでテンプレートとして定義することも可能である(TemplateFieldフィールドに関しては、「TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?」が詳しいので、併せてご参照いただきたい)。

 以下では、[削除]ボタンをクリックしたタイミングで確認ダイアログを表示するような仕組みを、TemplateFieldフィールドで定義するものとする。

[削除]ボタンのクリック時に確認ダイアログを表示するサンプル
[削除]ボタンをクリックしてもすぐさまにデータは削除されずに、確認ダイアログで[はい]をクリックするまで処理待ちとなる。

1. 既存列をTemplateFieldフィールドに変換する

 TemplateFieldフィールドは1から作成しても構わないが、すでにあるフィールドの内容をカスタマイズするならば、[フィールド]ダイアログから変換を行った方が手っ取り早い。ここではダイアログ左下の[選択されたフィールド]欄からCommandFieldを選択したうえで、ダイアログ右下の[このフィールドをTemplateFieldに変換します。]リンクをクリックする。

[フィールド]ダイアログ
既存のCommandFieldをTemplateFieldに変換する。

2. TemplateFieldで定義されたテンプレートを編集する

 次に、TemplateFieldフィールドのItemTemplateテンプレート(表示モードで使用するテンプレート)を定義する。TemplateFieldフィールドには、そのほかにも以下のようなテンプレートが用意されているが、これらテンプレートのレイアウト/設定はBoundFieldフィールドから引き継がれているものをそのまま使用できるので、ここでは設定の必要はない。

テンプレート 概要
ItemTemplate データ部分(標準)
AlternatingItemTemplate データ部分(代替。1行おきにスタイルを切り替えたい場合に使用)
EditItemTemplate データ部分(編集モード)
InsertItemTemplate データ部分(挿入モード)
HeaderTemplate ヘッダ部分
TemplateFieldフィールドで編集可能なテンプレート

[参考]

 「TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?」で紹介したGridViewコントロールのTemplateFieldフィールドと比べれば分かるように、DetailsViewコントロールのそれには、いくばくかの違いがある。

 具体的には、DetailsViewコントロールではInsertItemTemplateテンプレートが定義できる代わりに、FooterTemplateテンプレートが利用できない(グリッド表と異なり、単票ビューでは各列にはフッタは存在しないのだから当然だ)。

 ちなみに、GridViewコントロールと異なる点はまだある。GridViewコントロールではグリッド表全体で定義できるテンプレートは、次の2つである。

  • PagerTemplate(ページャ部分)
  • EmptyDataTemplate(データソースが空の場合の表示)

 しかし、DetailsViewコントロールでは、上記に加えて、次のテンプレートを単票ビュー全体として定義できる。

  • HeaderTemplate(単票のヘッダ部分)
  • FooterTemplate(単票のフッタ部分)

 考え方はGridViewコントロールとDetailsViewコントロールとで大して変わるところはないが、使える項目については微妙に異なるので、注意してほしい。

 テンプレートを編集するには、DetailsViewコントロールのタスク・メニューから[テンプレートの編集]を選択する。DetailsViewコントロールの表示が通常の表示からテンプレート表示モードに切り替わるので、さらに[DetailsViewタスク(テンプレート編集モード)]の[表示]欄から[Field[6]]のItemTemplateを選択する。

Column[0] ItemTemplateテンプレート

 もともとはCommandFieldフィールドで定義されていた[編集][新規作成][削除]ボタンがLinkButtonコントロールとして配置されているはずだ。ここでは、[削除]ボタンのOnClientClickプロパティを、次のように変更しておこう。OnClientClickプロパティは、名前のとおり、ボタン・クリック時に実行されるクライアントサイド・スクリプトを表すためのプロパティである。

return confirm('本当に削除してもよいですか?');

 以上の手順が理解できたら、サンプル・プログラムを実行してみよう。先ほどの画面のように、[削除]ボタンをクリックしたタイミングで確認ダイアログが表示されれば成功である。[OK]ボタンをクリックしたら削除処理が正しく行われることを、[キャンセル]ボタンをクリックしたら処理がキャンセルされることを、それぞれ確認しておこう。End of Article

利用可能バージョン:.NET Framework 2.0
利用可能バージョン:.NET Framework 3.0
利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:DetailsViewコントロール
使用ライブラリ:DetailsViewコントロール
関連TIPS:[ASP.NET]DetailsViewコントロールで単票を表示するには?
関連TIPS:[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?
関連TIPS:[ASP.NET]GridViewコントロールでハイパーリンクを表示するには?
関連TIPS:[ASP.NET]GridViewコントロールで画像を表示するには?
関連TIPS:[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]GridViewコントロールの削除ボタンで確認メッセージを表示するには?
[ASP.NET]DetailsViewコントロールで単票を表示するには?
[ASP.NET]GridViewコントロールで編集用のテキストボックスをカスタマイズするには?
[ASP.NET]GridView+DetailsViewコントロールで一覧/明細画面を作成するには?
[ASP.NET]FormViewコントロールで単票を表示するには?
[ASP.NET]GridViewコントロールで選択ボックスを表示するには?
[ASP.NET]GridViewコントロールの行に通し番号(行番号)を付けるには?
[ASP.NET]GridViewコントロールで各列の表示をカスタマイズするには?
[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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間