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

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

ASP.NET AJAXの導入例

　では実例を見てみましょう。例として、予約検索画面のコードを抜粋します。

リスト4 ASP.NET AJAXのコード例（MRRS.Reservation.aspxより）

<%-- （1） --%>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h2>
  予約検索
</h2>
<%-- （2） --%>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <p>
      場所 :
      <asp:DropDownList ID="LocationDropDownList" runat="server"
        AppendDataBoundItems="True" DataSourceID="LocationObjectDataSource"
        DataTextField="LocationName" DataValueField="LocationId"
        AutoPostBack="True"><%-- （3） --%>
        <asp:ListItem Value="" Text="" />
      </asp:DropDownList>
      <asp:ObjectDataSource ID="LocationObjectDataSource"
        runat="server" SelectMethod="Select"
        TypeName="MRRS.BLL.LocationLogic">
        <SelectParameters>
          <asp:Parameter DefaultValue="" Name="locationName" Type="String" />
        </SelectParameters>
      </asp:ObjectDataSource>
    </p>
    <p>
      会議室 :
      <asp:DropDownList ID="MeetingRoomDropDownList" runat="server"
        AppendDataBoundItems="True" DataSourceID="MeetingRoomObjectDataSource"
        DataTextField="MeetingRoomName" DataValueField="MeetingRoomId">
        <asp:ListItem Value="" Text="" />
      </asp:DropDownList>
      <asp:ObjectDataSource ID="MeetingRoomObjectDataSource" runat="server"
        SelectMethod="SelectByLocation" TypeName="MRRS.BLL.MeetingRoomLogic">
        <SelectParameters>
          <asp:ControlParameter ControlID="LocationDropDownList"
            Name="locationId" PropertyName="SelectedValue" Type="Int32" />
        </SelectParameters>
      </asp:ObjectDataSource>
    </p>
  </ContentTemplate>
  <%-- （4） --%>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="LocationDropDownList"
      EventName="SelectedIndexChanged" />
  </Triggers>
</asp:UpdatePanel>

（1） ScriptManagerコントロールをページ内に配置する

　 ScriptManagerコントロールはUpdatePanelコントロールなどASP.NET AJAX関連コントロールより前に配置する必要があるため、ページの先頭やContentHolderコントロールの先頭に配置します。

　 UpdatePanelコントロールなどの後に配置した場合、実行時に次のような例外が発生します。

ID'UpdatePanel1'のコントロールを使用するには、ページ上にScriptManagerが必要です。ScriptManagerは、ScriptManagerを必要とするコントロールの前に出現する必要があります。

（2） AJAXの対象としたい部分をUpdatePanelコントロールで囲む

　 UpdatePanelコントロールを配置し、ContentTemplate要素の中にAJAX対象としたいコントロールを配置します。

（3） 場所ドロップダウンリストのAutoPostBackプロパティをTrueにする

　 場所を変更したら非同期PostBackが発生するようにするため、AutoPostBackプロパティはTrueに設定します。

（4） AsyncPostBackTriggerに場所ドロップダウンリストのSelectedIndexChangedイベントを登録する

　 UpdatePanelコントロール内Triggers要素の中にAsyncPostBackTriggerコントロールを配置し、場所ドロップダウンリストのSelectedIndexChangedイベントが発生した際に非同期PostBackが発生するよう設定します。

　AJAXを利用するには、たったこれだけでOKです。非AJAX版のコードをほぼそのまま流用できることが、ASP.NET AJAXの最大の強みです。

UpdatePanelコントロールとjQuery UIを組み合わせた際の注意点

　本稿で紹介したUpdatePanelコントロールと一緒にjQuery UIのウィジェットを用いる際、注意が必要なケースがあります。

　サンプルアプリケーションでは、UpdatePanel内の予約日時の日付項目に、jQuery UIのDatePickerを使用していますが、何も考えずに使うと、非同期ポストバック後にDatePickerの設定が解除されてしまいます。

図4：非同期ポストバック前後のDatePickerの動作

　これは非同期ポストバック後の再表示の際、UpdatePanel内のDOMが再構築されてしまい、最初にDatePickerを設定したテキストボックスが破棄されてしまうためです。

　この現象を解消するには、次のコードのように非同期ポストバック後に再度DatePickerの設定を行う必要があります。

