チュートリアル : AJAX 対応の Web サイトの作成
更新 : 2007 年 11 月
このチュートリアルでは、基本的な ASP.NET Web サイトと Web ページを作成することで、Visual Studio に含まれている ASP.NET AJAX ライブラリのいくつかの機能について説明します。また、AdventureWorks サンプル データベースの従業員データのページを表示するアプリケーションを構築します。このアプリケーションでは、UpdatePanel コントロールを使用して、ポストバックで発生するページのフラッシュなしに、ページ内で変更された部分のみを更新します。これを、部分ページ更新と呼びます。また、サンプル アプリケーションでは、UpdateProgress コントロールを使用して、部分ページ更新の処理中にステータス メッセージを表示します。
前提条件
独自の開発環境でこの手順を実装するための要件は次のとおりです。
Microsoft Visual Studio 2005 または Microsoft Visual Web Developer Express Edition。
AdventureWorks サンプル データベース。AdventureWorks データベースは、Microsoft ダウンロード センターからダウンロードしてインストールできます。"SQL Server 2005 Samples and Sample Databases (December 2006)" を検索してください。
Web サイトの作成
「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順などを実行して Visual Web Developer で Web サイトを作成済みの場合は、その Web サイトを使用し、次のセクション「マスタ ページの作成」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。
ファイル システム Web サイトを作成するには
Visual Web Developer を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします。
[新しい Web サイト] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。
[場所] ボックスに、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSites」と入力します。
[言語] ボックスで、作業に使用する言語をクリックします。
[開く] をクリックします。
Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。
ASP.NET Web ページへの UpdatePanel コントロールの追加
Web サイトを作成したら、UpdatePanel コントロールを含む ASP.NET Web ページを作成します。ページに UpdatePanel コントロールを追加する前に、ScriptManager コントロールを追加する必要があります。UpdatePanel コントロールでは、部分ページ更新を管理するために、ScriptManager コントロールを必要とします。
新しい ASP.NET Web ページを作成するには
ソリューション エクスプローラで、サイトの名前を右クリックし、[新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログ ボックスが表示されます。
[Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。
新しいページに Employees.aspx という名前を付け、[別のファイルにコードを書き込む] チェック ボックスをオフにします。
使用する言語を選択します。
[追加] をクリックします。
デザイン ビューに切り替えます。
ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。
.png "UpdatePanel のチュートリアル")
ツールボックスの UpdatePanel コントロールをドラッグし、ScriptManager コントロールの下へドロップします。
.png "UpdatePanel のチュートリアル")
UpdatePanel コントロールへのコンテンツの追加
UpdatePanel コントロールは、部分ページ更新を実行し、ページの残りの部分とは別に単独で更新されるコンテンツを特定します。ここでは、AdventureWorks データベースのデータを表示するデータ バインド コントロールを追加します。
UpdatePanel コントロールにコンテンツを追加するには
ツールボックスの [データ] タブから、GridView コントロールを UpdatePanel コントロールの編集可能な領域にドラッグします。
[GridView タスク] メニューの [オートフォーマット] をクリックします。
[オートフォーマット] パネルで、[スキームの選択] の [カラフル] をクリックし、[OK] をクリックします。
[GridView タスク] メニューの [データ ソースの選択] の一覧の [<新しいデータ ソース>] をクリックします。
データ ソース構成ウィザードが表示されます。
[アプリケーションがデータを取得する場所] の [データベース] をクリックし、[OK] をクリックします。
データ ソース構成ウィザードの [データ接続の選択] ページで、AdventureWorks データベースに接続するように構成し、[次へ] をクリックします。
[Select ステートメントの構成] ページで、[カスタム SQL ステートメントまたはストアド プロシージャを指定する] を選択し、[次へ] をクリックします。
[カスタム ステートメントまたはストアド プロシージャを定義します。] ページの [SELECT] タブで、次の SQL ステートメントを入力します。
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY LastName, FirstName[次へ] をクリックします。
[完了] をクリックします。
[GridView タスク] メニューの [ページングを有効にする] チェック ボックスをオンにします。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。
別のデータ ページを選択しても、ページのフラッシュは発生しません。これは、ページ全体のポストバックと更新が毎回実行されるわけではないからです。
ページへの UpdateProgress コントロールの追加
UpdateProgress コントロールは、UpdatePanel コントロールの新しいコンテンツが要求されているときにステータス メッセージを表示します。
ページに UpdateProgress コントロールを追加するには
ツールボックスの [AJAX Extensions] タブから UpdateProgress コントロールをページにドラッグし、UpdatePanel コントロールの下へドロップします。
[プロパティ] ウィンドウで UpdateProgress コントロールを選択し、その AssociatedUpdatePanelID プロパティを UpdatePanel1 に設定します。
これにより、UpdateProgress コントロールが、前の手順で追加した UpdatePanel コントロールに関連付けられます。
UpdateProgress コントロールの編集可能な領域に「Getting Employees ...」と入力します。.
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。
ページが SQL クエリを実行してデータを取得するまでに時間がかかった場合、UpdateProgress コントロールに入力したメッセージが、UpdateProgress コントロールによって表示されます。
サンプル アプリケーションへの遅延の追加
各データ ページの更新がアプリケーションですばやく処理された場合、UpdateProgress コントロールの内容がページに表示されない可能性があります。UpdateProgress コントロールは、このコントロールが表示されるまでの遅延を設定する DisplayAfter プロパティをサポートしています。これにより、更新が高速で実行された場合でも、ブラウザにコントロールが一瞬だけ表示されてすぐに消えることがなくなります。既定では、遅延が 500 ミリ秒 (0.5 秒) に設定されているため、0.5 秒未満で更新が行われた場合、UpdateProgress コントロールは表示されません。
開発環境では、UpdateProgress コントロールが意図されたとおりに機能していることを確認するために、アプリケーションに対して人為的に遅延を追加できます。これはオプションの手順であり、アプリケーションをテストする目的でのみ行います。
サンプル アプリケーションに遅延を追加するには
UpdatePanel コントロール内で、GridView コントロールを選択します。
[プロパティ] ウィンドウの [イベント] をクリックします。
PageIndexChanged イベントをダブルクリックして、イベント ハンドラを作成します。
次のコードを PageIndexChanged イベント ハンドラに追加します。これにより、3 秒の遅延が人為的に作成されます。
'Include three second delay for example only. System.Threading.Thread.Sleep(3000)//Include three second delay for example only. System.Threading.Thread.Sleep(3000);.gif "メモ")
メモ :PageIndexChanged イベントのハンドラは、このチュートリアル用に意図的に遅延を導入します。実際には、ユーザーが遅延を導入することはありません。サーバー トラフィックや、処理に時間がかかるサーバー コード (長時間実行するデータベース クエリなど) によって遅延が発生します。
変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。
新しいデータ ページに移動するたびに 3 秒の遅延が発生するようになったので、UpdateProgress コントロールが表示されるのを確認できます。