チュートリアル : ListView Web サーバー コントロールを使用したデータの表示、ページング、および並べ替え
更新 : 2007 年 11 月
このチュートリアルでは、ListView コントロールを使用します。このコントロールを使用すると、テンプレートを使用して定義した形式で、データ ソースのデータを表示できます。テンプレートを操作することによって、コントロール内のデータのレイアウトと外観を完全に制御できます。ListView コントロールは、並べ替え機能やページング機能に加え、編集、挿入、および削除の各操作を自動的にサポートします。
このチュートリアルでは、次のタスクについて説明します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Visual Studio 2008 または Visual Web Developer 2008 Express Edition。
SQL Server Express Edition。SQL Server がインストールされている場合、SQL Server を代わりに使用することもできますが、いくつかの手順を微調整する必要があります。
AdventureWorks データベースがコンピュータにインストールされていること。SQL Server の AdventureWorks サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「Express Editions 用サンプル データベースのインストール」を参照してください。
AdventureWorks データベースへのアクセス権を持つ SQL Server アカウントのユーザー名とパスワード。
Web サイトの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を完了して、Web サイトを既に作成している場合は、その Web サイトを使用して、次のセクションに移動できます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Studio 2008 または Visual Web Developer 2008 Express Edition を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express Edition を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
最初の [場所] ボックスの一覧の [ファイル システム] をクリックし、次のボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites\DisplayData」と入力します。
[言語] ボックスで、作業に使用するプログラミング言語をクリックします。
[OK] をクリックします。
Visual Studio によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
ListView コントロールでのデータの表示とページング
ASP.NET Web ページにデータを表示するための要件は、次のとおりです。
データベースなどのデータ ソースへの接続。次の手順では、SQL Server AdventureWorks データベースへの接続を作成します。
ページ上のデータ ソース コントロール。データ ソース (データベース) とやりとりして、データの読み取りおよび書き込みを行います。このチュートリアルでは、SQL Server AdventureWorks データベースとやり取りする SqlDataSource コントロールを使用します。
ページ上の、データを表示するためのコントロール。次の手順では、SqlDataSource コントロールからデータを取得する ListView コントロール内のデータを表示します。
ListView コントロールでデータを表示およびページングするには
Web サイトに App_Data フォルダがない場合は、ソリューション エクスプローラでプロジェクトを右クリックし、[ASP.NET フォルダの追加] をクリックして、[App_Data] をクリックします。
ソリューション エクスプローラで、App_Data フォルダを右クリックし、[既存項目の追加] をクリックします。
[既存項目の追加] ダイアログ ボックスが表示されます。
AdventureWorks データベース ファイル (AdventureWorks_Data.mdf) の場所を入力します。
既定では、.mdf ファイルはパス C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf にインストールされます。
.gif "メモ")
メモ :この手順では、プロジェクト内のデータベース ファイルのコピーを作成します。データベース ファイルは大きいため、データベースのコピーの作成が実用的ではない場合は、データベース ファイルに直接接続するなど、別の方法を使用してデータベースに接続できます。ただし、このチュートリアルでは、この方法は説明しません。
Default.aspx ファイルに切り替えるか Default.aspx ファイルを開きます。
デザイン ビューに切り替えます。
ツールボックスの [データ] タブから、ListView コントロールをページにドラッグします。
.png "ListView コントロール")
[コモン ListView タスク] メニューで、[データ ソースの選択] ボックスの一覧の [<新しいデータ ソース>] をクリックします。
データ ソース構成ウィザードが表示されます。
[データベース] をクリックします。
これにより、SQL Server などの OLE DB 互換データベースを含む、SQL ステートメントをサポートするデータベースからデータを取得するように指定します。
[データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名 SqlDataSource1 が表示されます。この名前はそのままにしておいてかまいません。
.png "データ ソース構成ウィザード")
[OK] をクリックします。
データ ソースの構成ウィザードが表示されます。
[アプリケーションがデータベースへの接続に使用するデータ接続] で、一覧の AdventureWorks_Data.mdf をクリックします。
[次へ] をクリックします。
ウィザードに、接続文字列を構成ファイルに保存するように指定するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。
この方がページ内に格納するよりも安全です。
同じ接続文字列を複数のページで使用できます。
[はい、この接続を次の名前で保存します] チェック ボックスがオンになっていることを確認して、[次へ] をクリックします既定の接続文字列名はそのままにしておいてかまいません。
ウィザードに、データベースから取得するデータを指定するためのページが表示されます。
[カスタム SQL ステートメントまたはストアド プロシージャを指定する] をクリックします。
.png "Select ステートメントの構成")
メモ :通常は、[テーブルまたはビューから列を指定します] を使用します。ただし、AdventureWorks データベースにはスキーマ名があるため、このチュートリアルではカスタム SQL ステートメントを作成します。
[次へ] をクリックします。
[カスタム ステートメントまたはストアド プロシージャを定義します] ページで、次の SQL クエリを入力します。これにより、AdventureWorks データベースから連絡先データが取得されます。
SELECT ContactID, FirstName, LastName, EmailAddress FROM Person.Contact[クエリ ビルダ] をクリックし、[クエリ ビルダ] ウィンドウを使用してクエリを作成した後、[クエリの実行] を使用してクエリを検証することもできます。
メモ :ウィザードを使用すると、選択基準 (WHERE 句) およびその他の SQL クエリ オプションを指定できます。このチュートリアルでは、選択基準や並べ替え基準を指定しない簡単なステートメントを作成します。
[次へ] をクリックします。
[クエリのテスト] をクリックし、必要なデータが取得されることを確認します。
[完了] をクリックします。
ウィザードによって SqlDataSource コントロールが作成され、ページに追加されます。先ほど追加した ListView コントロールは、SqlDataSource コントロールにバインドされます。
SqlDataSource コントロールのプロパティを表示すると、ウィザードによって ConnectionString プロパティと SelectCommand プロパティの値が作成されていることがわかります。
ListView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[コモン ListView タスク] メニューの [ListView の構成] をクリックします。
[ListView の構成] ダイアログ ボックスが表示されます。
[ページングを有効にする] を選択します。
メモ :別のスタイルを選択して、データをさらに簡単に表示することもできます。そのためには、[スタイルの選択] で、[カラフル] などのスタイルを選択します。
クエリの列に基づいて、ListView コントロール用のテンプレートが作成されます。レイアウト要素、コントロール、およびバインド式を含むテンプレートを編集することで、レイアウトをカスタマイズできます。
.png "ListView の構成")
[OK] をクリックします。
.png "ListView コントロール")
次に進む前に、ListView コントロールをテストできます。
ListView コントロールをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
ListView コントロールが表示され、ContactID、FirstName、LastName、および EmailAddress の各列が表示されます。
データをページングするために、ページの下部にある [最初]、[前]、[次]、および [最後] をクリックします。
完了したら、ブラウザを閉じます。
ListView コントロールへの並べ替え機能の追加
ここで、ListView コントロールに並べ替え機能を追加します。ListView コントロールにボタンを追加して構成することで、この機能を提供できます。
ListView コントロールに並べ替え機能を追加するには
Default.aspx ファイルで ListView コントロールを右クリックし、[スマート タグの表示] をクリックします。
[コモン ListView タスク] メニューの [現在のビュー] の一覧で、LayoutTemplate テンプレートを編集するビュー ([ItemTemplate] など) をクリックします。
メモ :LayoutTemplate テンプレートを編集するための特定のビューはありません。このテンプレートは、[現在のビュー] の一覧に表示されているビューのうち、[ランタイム ビュー] と [EmptyDataTemplate] を除くすべてのビューで編集できます。
ツールボックスの [標準] タブで、2 つの Button コントロールを、ページング コントロールがあるコントロールの下部にドラッグします。
[プロパティ] ウィンドウで、ボタンのプロパティを次のように変更します。
最初のボタンでは、Text プロパティを "Sort by First Name"、CommandName プロパティを "Sort"、CommandArgument を "FirstName" に設定します。
2 番目のボタンでは、Text プロパティを "Sort by Last Name"、CommandName プロパティを "Sort"、CommandArgument を "LastName" に設定します。
ボタンの CommandArgument プロパティは並べ替え式に設定されます。データベース データでは、これは通常は列の名前です。
このページを保存します。
ここでページを再びテストできます。
並べ替えをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
[名で並べ替える] と [姓で並べ替える] をクリックして、データを別の方法で並べ替えます。
ボタンを繰り返しクリックして、昇順と降順の並べ替え順序を切り替えます。
次の手順
このチュートリアルでは、ListView コントロール、およびこのコントロールが提供するレイアウトの 1 つを使用して、データ レコードを表示、ページング、および並べ替えるための基本的な手順について説明しています。ListView コントロールのその他の機能を試し、別のシナリオを使用することもできます。たとえば、レコードを編集、削除、および挿入してみます。詳細については、「チュートリアル : ListView Web サーバー コントロールを使用したデータの変更」を参照してください。
参照
処理手順
方法 : データ ソース コントロールを使用するときに接続文字列をセキュリティ保護する
チュートリアル : Web ページでの基本的なデータ アクセス