チュートリアル : DataList Web サーバー コントロールを使用したデータの表示および書式指定
更新 : 2007 年 11 月
Web ページで実行する一般的なタスクは、データの表示、実質的にはデータ レポートの作成です。このチュートリアルでは、DataList コントロールを使用します。これにより、ASP.NET Web ページに表示するレコードの自由形式のレイアウトを作成できます。
このチュートリアルでは、次の作業を行う方法について説明します。
DataList コントロールを追加し、テンプレートを使用して、DataList コントロールによって表示されるデータをレイアウトします。
DataList コントロールをデータ ソースにバインドします。
DataList コントロールに子データ コントロールとコードを追加して、マスター/詳細リレーションシップのデータを表示します。
前提条件
このチュートリアルを実行するための要件は次のとおりです。
Microsoft Visual Web Developer (Visual Studio)
SQL Server Northwind データベースへのアクセス。SQL Server の Northwind サンプル データベースをダウンロードし、インストールする方法については、Microsoft SQL Server の Web サイトの「サンプル データベースのインストール」を参照してください。
.gif "メモ")
メモ :SQL Server が実行されているコンピュータにログオンする方法については、サーバー管理者にお問い合わせください。
MDAC (Microsoft Data Access Components ) Version 2.7 以降
Microsoft Windows XP または Windows Server 2003 を使用している場合、MDAC 2.7 は既に存在します。ただし、Microsoft Windows 2000 を使用している場合は、コンピュータに既にインストールされている MDAC のアップグレードが必要になる場合があります。詳細については、MSDN ライブラリのトピック「Microsoft Data Access Components (MDAC) Installation」を参照してください。
Web サイトの作成
次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新規作成] をポイントし、[Web サイト] をクリックします。Visual Web Developer Express を使用している場合は、[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名「C:\WebSites\FormatDataList」を入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。
[OK] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
DataList コントロールの追加
このチュートリアルでは、最初に DataList コントロールを追加して、そのデータ ソースを設定します。
DataList コントロールを追加および設定してデータをグリッドに表示するには
デザイン ビューに切り替えます。
ツールボックスの [データ] グループから、DataList コントロールをページにドラッグします。
DataList コントロールを右クリックし、[スマート タグの表示] をクリックします。
[DataList タスク] メニューの [データ ソースの選択] ボックスの [新しいデータ ソース] をクリックします。
データ ソース構成ウィザードが表示されます。
[データベース] をクリックします。
これにより、SQL ステートメントをサポートするデータベースからデータを取得することが指定されます (これには、SQL Server データベースおよびその他の OLE-DB 互換のデータベースが含まれます)。
[データ ソースに ID を指定します] ボックスに、既定のデータ ソース コントロール名が表示されます (SqlDataSource1)。この名前はそのままにしておいてかまいません。
[OK] をクリックします。
データ ソースの構成ウィザードに、接続を作成するためのページが表示されます。
[新しい接続] をクリックします。
- [データ ソースの選択] ページが表示されたら、[データ ソース] ボックスで、使用するデータ ソースの種類を選択します。このチュートリアルでは、データ ソースの種類として [Microsoft SQL Server] をクリックします。[データ プロバイダ] ボックスの [.NET Framework SQL Server 用データ プロバイダ] をクリックし、[続行] をクリックします。
[接続の追加] ページが表示されます。
[接続の追加] ページの [サーバー名] ボックスに、SQL Server データベースを実行しているコンピュータの名前を入力します。
ログオン資格情報については、SQL Server データベースを実行しているコンピュータにアクセスするのに適したオプション (統合セキュリティまたは特定の ID とパスワード) を選択します。必要に応じて、ユーザー名とパスワードを入力します。
[パスワードの保存] チェック ボックスをオンにします。
[データベースの選択または入力] をクリックし、「Northwind」と入力します。
[接続の確認] をクリックし、接続を確認したら [OK] をクリックします。
接続情報が入力された、データ ソースの構成ウィザードが表示されます。
[次へ] をクリックします。
データ ソースの構成ウィザードに、接続文字列を構成ファイルに保存するためのページが表示されます。接続文字列を構成ファイルに格納すると、次の 2 つの利点があります。
この方がページ内に格納するよりも安全です。
複数のページで同じ接続文字列を再利用できます。
[はい、この接続を次の名前で保存します] チェック ボックスがオンになっていることを確認して、[次へ] をクリックします。既定の接続文字列のままにしておいてかまいません。
データ ソースの構成ウィザードに、データベースから取得するデータを指定するためのページが表示されます。
[テーブルまたは表示から列を指定します] がオンになっていることを確認します。
[コンピュータ] ボックスの [カテゴリ] をクリックします。
[列] で、[CategoryID] チェック ボックスと [CategoryName] チェック ボックスをオンにします。
データ ソースの構成ウィザードが表示され、ページの下部のボックスに作成中の SQL ステートメントが表示されます。
メモ :データ ソースの構成ウィザードを使用すると、選択基準 (WHERE 句) およびその他の SQL クエリ オプションを指定できます。チュートリアルのこの部分では、選択または並べ替えオプションのない単純なステートメントを作成します。
[次へ] をクリックします。
[クエリのテスト] をクリックして、必要なデータを取得していることを確認します。
[完了] をクリックします。
データ ソースの構成ウィザードを閉じ、SqlDataSource コントロールに戻ります。SqlDataSource コントロールのプロパティを表示すると、データ ソースの構成ウィザードにより ConnectionString プロパティおよび SelectQuery プロパティの値が作成されたことがわかります。Visual Web Developer の [プロパティ] に完全な接続文字列が表示されている場合でも、接続文字列の識別子 (この場合は NorthwindConnectionString) だけがページに保存されます。
DataList コントロールのレイアウトの書式指定
この時点で、Categories テーブルの情報を既定のレイアウトで表示する DataList コントロールがページ上に作成されました。DataList コントロールの利点は、データの自由形式のレイアウトを作成できることです。ここでは、テンプレートを使用して、テキストおよびデータ表示をカスタマイズするコントロールによりテンプレートを設定します。
DataList コントロールのレイアウトの書式を設定するには
DataList コントロールを右クリックし、[テンプレートの編集] をポイントし、[項目テンプレート] をクリックします。
DataList コントロールがテンプレート編集モードに切り替わり、次のテンプレートのテンプレート ボックスが表示されます。
ItemTemplate。DataList コントロールに既定で表示されるテキストおよびコントロールが含まれています。
AlternatingItemTemplate。その他のすべてのデータ レコードに使用されるレイアウトを作成できる、オプションのテンプレートです。通常、AlternatingItemTemplate プロパティは ItemTemplate プロパティに似ていますが、AlternatingItemTemplate プロパティはしま模様の効果を作り出すために別の背景色を使用します。
SelectedItemTemplate。ボタンのクリックまたはその他のジェスチャを使用して明示的に選択されたデータ レコードのレイアウトを定義します。このテンプレートの一般的な使用方法は、データ レコードの拡張ビューを提供したり、マスター/詳細リレーションシップのマスター レコードとして機能したりすることです。レコードを選択したモードにするコードを記述する必要があります (このチュートリアルでは、コードは記述しません。詳細については、「方法 : ユーザーが DataList Web サーバー コントロール内の項目を選択できるようにする」および「チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成」を参照してください)。
EditItemTemplate。データ レコードの編集モードのレイアウトを定義します。通常、EditItemTemplate プロパティには、ユーザーがデータ レコードを変更できる TextBox コントロールや CheckBox コントロールなどの編集可能なコントロールが含まれています。レコードを編集モードにして、編集が完了したときにレコードの保存を処理するコードを記述する必要があります (このチュートリアルでは、コードは記述しません。レコードを編集するコードの記述の詳細については、「方法 : ユーザーが DataList Web サーバー コントロール内の項目を編集できるようにする」を参照してください)。
既定では、Visual Web Developer により、データ ソースのデータ列ごとにデータ バインド コントロールの Label が項目テンプレートに読み込まれます。また、Visual Web Developer により、ラベルごとにキャプションとして機能する静的テキストも生成されます。
右側のサイズ変更ハンドルをドラッグして、ページ幅の大部分を占めるように DataList コントロールを拡大します。
項目テンプレートを編集して、テンプレートの内容が次のコード例のようになるように、Label コントロールを再配置し、新しいキャプションを作成します。
Name: [CategoryNameLabel] (ID: [CategoryIDLabel])CategoryNameLabel コントロールをクリックします。[プロパティ] の [フォント] ノードを展開し、[太字] を true に設定します。
デザイン ビューの DataList コントロールでタイトル バーを右クリックし、[テンプレートの編集] をクリックして、[区切り記号テンプレート] をクリックします。
区切り記号テンプレートを使用すると、データ レコード間に表示されるテキストまたはその他の要素を指定できます。
ツールボックスの [HTML] グループから、[Horizontal Rule] 要素を区切り記号テンプレートにドラッグします。
DataList コントロールでタイトル バーを右クリックし、[テンプレート編集の終了] をクリックします。
DataList コントロールのテスト
ここで、作成したレイアウトをテストできます。
DataList コントロールをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
各レコード間の 1 行を使用して、カテゴリ名と ID の一覧がページに表示されます。
DataList コントロール内での関連情報の表示
現在作成している DataList コントロールには、以前定義したカスタム レイアウトを使用して、個別の Category レコードが表示されます。既定のレイアウトを若干変更しましたが、テンプレートを使用すると、テキストとコントロールの配置、内容の書式設定、その他の方法でのデータ レコード表示の変更が可能です。
レイアウトには、現在のレコードおよび関連レコードを含めることができます。このチュートリアルでは、各行にカテゴリとそのカテゴリ内の製品が表示されるようにレイアウトを変更します。実際には、DataList コントロールの各行にマスター/詳細リレーションシップを表示します。このシナリオを有効にするためには、短いコードを記述する必要があります。
DataList コントロール内に関連情報を表示するには
DataList コントロールを右クリックし、[テンプレートの編集] をポイントし、[項目テンプレート] をクリックします。
ツールボックスの [標準] グループから、BulletedList コントロールを項目テンプレートにドラッグし、BulletedList コントロールをカテゴリ情報の下にドロップします。
BulletedList コントロールでは、箇条書き項目ごとに 1 つのデータ列を使用してデータを表示できます。
BulletedList コントロールを右クリックし、[スマート タグの表示] をクリックします。
[データ ソースの選択] をクリックします。
関連レコードを読み取るための 2 番目のデータ ソース コントロールを作成します。
[データ ソースの選択] ダイアログ ボックスの [データ ソースの選択] ボックスで、[新しいデータ ソース] をクリックします。
[データベース] をクリックします。
[データ ソースに ID を指定します] ボックスに「bulletedListDataSource」と入力します。
通常は、データ ソースの既定の名前をそのまま使用できますが、ここでは、後でコード内で参照できるように、特定の予測可能な名前をデータ ソースに割り当てると便利です。
[OK] をクリックします。
データ ソースの構成ウィザードが表示されます。
[アプリケーションがデータベースへの接続に使用するデータ接続] ボックスで、このチュートリアルの前半で作成した接続の名前をクリックし、[次へ] をクリックします。
データ ソースの構成ウィザードに、SQL ステートメントを作成するためのページが表示されます。
[テーブルまたは表示から列を指定します] の [コンピュータ] ボックスで、[Products] をクリックします。
[列] ボックスの [ProductName] ボックスを選択します。
BulletedList コントロールに列が 1 つだけ表示されます。
[Where] をクリックします。
[WHERE 句の追加] ダイアログ ボックスが表示されます。
[列] ボックスの [CategoryID] をクリックします。
[演算子] ボックスの [=] をクリックします。
[ソース] ボックスの [None] をクリックします。
これは、CategoryID 列の値が変数で提供されることを示します。
[追加]、[OK]、[次へ]、[完了] の順にクリックします。
クエリのテストでは、変数は使用しません。
[BulletedList で表示するデータ フィールドの選択] ボックスの [ProductName] をクリックします。[OK] をクリックします。
DataList コントロールでタイトル バーを右クリックし、[テンプレート編集の終了] をクリックします。
カテゴリ ID を設定するコードの記述
bulletedListDataSource コントロールに対して作成した SQL ステートメントは、次のコードのようになります。
SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)
実行時に、DataList コントロールには、カテゴリ名とカテゴリ ID の両方を含むカテゴリ レコードの一覧が表示されます。前のセクションでは、各カテゴリのすべての製品を表示する BulletedList コントロールを追加しました。各カテゴリ レコードが表示されているときに、DataList コントロールでは、前のクエリを使用して、そのカテゴリの製品を取得するクエリが実行されます。
表示されるレコードごとに、クエリにカテゴリ ID を指定する必要があります。これは、現在表示されているレコードからカテゴリ ID を取得し、そのカテゴリ ID をパラメータとして bulletedListDataSource コントロール内のクエリに渡すコードを記述することで実行できます。
カテゴリ ID を設定するコードを記述するには
DataList コントロールをクリックし、ツール バーの [プロパティ] の [イベント] をクリックします。
このイベントに対してイベント ハンドラを作成する場合は、ItemDataBound をダブルクリックします。
ハンドラに次のコードをコピーします。
If e.Item.ItemType = ListItemType.Item Or _ e.Item.ItemType = ListItemType.AlternatingItem Then Dim ds As SqlDataSource ds = CType(e.Item.FindControl("bulletedListDataSource"), _ SqlDataSource) Dim categoryID As String categoryID = DataBinder.Eval(e.Item.DataItem, _ "categoryid").ToString() ds.SelectParameters("CategoryID").DefaultValue = _ categoryID End Ifif (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { SqlDataSource ds; ds = e.Item.FindControl("bulletedListDataSource") as SqlDataSource; ds.SelectParameters["CategoryID"].DefaultValue = DataBinder.Eval(e.Item.DataItem, "categoryid").ToString(); }表示されているデータ レコードごとに ItemDataBound イベントが発生し、データの読み取りまたは変更を実行できます。このコードは次の処理を行います。
ItemTemplate オブジェクトまたは AlternatingItemTemplate オブジェクト (SeparatorTemplate オブジェクトまたはその他の種類のテンプレートを除く) をバインドしているときに、イベントが発生していることを確認します。
FindControl メソッドを使用して、各項目テンプレート内に作成された SqlDataSource コントロールのインスタンスへの参照を取得します。
現在の DataItem プロパティを評価して、CategoryID データ列の値を取得します。
SelectParameters コレクションの DefaultValue プロパティを設定して、パラメータ付きクエリの CategoryID 変数を設定します。
コードのテスト
ここでコードをテストできます。
カテゴリ ID を設定するコードをテストするには
Ctrl キーを押しながら F5 キーを押してページを実行します。
DataList コントロールに各カテゴリ レコードが表示されます。また、レコードごとに、そのカテゴリに属する製品が箇条書きで表示されます。
次の手順
このチュートリアルでは、DataList Web サーバー コントロールを使用してデータを表示および書式設定する、単純でありながら詳細なシナリオについて説明しました。このチュートリアルで説明した方法とコントロールを使用すると、より高度なデータ ドリブン ページとアプリケーションを作成できます。たとえば、次の場合です。
ユーザーが DataList Web サーバー コントロール内の項目を選択できるようにするコードを記述する場合。詳細については、「方法 : ユーザーが DataList Web サーバー コントロール内の項目を選択できるようにする」を参照してください。
マスター/詳細リレーションシップのマスター レコードを作成する場合。詳細については、「チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成」を参照してください。
パフォーマンスを向上させるために、データ アプリケーションで出力キャッシュを使用する方法を習得する場合。詳細については、「チュートリアル : 出力キャッシュを使用した Web サイトのパフォーマンスの強化」を参照してください。
参照
処理手順
方法 : ユーザーが DataList Web サーバー コントロール内の項目を選択できるようにする
チュートリアル : Visual Studio でのマスター/詳細 Web ページの作成