[#d37ae965]ASP.NETでAjaxを使ったWebアプリケーションを作成する方法を前々号から紹介してきました。前回はICallbackEventHandlerインターフェイスを実装する方法を紹介し、全て自分で行う方法と比べ、多少楽をすることができました。それでもやはりJavaScriptのコードを自分で書くことは必要で、JavaScriptの知識が必要でした。AJAX>http://asp.net/ajax/default.aspx]]を使用すれば、極端に言えば、自分でJavaScriptのコードを一行も書くことなく、Ajaxを使用したページを作成することができます。自分でJavaScriptのコードを書かなければならない場合でも、大幅に簡略化できます。AJAX(旧名Atlas)はマイクロソフトが公開している無料のフレームワークです。2.0に対応しています。AJAXのバージョンも1.0です。2.0が必要ですので、それ未満しか使用できない場合は、残念ながらインストールできません。Site>http://www.asp.net/ajax/downloads/]]」からダウンロードできます。Extensionsだけで結構です。Extensionsのインストール後にしてください。ダウンロードされたファイルは、"ASPAJAXExtSetup.msi"のようなファイル名になっているでしょう。このファイルをダブルクリックして、インストールを開始してください。インストールするには、管理者権限が必要です。AJAXがインストールされている場合は、アンインストールしてから新しいバージョンをインストールしてください。AJAX用のプロジェクトのテンプレートがインストールされます。Site」というテンプレートが見つかるはずです。Extensions」というタブが追加され、幾つかのコンポーネントが登録されます。AJAXを使用するには、Web.configに適切な設定が必要です。Extensions」タブにあるコンポーネントをページに配置したりすると、Web.configに必要な設定が書き込まれます。Studioをインストールしていない場合は、Web.configの設定を自分で書き込む必要があります。AJAXをインストールしたフォルダにあります。Extensions\v1.0.61025\web.config」のようなパスで見つかるでしょう。AJAXを使ってみましょう。ここでは、前回、前々回と同様、ゆうパックの料金を調べるWebアプリケーションを作成します。Studioを使用した場合の手順は、次のようになります。Site」テンプレートを使用して、新しいWebサイトを作成します。Site」テンプレートを使用しなかったり、既存のWebサイトを使うことも可能です。)+Default.aspxのデザインを開きます。ScriptManagerコントロールが一つ配置されていることを確認します。Extensions」タブからScriptManagerをページにドラッグ&ドロップして、配置します。ScriptManagerは必ず1つだけ配置します。Extensions」タブからUpdatePanelをページにドラッグ&ドロップして、配置します。+前々号の「Ajaxを使用しない方法」で使用したコントロールをUpdatePanelコントロール内に全て配置します。コントロールのプロパティやイベントの設定も「Ajaxを使用しない方法」と全く同じにします。「Ajaxを使用しない方法」で紹介したコードをそのまま使用します。具体的には、次のようになります(ここでは、単一ページにしています)。</form></body></html>}}以上ですべて終了です。驚くことに、前々回紹介した、Ajaxを使用せずに、今までどおりポストバックを使用する方法と、ほとんど同じになります。コードは全く同じで、違いは、荷物のサイズを選択するDropDownListコントロールと、結果を表示するLabelコントロールがUpdatePanelコントロールの中(<ContentTemplate>の中)に入っていることだけです。自分でJavaScriptを書く必要も、Webサービスを作成する必要もありません。UpdatePanelコントロールを使うためには、ScriptManagerコントロールが必要です。UpdatePanelコントロールを使いたいページにScriptManagerコントロールが無ければ、まずScriptManagerコントロールを追加してから、UpdatePanelコントロールを追加します。ScriptManagerコントロールは、1つのページに1つだけ配置できます。[#j39e4fc2]今まで紹介してきたAjaxのサンプルでは、ゆうパックの料金を調べている最中に、「読み込み中...」と表示されていましたが、上記の例では、表示されません。このような現在の状況を表示するには、UpdateProgressコントロールを使います。上記のサンプルに現在の状況を表示するには、まずページにUpdateProgressコントロールを追加し、その中(<ProgressTemplate>の中)に「読み込み中...」と記入します。このUpdateProgressコントロールのAssociatedUpdatePanelIDプロパティを"UpdatePanel1"とし、表示する状況のUpdatePanelと関連付けます。上記のサンプルにUpdateProgressコントロールを追加して、「読み込み中...」と表示されるようにしたコードは、以下のようになります。ここでは、DisplayAfterプロパティを0にして、すぐに「読み込み中...」が表示されるようにしています。