DataList Web サーバーコントロールの概要

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

DataList Web サーバーコントロールは、カスタマイズできる形式でデータベース情報の行を表示します。データの表示形式は、テンプレートを作成して定義します。項目、代替項目、選択された項目、および編集項目のテンプレートを作成できます。ヘッダー、フッター、および区切り記号の各テンプレートを使用して DataList の表示形式全体をカスタマイズすることもできます。Button Web サーバーコントロールをテンプレートに含めることにより、一覧の項目に対して、ユーザーが表示、選択、編集の各モードを切り替えることができるようにするコードを関連付けることができます。

このトピックの内容は次のとおりです。

背景
コード例
クラスリファレンス

背景

DataList Web サーバーコントロールは、テンプレートおよびスタイルを使用して定義できる形式でデータを表示します。DataList コントロールは、テーブルなどの反復構造内のデータの表示に便利です。DataList コントロールは、行を列や行で順序付けるなど、行をさまざまなレイアウトで表示できます。

メモ :
DataList コントロールは、HTML テーブル要素を使用して項目の一覧を表示します。一覧の表示に使用する HTML 要素を正確に制御するには、DataList コントロールの代わりに Repeater Web サーバーコントロールを使用してください。

また、DataList コントロールは、ユーザーが情報を編集または削除できるように設定することもできます。さらに、その他の機能 (行の選択など) をサポートするようにカスタマイズできます。

テンプレートに HTML テキストおよびコントロールを含めることにより、テンプレートを使用してデータ項目のレイアウトを定義します。たとえば、項目の Label Web サーバーコントロールを使用してデータソースのフィールドを表示できます。

以下のセクションでは、DataList コントロールの機能を紹介します。

コントロールへのデータの連結

DataList Web サーバーコントロールは、データソースに関連づける必要があります。最も一般的なデータソースは、SqlDataSource コントロールや ObjectDataSource コントロールなどのデータソースコントロールです。また、DataList コントロールは、IEnumerable インターフェイスを実装する任意のクラスに関連付けることもできます。クラスには、ADO.NET データセット (DataSet クラス)、データリーダー (SqlDataReader クラスやOleDbDataReader クラス)、またはほとんどのコレクションが含まれます。データを関連付けるときは、DataList コントロール全体に対して 1 つのデータソースを指定します。このコントロールにその他のコントロール (たとえば、一覧項目のラベルまたはテキストボックス) を追加する場合は、子コントロールのプロパティを現在のデータ項目のフィールドに関連付けることができます。

DataList 項目のテンプレートの定義

DataList コントロールでは、テンプレートを使用して情報のレイアウトを定義できます。

メモ :
テンプレートの使用の概要については、「ASP.NET Web サーバーコントロールテンプレート」を参照してください。

DataList コントロールでサポートされているテンプレートを次の表に示します。

テンプレートプロパティ	説明
ItemTemplate	データソースの各行に対して一度ずつ表示される HTML 要素とコントロールが含まれます。
AlternatingItemTemplate	データソースの 1 行おきに表示される HTML 要素とコントロールが含まれます。通常、このテンプレートは、交互に行の表示形式を変化させる (ItemTemplate プロパティで指定した色とは別の背景色など) ときに使用します。
SelectedItemTemplate	ユーザーが DataList コントロールの項目を選択したときに表示される要素が含まれます。通常、このテンプレートは、選択した行を、異なる背景色やフォント色で視覚的に区別するときに使用します。データソースから追加のフィールドを表示することにより、項目を拡張することもできます。
EditItemTemplate	編集モードでの項目のレイアウトを指定します。このテンプレートには、通常、TextBox コントロールなどの編集コントロールが含まれています。
HeaderTemplate および FooterTemplate	一覧の最初と最後にそれぞれ表示されるテキストおよびコントロールが含まれます。
SeparatorTemplate	各項目の間に表示される要素が含まれます。代表的な例はライン (HR 要素を使用) です。

スタイル

テンプレートのスタイルを設定して、テンプレートの項目の表示形式を指定できます。たとえば、以下のように指定します。

項目は、白い背景に黒のテキストで表示する。
交互の項目は、明るい灰色の背景に黒のテキストで表示する。
選択された項目は、黄色い背景に太字の黒のテキストで表示する。
編集対象の項目は、明るい青の背景に黒のテキストで表示する。

各テンプレートは、デザイン時および実行時にプロパティを設定できる固有のスタイルオブジェクトをサポートします。使用できるスタイルは次のとおりです。

詳細については、「ASP.NET Web サーバーコントロールと CSS スタイル」を参照してください。

項目のレイアウト

DataList コントロールは、HTML テーブルを使用して、テンプレートが適用される項目の表示をレイアウトします。DataList 項目の表示に使用する個々のテーブルセルの列の順序、方向、および数を制御できます。DataList コントロールでサポートされているレイアウトオプションを次の表に示します。

