CodeZine(コードジン)

特集ページ一覧

ASP.NET 3.5の新しいListViewコントロールを使用する

最小限のコードでデータの表示/CRUDができるListViewコントロール

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/09/03 14:00

ダウンロード サンプルソース (4.8 KB)

ASP.NETに導入された新しいListViewコントロールでは、表示とCRUDデータベース操作の両方でテンプレートベースのレイアウトを使用できるため、データ中心のWebアプリケーションを簡単に構築できます。

目次

はじめに

 ユーザー中心のアプリケーションを作成するためには、ある種のデータ統合が必要です。少なくとも、リレーショナルデータベースや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コントロールがサポートするテンプレートを示します。

表1 ListViewコントロールがサポートするテンプレート
テンプレート 目的
AlternatingItemTemplate 連続する項目を区別できるように、交互の項目を異なるマークアップで表示します。
EditItemTemplate 項目が編集モードの場合の表示を制御します。
EmptyDataTemplate ListViewのデータソースがデータを返さない場合の表示を制御します。
EmptyItemTemplate 空の項目の表示を制御します。
GroupSeparatorTemplate 項目のグループ間に表示するコンテンツを制御します。
GroupTemplate コンテンツのテーブル行、div、またはspan要素など、コンテナオブジェクトを指定します。
InsertItemTemplate ユーザーが項目を挿入したときにレンダリングするコンテンツを指定します。
ItemSeparatorTemplate 個々の項目間に表示するコンテンツを制御します。
ItemTemplate 個々の項目に対して表示するコンテンツを制御します。
LayoutTemplate ItemTemplateまたはGroupTemplateで定義されるコンテンツを囲む、table、div、またはspan要素などのコンテナオブジェクトを定義するルート要素を指定します。
SelectedItemTemplate 現在選択されている項目に対して表示するコンテンツを指定します。

 ここで重要なのは、LayoutTemplateItemTemplateの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を個別に定義するのでこの指示が必要です。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Thiru Thangarathinam(Thiru Thangarathinam)

    オブジェクト指向アプリケーション開発方法論を用いたアプリケーションのアーキテクチャ設計、設計、開発、および実装に関して約6年の経験を持つ。ソフトウェアライフサイクル(設計、開発およびテスト)にも精通。 ASP.NET、.NET Framework、Visual C#.NET、Visual Basi...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5