DreamwaverMX と ASP.NET(2)

2. ASP.NET コンポーネント DataGrid を使用してデータを表示する

関連コンテンツ紹介：

ASP.NET には、Web ページの編集プロセスを高速化するための多くの Web コンポーネントが付属しています。 Dreamwaver MX に付属のチュートリアルである global の例を使用して、このコンポーネントを使用してデータベース内のデータを表示する方法を示します。

1. DataGridでデータベース連携してデータを表示する

このインスタンスのデータベース global.mdb は、Web ページ ディレクトリのアセット内にあります。私たちの目的は、このデータベースの location テーブルの Regional_id の値に基づいて、さまざまなリージョンのデータを出力することです。 (Access を使用してこのデータベースを開くことができます)

location3.htm ファイルの名前を location3.aspx (ASP.NET の Web ウィンドウ ファイルのサフィックスは aspx) に変更して、編集できます。



【図2-1 変更が必要なページ】

中間の単純な静的部分を削除し、ASP.NET の DataGrid を使用してその機能を実装しましょう。



[図2-2 ページの静的部分の削除]
次のステップはデータベースにリンクすることです。右側の「アプリケーション」パネルをクリックし、「データベース」を選択して、+ 記号をクリックします。

OLE DB接続を選択します。



[図 2-3 アプリケーションパネル]

次に、[OLE DB 接続] ダイアログ ボックスに入ります。ここでは、リンク データベース コードを手書きすることも、コードを自動的に生成することもできます。接続名の場所に名前を付け、「ビルド」をクリックすると、ウィザードを通じてコードが自動的に生成されます。



[図2-4 OLE DB接続ダイアログボックス]

[データ リンク プロパティ] ページに入ったら、プロバイダーを選択してデータベース エンジンを設定します。

以下の驚くべき点は、SQL サーバー、Oracle などを含む 21 のデータベース接続方法をサポートしていることです。



[図2-5 データベースエンジン提供ページ]

これは、複数のデータベースをサポートする .NET の優れた点の 1 つです。 ADO.NETを使用します。しばらくすると、このウィザードを使用して生成した接続文字列が ADO​​.NET に従って作成されます。

リンク先のデータベースは Access2000 データベースであるため、「Microsoft Jet 4.0 OLE DB Provider」を選択し、「次へ」をクリックします。

「1.データベース名を選択または入力」の横にあるボタンをクリックして、リンク先のデータベースを選択します。

「2.データベースにログオンするための情報を入力」の「ユーザー名」と「パスワード」を解除します。



[図2-6 設定リンク]

詳細設定で読み取り権限を設定します。 「読み取り」、「読み取り書き込み」、「書き込み」を選択し、「OK」をクリックします。



[図2-7 権限の設定]

接続名を追加し、「テスト」をクリックしてデータベース・リンクをテストします。成功した場合は、「OK」をクリックします。おめでとう、

データベースをサイトにリンクしました。次のステップは、DataGrid を使用して表示することです。

また、[アプリケーション] パネルで、[サーバーの動作] を選択します。

最初に設定を完了し、「展開」をクリックすると、プログラムが自動的にサイトを展開し、DreamweaverCtrls.dll、web.config、および _mmServerScripts フォルダーをサイト ディレクトリにコピーします。これらのフォルダーは、Dreamweaver MX を使用して ASP.net Web ページを作成するために必要なファイルです。



【図2-8 配備先】
同時に、まず Web サイトのルート ディレクトリに bin フォルダーを作成し、DreamweaverCtrls.dll ファイルをこのフォルダーにコピーする必要があります。

+ 記号をクリックして、最初に新しい DataSet を作成します。



[図 2-9 データセットの追加]

Connection はデータ ソースの選択、Table はテーブルの選択、Column は項目の選択、Filter はデータのフィルタリングに使用します。このページにはヨーロッパのデータが表示されているため、入力値 = 3 が設定されています。 「失敗時」は、データの読み取り中にエラーが発生した場合にジャンプするページを処理するために「Go To」を使用します。



[図2-10 データセットの作成]

DataSet が正常に作成されたら、DataGrid を作成できます。 + 記号をクリックして DataGrid を選択します



[図 2-11 データグリッドの追加]

Datasetで必要なレコードセットを選択し、ページング表示の有無やページングで表示する1ページあたりのレコード数を設定、Navigationでナビゲーションバーの表示方法を設定、Columnsで表示項目の追加や削除を行います。



[図2-12 DataGridの設定]

「編集」をクリックしてヘッダーのタイトルを設定します。タイトルを入力したら、「OK」をクリックして確定します。



[図2-13 タイトルの設定]

[OK] をクリックして DataGrid を追加します。



[図2-14 プレビューページ]

プレビュー ページで、DataGrid が追加された領域を確認するには、F12 を押してページをプレビューします。

以下は実行後のページです。



[図2-15 実行後のページ]
2.DataGridのプロパティを変更する

関連コンテンツ紹介：

このコンポーネントを見たとき、色があまりにもきれいではないと思いますか? それでは、変更してみましょう。 DataGrid コンポーネントには、DataGrid のスタイルを変更できる多くのプロパティがあります。

コードを分析する