レイアウトオプション	説明
フローレイアウト	フローレイアウトの場合、一覧の項目は、ワードプロセッサ文書のようにインラインで表示されます。
テーブルレイアウト	テーブルレイアウトの場合、項目は HTML テーブルに表示されます。このレイアウトでは、グリッド線などのテーブルセルプロパティを設定できるので、より多くのオプションを使用して項目の表示形式を指定できます。詳細については、「方法 : DataList Web サーバーコントロールでフローまたは表の形式を指定する」を参照してください。
縦横レイアウト	既定では、DataList コントロールの項目は縦の 1 列に表示されます。ただし、コントロールが複数の列を持つようにも指定できます。複数の列を指定する場合は、項目を (新聞の段組のように) 縦に並べるか、(カレンダーの日付のように) 横に並べるかを指定できます。詳細については、「方法 : DataList Web サーバーコントロールに横または縦のレイアウトを指定する」を参照してください。
列の数	DataList コントロールの項目を縦と横のどちらの方式で並べる場合にも、一覧に含む列の数を指定できます。列数を指定することで、通常、水平のスクロールを使用しないように、表示される Web ページの幅を制御できます。

イベント

DataList コントロールは、複数のイベントをサポートします。サポートされるイベントのうち ItemCreated は、実行時に項目作成プロセスをカスタマイズする手段を提供します。ItemDataBound イベントも DataList コントロールをカスタマイズする機能を提供します。ただし、このイベントはデータが検査できるようになった後にしか使用できません。たとえば、DataList コントロールを使用して TO DO リストを表示する場合に、期限の過ぎた項目を赤いテキスト、完了した項目を黒いテキスト、その他のタスクを緑のテキストで表示できます。どちらのイベントを使用しても、テンプレート定義による形式設定をオーバーライドできます。

残りのイベントは、一覧項目でのボタンクリックに対する応答として発生します。これらのイベントは、DataList コントロールで最も一般的に使用される機能に対応できるようにデザインされています。この種類のイベントは、次の 4 つがサポートされます。

これらのイベントが発生するようにするには、Button コントロール、LinkButton コントロール、または ImageButton コントロールを DataList コントロールのテンプレートに追加し、各ボタンの CommandName プロパティに、edit、delete、update、cancel などのキーワードを設定します。ユーザーが項目のボタンをクリックすると、イベントはボタンのコンテナ、つまり DataList コントロールに送られます。ボタンによって発生する実際のイベントは、クリックされたボタンの CommandName プロパティの値によって決まります。たとえば、ボタンの CommandName プロパティに edit が設定されている場合、ボタンをクリックすると、EditCommand イベントが発生します。また、CommandName プロパティに delete が設定されている場合は、DeleteCommand イベントが発生します。

DataList コントロールは、edit や delete などの定義済みのコマンドが設定されていないボタンをクリックしたときに発生する ItemCommand イベントもサポートします。ボタンの CommandName プロパティに必要な値を設定し、ItemCommand イベントハンドラでテストすることにより、カスタム機能のためにこのイベントを使用できるようになります。たとえば、この方法は、「方法 : ユーザーが DataList Web サーバーコントロール内の項目を選択できるようにする」で説明されているように項目を選択するときに使用できます。

Web フォームイベントの詳細については、「ASP.NET Web サーバーコントロールのイベントモデル」を参照してください。

項目の編集と選択

コントロールの各項目をユーザーが編集できるようにすることができます。GridView、DetailsView、FormView などの他のデータコントロールは、データソースコントロールと対話して、自動的な更新やページングをサポートします。一方、DataList コントロールは、データソースコントロールの更新機能、自動ページング、および自動並べ替え機能を自動的には利用できません。DataList コントロールを使用して更新、ページング、および並べ替えを実行するには、作成したコードで更新タスクを実行する必要があります。

一般的な方法としては、編集用の適切なレイアウトおよびコントロールを提供する EditItemTemplate を作成します。また、ユーザーが項目を編集しようとしていることを示すための手段も用意する必要があります。この場合、ボタンを項目テンプレートに追加し (項目テンプレートを使用する場合は、AlternatingItemTemplate プロパティに追加します)、ボタンの CommandName プロパティに edit を設定する方法がよく使用されます。これで、ボタンをクリックしたときに、DataList コントロールによって EditCommand イベントが自動的に発生します。イベントハンドラ用に作成するコードで、項目を編集モードに設定すると、EditItemTemplate が表示されます。

通常、EditItemTemplate には、ユーザーが変更を保存したり、破棄したりできるボタン ([更新] ボタンや [キャンセル] ボタンなど) が含まれています。これらのボタンは、[編集] ボタンと同じように動作し、定義済みのコマンドメッセージ (update または cancel) を DataList コントロールに送ります。このコントロールは、適切に応答できる UpdateCommand イベントや CancelCommand イベントを発生します。詳細については、「方法 : ユーザーが DataList Web サーバーコントロール内の項目を編集できるようにする」を参照してください。

項目を選択するプロセスでは、SelectedIndexChanged イベントを使用しますが、上記のプロセスと似ています。ボタンを ItemTemplate に追加し、その CommandName プロパティに select を設定します。そして、SelectedIndexChanged イベントのイベントハンドラを記述します。これで、ユーザーが [選択] ボタンをクリックすると、SelectedIndexChanged イベントが発生します。詳細については、「方法 : ユーザーが DataList Web サーバーコントロール内の項目を選択できるようにする」を参照してください。詳細については、「方法 : ユーザーが DataList Web サーバーコントロール内の項目を選択できるようにする」を参照してください。

ページのトップへ