ASP.NET AJAX 1.0 の世界【第2回 ASP.NET AJAX によるサーバセントリックな実装】

※ この内容は、こちらの記事にまとめました（2007/06 更新）

【環境】
ASP.NET AJAX 1.0 RC
ASP.NET AJAX December CTP (with ASP.NET AJAX Control Toolkit)

こんにちは。
前回 ASP.NET AJAX の環境準備が終わりましたので、今日からはいよいよ実際に使っていきたいと思います。

■ ASP.NET AJAX とは

まず、実装の前に、ASP.NET AJAX とは何なのかということを簡単におさらいしておきましょう。ASP.NET と AJAX については既にご存知であるという前提で記述します。
現在 .NET 環境でご利用されている ASP.NET ですが、開発者のみなさんは、かつての ASP のように、HTML 固有の画面遷移や Web に固有の処理に悩まされることなく、通常の Windows 開発環境のごとくビジネスロジックに集中してそのロジック遷移を実装されていることと思います。ASP.NET は、仕組み的に、こうした開発者の関心時以外の処理を自動化する目的から、開発者の方が記述した aspx ファイルなどへの記述をプログラムコードに一旦変換（一種のプリコンパイル）して、"サーバ側" で .NET でコンパイルし、配置しています。作成されるコードはどうしてもサーバ処理主体のものになりがちですが、現在のASP.NET には AJAX が得意とするような "クライアントサイド" の処理の記述ができないわけではありません。例えば、Validate コントロールを使った場合などには、クライアント側での Validation チェックとサーバ側での Validation チェックの双方が実装されるようになっています。しかしながら、現在の ASP.NET がクライアントサイドの処理を "充分に" 使っていたかというと、例えば AJXA に特有な XMLHTTP のようなクライアントブラウザ上で通信をする仕組みは、皮肉なことに Internet Explorer が最初に実装したにも係わらず、ASP.NET ではそれに変換するような処理を記述することができませんでした。
もうお分かりかと思いますが、ASP.NET は、ASP.NET が持つ「フレームワーク」の良さを活用して、今度は、クライアントサイドの処理も遺憾なく発揮できるようにした新しいフレームワークで、これが故に、本日ご紹介するように、まるで今までと変わりないサーバセントリックな記述をしながら、AJAX によるクライアントコードを自動生成させるといった動作が特徴的です。

■ サンプル

では、お待たせしました。今日は手始めとして、そのサーバセントリックな開発を垣間見てみましょう。

Visual Studio (もしくは Visual Web Developer) を起動し、テンプレート [ASP.NET AJAX Enabled Web Site] で新しい Web サイトを作成してください
Default.aspx のデザイナー上で改行を多数挿入して、UpdatePanel をドラッグアンドドロップしてください
UpdatePanel の中に標準コントロールの TextBox などを貼り付け、検索結果を表示する画面をデザインします
UpdatePanel の中に標準コントロールの Button を貼り付けます
Button をダブルクリックし、いつものように（通常のASP.NETの開発のときのように）、データベースからデータを検索するコードを記述してテキストボックスに表示させてみましょう

（例）データベース検索の詳細はここでは触れません。「10行でずばり」シリーズなどを参照してください

SqlConnection con = new SqlConnection(@"Server=localhost;Database=HOL_DB;User ID=SqlDev;Password=SqlDev0");
SqlCommand cmd = new SqlCommand(@"select ProductNumber, Name from ProductTbl", con);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
if (reader.Read())
{
TextBox1.Text = reader["ProductNumber"].ToString();
TextBox2.Text = reader["Name"].ToString();
}
con.Close();
ビルドをします

では、実行（デバッグ実行でも結構です）してみてください。
改行を沢山入れたので、画面をスクロールなどして、ボタンを押して実行してみるとわかりますが、従来の ASP.NET では、ポストバックにより検索をおこなっていたと思いますが、スクロールが元に戻されずにクライアントのブラウザ上で値を検索し、更新しているのがおわかりになりますか。
UpdatePanel の内部動作の詳細については、ここでは触れませんが（また機会ありましたら、弊社のイベントなどで、、、）、UpdatePanel は、通常ページレベルでおこなっていたポストバック処理を AJAX のマナー（例：JSONによる通信処理、など）でポストバックするように動作するもので、おそらく、AJAX 関連のすべてのサーバコントロールの中でもっとも基本的で、かつ重要なコントロールであるといっても過言ではないでしょう。

ためしに、先ほど貼り付けた TextBox や Button を UpdatePanel の外に移動して動作させてみると、従来の ASP.NET のようにポストバックがおこなわれ、スクロールも元に戻ってしまう様子がわかるかと思います。
このサンプルは非常に重要です。つまり、皆さんが既存で作成されている ASP.NET のアプリケーションも、ScriptManager というコントロールを貼り付け、Web.config を所定の方法で変換し、上述のようにコントロールを動かせば、あとは ASP.NET AJAX のフレームワークが、クライアントコードを自動生成し、AJAX 対応のアプリケーションに変換してくれるのです。(既存の ASP.NET のサイトを AJAX 対応に変換する手順については、http://ajax.asp.net/ のビデオキャストに収録されています。)

また、AJAX に対応したアプリケーションだとこんな恩恵も受けることができます。つぎのサンプルでは、よくある、実行待機待ちのインフォメーションやアイコンを表示する AJAX アプリケーションを構築してみましょう。

データベース検索を時間のかかる処理にするため、ボタンを押した処理部分に Sleep などを入れておきましょう。

(例)
Using System.Threading;
・・・
Thread.Sleep(5000);
Default.aspx に UpdateProgress コントロールを挿入します（UpdatePanel の外に挿入します）
UpdateProgress コントロールのプロパティ画面上で、 AssociatedUpatePanelID プロパティとして上記の UpdatePanel を選択します
UpdateProgress コントロール内に待機中を示唆する文字列(例：「しばらくお待ちください、、、」など)やイメージを貼り付けてみましょう。

ボタンを押すと、検索中のインフォメーションが表示されるようになります。

このように ASP.NET AJAX はサーバセントリックな処理を実現するため、サーバ側の ASP.NET のフレームワークにコンポーネントがインストールされますが、同時に、クライアント用のライブラリも提供されていて、クライアントで動作する際にはこのライブラリのクラスやメソッドが使われています。
第４回では、ここに記載しているようなサーバセントリックな記述ではなく、クライアントのライブラリを直接使用して実装をおこなうサンプルを記載します。