2つのAJAX：「jQuery AJAX API」と「ASP.NET AJAX」

実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント 第8回

　本連載ではツールやフレームワークの機能を最大限利用しつつ、保守、開発効率を意識したWebフォームアプリケーションを開発する方法を学んでいきます。今回は前回のjQueryに引き続きRIAに欠かせないAJAXをWebフォームアプリケーションに導入する方法について学んでいきます。

2つのAJAX

　ASP.NET WebフォームアプリケーションにAJAXを導入する方法には大きく分けて2つの方法があります。一つがjQueryのAJAX APIなどJavaScriptを使い自前で行う方法、もう一つがASP.NET AJAXを利用する方法です。

　それぞれの具体的な実装方法は後で説明するとして、大まかな特徴についてまとめると次のようになります。

［1］JavaScriptを使い自前で行う方法

• 本来の意味でのAJAXを実現できる。
• ASP.NET Webフォームアプリケーションより上位の仕組みであるHTTPハンドラーなどを使い、非同期アクセス用のエンドポイントを用意する必要がある。
• ASP.NETの他に、JavaScript、HTMLに対する相応の知識が必要となる。

［2］ASP.NET AJAXを利用する方法

• 既存コードを生かしつつ、最低限のコード追加でAJAXを導入できる。
• ほぼASP.NETの知識のみで実装が可能。
• ページのデータすべてをサーバーに送信するため、厳密な意味ではAJAXというには無駄が多い。

　それでは、実際どのようにAJAXを導入していけばよいのか、予約変更画面の場所による会議室の絞り込みを例にして、それぞれの方法について説明していきましょう。

　説明に入る前に、前回で使用したAJAXのイメージ図について、もう一度おさらいしておきましょう。

図1：AJAXを用いたドロップダウンリストの動的変更

jQuery AJAX APIを用いたAJAX導入

　まずはJavaScriptを用いて自前で行う方法です。今回はjQueryのAJAX APIを使用します。

　jQuery AJAX APIを用いた会議室の絞り込み処理のイメージを以下に示します。

図2：jQuery AJAX APIを用いたドロップダウンリストの動的変更

jQuery AJAX APIの導入例

［1］非同期リクエストのエンドポイントを作成する

　JavaScriptを使って非同期でデータを送り、処理結果を返すためのエンドポイントを、Webサイトに追加します。この処理はASP.NET Webフォームアプリケーションの範囲ではなく、HTTPハンドラーというより上位のASP.NETの機能を使用する必要があります。

1. Webサイトに「ジェネリックハンドラー」を追加する

　Webサイトに新規項目として「ジェネリックハンドラー」を"MeetingRoomsHandler.ashx"という名前で追加します。

　「ジェネリックハンドラー」は今回の例のような独自の処理を行うためのHTTPハンドラーです。HTTPハンドラーとはASP.NET Webアプリケーションに対するHTTP要求を処理するための仕組みで、ASP.NET Webページを処理するのも専用のHTTPハンドラーが行っています。詳しくは「HTTPハンドラーとHTTPモジュールの概要-MSDNライブラリ」のページを参照してください。

2. 会議室データ取得処理を実装する

　1.で作成したジェネリックハンドラーのProcessRequestメソッドを実装し、会議室データ取得処理を次のように実装します。

リスト1 会議室データ取得処理（MeetingRoomsHander.ashxより）

public void ProcessRequest(HttpContext context)
{
  // 絞り込み条件となる場所IDを取得する
  int? locationId = null;
  var locationIdParameter = context.Request.QueryString["locationId"];	// （1）
  if (!String.IsNullOrEmpty(locationIdParameter))
  {
    locationId = Int32.Parse(locationIdParameter);
  }

  // 場所を条件に会議室データを取得する
  var logic = new MeetingRoomLogic();
  var meetingRooms = logic.SelectByLocation(locationId);  // （2）

  // 会議室データから必要な項目のみを持つ匿名型オブジェクトに変換する
  var results = meetingRooms.Select(x => new
  {
    meetingRoomId = x.MeetingRoomId,
    meetingRoomName = x.MeetingRoomName
  });	// （3）

  // 会議室データをJSON形式に変換する
  var serializer = new JavaScriptSerializer();
  var json = serializer.Serialize(results);	// （4）

  // 結果を返却する
  context.Response.ContentType = "application/json";	// （5）
  context.Response.Write(json);
}

　（1）絞り込み条件となる場所IDを取得する：本連載の第3回で説明したQueryStringより、選択した場所のIDを取得します。そして、会議室データ取得処理に合わせてint?型に変換しておきます。

　（2）場所を条件に会議室データ取得する：本連載第1回、第2回で説明したビジネスロジック層のクラスを使い、場所に応じた会議室データを取得します。

　（3）会議室データから必要な項目のみを持つ匿名型オブジェクトに変換する：会議室データにはドロップダウンリストには必要ない項目も含まれているため、必要な項目だけ取り出します。この操作にはLINQのSelectメソッドを使って匿名型にするのが簡単です。

　（4）会議室データをJSON形式に変換する：データを返した後JavaScriptで処理しやすいよう、データをJSON形式に変換して返します。変換にはJavaScriptSerializerクラスを用いて（3）で作成したデータをシリアライズします。

　（5）結果を返却する：返却データのContent-TypeをJSON形式に設定したのち、（4）で変換したJSONデータを返却データに書き込みます。