触ってみようASP.NET 2.0 AJAX Extensions

Microsoft ASP.NET AJAXの利用方法を学習する

MicrosoftのAJAXフレームワーク、「ASP.NET AJAX」の本格リリースが近づいてきました。本稿では、JavaScriptを理解しなくともAJAXの技術を利用することが可能なASP.NET 2.0 AJAX Extensionsについて解説します。特に、一番有効的に活用することが可能なUpdatePanelコントロール、UpdateProgressコントロールの2点については細かく触れていきます。

はじめに

　ASP.NET AJAXはASP.NET 2.0上で動作するAJAXの技術セットで、アドインとして利用することができます。ASP.NET AJAXのフレームワークはJavaScriptで書かれていて、クライアントサイド（JavaScript+DHTML）中心の開発手法とサーバーサイド（ASP.NET 2.0）中心の開発手法があり、使用しやすい方を中心に利用することができます。

　クライアントサイドの特徴として、JavaScriptを記述する際のオブジェクト指向のサポート、独自の名前空間やJSONシリアライザのサポートにより、開発を容易に行えるようになっています。しかしクライアントサイド中心の開発では、基本的なAJAXの動作原理とJavaScript+DHTMLに精通していることが必要になります。

　一方、サーバーサイド中心の開発では、サーバーサイドのコントロールとして、AJAXの機能を持ったコントロールがあらかじめ用意されており、それらをWebページ上に配置して必要なプロパティを設定することで、WebページにAJAXの機能を付加させることができます。そのため、ASP.NET 2.0の開発者なら、違和感なくこれらのコントロールを利用することができます（図1）。

　今回はASP.NET 2.0 AJAX Extensions（以下、AJAX Extensions）しか扱いませんが、ASP.NET AJAXは全部で3種類（現在は4種類）の構成でなっています（図1）。

図1 Microsoft ASP.NET AJAX全体図

• Microsoft AJAX Library
  クライアントサイドの技術で、JavaScript+DHTMLで開発をすることができる人向けのAJAX Libraryです。サーバーサイドの技術がASP.NETだけに限定されないという特徴があります（PHP、Java、Cold Fusionなどの技術が利用可能です）。
• ASP.NET 2.0 AJAX Extensions
  AJAXの機能を持ったコントロールを使っていくことで、JavaScriptを知らなくてもAJAXを利用できる、サーバーサイドの技術です。
• ASP.NET AJAX CTP
  AJAX Extensionsにまだ含まれていない開発中の機能です。この中には将来的にAJAX Extensionsに含まれる予定のコントロールや機能が詰まっています。これを利用する際にはAJAX Extensionsをインストールする必要があります。主な機能として、文字入力の補完を行うAutoCompleteExtenderコントロールや、コントロールのDragを可能にするDragOverlayExtenderコントロールなどがあります。
• ASP.NET AJAX Control Toolkit
  AJAX Extensionsが使われているWebページ上で利用可能なAJAX機能を持ったコントロール群です。最終的には50個以上のコントロールが利用可能になります。また、自作のAJAXコントロールを作成するためのテンプレートをインストールすることも可能です。

　本稿では、ASP.NET AJAXの中でもサーバーサイド技術AJAX Extensionsにフォーカスし、開発を進める上で覚えておきたい知識を紹介します。なお、本稿を執筆する際に利用しているのはASP.NET AJAX RCになっています。正式版では仕様などが変更になる可能性がある点に注意してください。

対象読者

• ASP.NET 2.0を使ったことがある人
• AJAXに興味がある人
• AJAXに興味があるが、JavaScriptが分からない人

必要な環境と準備

• Visual Web Developer 2005 Express EditionもしくはVisual Studio 2005（以下、VS）
• ASP.NET AJAX 1.0 RC（V1.0がリリースされている場合はそちらを使用してください）

　ASP.NET AJAXの入手は公式サイトにアクセスし、画面上部の［Download］という項目を選択します（図2）。

図2 ASP.NET AJAXサイトTop画面

　選択後［ASP.NET AJAX 1.0 RC］を選択してダウンロード画面に移動します（図3）。

図3 ASP.NET AJAXサイトダウンロード画面

　ページ遷移後［Download］ボタンをクリックするとインストーラをダウンロードすることができます（図4）。

図4 ASP.NET AJAX 1.0 RC ダウンロード画面

　ダウンロード後インストーラを実行すると、次のようにウィザードが起動します（図5）。

図5 Microsoft ASP.NET 2.0 AJAX Extensions Setupウィザード

　後は、ウィザードの手順通りに進めていけばOKです。

ASP.NET 2.0 AJAX Extensions対応Webフォームの作成

　それではさっそく、具体的なサンプルを作成してみることにしましょう。VSを起動し、スタートページ上の［Webサイト］の作成を選択してください。次のような［新しいWebサイト］ダイアログが表示され、 AJAX Extensionsに対応したテンプレートが追加されていることが確認できるはずです（図6）。

図6 ［新しいWebサイト］ダイアログ

　テンプレートに［ASP.NET AJAX-Enabled Web Site］を、言語に［Visual Basic］を選択した後、Webサイトを作成します。デフォルトで作成されたWebサイトの状態は、次の通りです（図7）。

図7 ［ASP.NET AJAX-Enabled Web Site］を選択時のWebサイト

　ここで、いくつか注目しておくべき点を挙げておきましょう。

1. アプリケーション構成ファイル（Web.config）
   ［ASP.NET AJAX-Enabled Web Site］テンプレートを選択した場合、Web.configとDefault.aspxファイル内の構成が他のテンプレートとは大きく異なっています。特にWeb.configにはASP.NET AJAXを利用するための設定が書かれています。例えばsystem.web要素には、複数の場所でMicrosoft.Web.Extensions（AJAX Extensionsのアセンブリ）という項目を確認できるはずです。他にもさまざまな場所でASP.NET AJAXのための設定が書かれているので、気になる方は、通常のWebサイトを作成した際に作られるWeb.configと見比べてください。
    
2. ツールボックス
   インストーラからインストール中にAJAX ExtensionsのコントロールがGlobal Assembly Cashに登録され、VS上のツールボックスにAJAX Extensionsというカテゴリを自動生成し、コントロールが追加されます。各コントロールは次のような機能を持っています（図8）。
    
   図8 各コントロールの機能概要