リスト5 UpdatePanelの非同期ポストバックへの対応（ReservationsAdd.aspxより）

$(document).ready(function () {
  // DatePickerを設定
  setUpDatePicker();

  // 非同期ポストバック後にDatePickerの再設定を行う
  var mng = Sys.WebForms.PageRequestManager.getInstance();  // （1）
  mng.add_endRequest(         // （2）
    function (sender, args) {
      setUpDatePicker();
      });
  });

（1） PageRequestManagerのオブジェクトを取得する

　 非同期ポストバックに関する動作をカスタマイズするため、PageRequestManagerクラスのオブジェクトを取得します。

（2） 非同期ポストバック終了時のイベントハンドラーを設定する

　 PageRequestManager.add_endRequestメソッドを使い、非同期ポストバック後のイベントに、DatePicker設定処理を登録します。

　PageRequestManagerクラスは、ASP.NET AJAXのJavaScript側のライブラリーである「Microsoft Ajax Library」に含まれるクラスで、ASP.NET AJAXのUpdatePanelによる非同期ポストバックを用いた部分ページ更新処理を制御しているクラスです。

　PageRequestManagerクラスでは、非同期ポストバックのリクエスト開始、終了を始めとしたそれぞれのイベントを管理していて、今回使用したadd_endRequestメソッドを使うと、非同期ポストバック終了後のタイミングに処理を挟み込むことが可能になります。

　PageRequestManagerの詳細やカスタマイズ可能なその他のイベントについては、「クライアントスクリプトでの部分ページ更新の管理-MSDNライブラリ」のページを参照してください。

まとめ

　ASP.NET WebフォームアプリケーションにAJAXを導入する2つの方法について説明してきましたが、いかがでしょうか。個人的には、最初はASP.NET AJAXで簡易的に実装し、徐々にjQueryなどを用いた本来のAJAXに移行していくのがよいのではないかなと思っています。

　今回のポイントをまとめると次のようになります。

• ASP.NET WebフォームアプリケーションにAJAXを導入するには大きく2つの方法がある。
  • JavaScriptを用いて自前で行う
  • ASP.NET AJAXを利用する
• JavaScriptを用いて自前で行うには、jQuery AJAX APIなどのライブラリを利用する。
  • 非同期アクセス用のエンドポイントを作成する必要がある。
  • JavaScript、HTMLへの相応の知識も必要となる。
  • コード量が比較的多くなってしまう。
• ASP.NET AJAXを利用する際、主にScriptManagerコントロールとUpdatePanelコントロールを活用する。
  • 既存のコードを再利用することができる。
  • ほぼASP.NETに関する知識だけで利用できる。
  • ページ全体をサーバーに送信するため、通信データ量が多くなる傾向がある。
  • UpdatePanelコントロールと共にjQuery UIを使用する場合、非同期ポストバック後に再度jQuery UIの設定処理を行う必要がある。
  • 非同期ポストバックの処理をカスタマイズするには、PageRequestManagerクラスを使用する。

最後に

　さて、8回に渡ってASP.NET Webフォームを用いた業務アプリケーション作成のポイントを紹介してきた本連載も、今回が最終回です。本連載をご覧いただいた読者のみなさん、そしてWINGSプロジェクトのみなさん、どうもありがとうございました。

　最後にもう一つだけ、読者の皆さんに伝えたいことがあります。

　実際に業務アプリケーションを開発するには、本連載では扱わなかった認証処理や動的メニュー構築など、さまざまな課題がまだまだあります。今後開発を行っていく上でどのようにしたら分からない問題に直面した際も、まずはMSDNライブラリなどのドキュメントを当たってみてください。ASP.NET Webフォームには、きっとその問題を解決する方法が存在するはずです。

　ASP.NET Webフォームに限らず、フレームワークにはある一定の思想、原理が存在します。

　その思想、原理を理解すれば、「フレームワーク」がもともと持っている機能、アーキテクチャを最大限に生かすことができます。反対に思想、原理を無視すれば、いずれは無理がたたり変化に対応することができなくなってしまいます。

　皆さんには本連載を通じて、そういった「フレームワークの原理」を生かした開発のポイントを紹介してきたつもりです。ぜひ、目の前の実装例だけを見るのではなく、もっと広い視点でアプリケーション開発を進めていくよう、一緒に心掛けていきましょう。