はじめに
ユーザー中心のアプリケーションを作成するためには、ある種のデータ統合が必要です。少なくとも、リレーショナルデータベースやXMLファイルなどのデータソースからデータを取得した場合は、その書式を整えてから、ユーザーインターフェイスに表示する必要があります。
以前のバージョンのASP.NETにも、GridViewなど、データ中心の表示コントロールは存在していました。しかし、これらのコントロールは、プロのWeb開発者にとって不可欠なカスタマイズと拡張性の機能に欠けていました。
この欠点を解決するために、ASP.NET 3.5では、カスタマイズと拡張性の機能に優れているListViewという新しいコントロールが導入されました。これらの機能を使用すると、テンプレートとスタイルを利用してどのような形式のデータでも表示でき、最小限のコードでCRUD(作成、読み取り、更新、削除)操作も実行できます。
この記事では、新しいListViewコントロールを使用する場合のデータアクセスの手順について詳しく説明します。また、データの編集やイベントの処理など、高度な機能についても説明します。
ListViewコントロールの基礎
ASP.NETで提供されるほとんどのデータバインドコントロールは、表示されるデータを追加のマークアップで自動的に囲みます。たとえば、GridViewコントロールはレンダリングされるデータをHTMLテーブル(<table>)内に表示しますが、このとき、バインドされるデータの各レコードはテーブル行(<tr>)として表示され、各レコードフィールドは行内のセル(<td>)として表示されます。TemplateField要素や他のツールを使用してGridViewの外観をカスタマイズすることはできますが、GridViewの出力は依然としてtable要素内にあります。
しかし、データバインドコントロールによって生成される外観のHTMLマークアップを、完全に制御したいこともあります。ListViewコントロールは、まさにこのために導入されました。
ListViewコントロールの場合、レンダリングされる出力が追加のマークアップで自動的に囲まれることはありません。ListViewコントロールでは、レンダリングされる的確なHTMLを指定するのはあくまでもそれを使用する開発者です。
的確なマークアップを指定するには、ListViewのビルトインテンプレートを使用します。表1に、ListViewコントロールがサポートするテンプレートを示します。
テンプレート | 目的 |
AlternatingItemTemplate | 連続する項目を区別できるように、交互の項目を異なるマークアップで表示します。 |
EditItemTemplate | 項目が編集モードの場合の表示を制御します。 |
EmptyDataTemplate | ListViewのデータソースがデータを返さない場合の表示を制御します。 |
EmptyItemTemplate | 空の項目の表示を制御します。 |
GroupSeparatorTemplate | 項目のグループ間に表示するコンテンツを制御します。 |
GroupTemplate | コンテンツのテーブル行、div、またはspan要素など、コンテナオブジェクトを指定します。 |
InsertItemTemplate | ユーザーが項目を挿入したときにレンダリングするコンテンツを指定します。 |
ItemSeparatorTemplate | 個々の項目間に表示するコンテンツを制御します。 |
ItemTemplate | 個々の項目に対して表示するコンテンツを制御します。 |
LayoutTemplate | ItemTemplateまたはGroupTemplateで定義されるコンテンツを囲む、table、div、またはspan要素などのコンテナオブジェクトを定義するルート要素を指定します。 |
SelectedItemTemplate | 現在選択されている項目に対して表示するコンテンツを指定します。 |
ここで重要なのは、LayoutTemplateとItemTemplateの2つです。その名前が示すとおり、LayoutTemplateはListViewコントロールの全体のマークアップを指定し、ItemTemplateはバインドされている各レコードの表示に使用するマークアップを指定します。
たとえば次のコードは、ListView内のHTML tableコントロールに指定されている項目のリストを表示します。
<asp:ListView ID="..." runat="server" DataSourceID="..."> <LayoutTemplate> <table .......> <tr runat="server" ID="itemPlaceholder"></tr> </table> </LayoutTemplate> <ItemTemplate> <tr> <td><%# Eval("Name") %></td> </tr> </ItemTemplate> </asp:ListView>
上のコードで、LayoutTemplateコントロール内の<tr>コントロールのIDは、itemPlaceHolderに設定されています。これにより、ListViewはItemTemplateコントロールを通じて生成されるコンテンツを<table>コントロール内に配置するようになります。LayoutTemplateとItemTemplateを個別に定義するのでこの指示が必要です。