SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

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

ダウンロード サンプルソース (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を個別に定義するのでこの指示が必要です。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
単純なデータバインディングの例

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

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

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Thiru Thangarathinam(Thiru Thangarathinam)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2908 2008/09/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング