ASP.NET MVCで認証、テスト、フィルタ機能、AJAXを活用しよう

ASP.NET MVCフレームワーク 正式版 入門（3）

ASP.NET MVCにおけるAJAX対応

　ASP.NET AJAX（Extensions／Control Toolkit）とASP.NET MVCの相性はポストバックの非利用という点からも推測できるかと思いますが、相性はよくありません。しかし、ASP.NET MVCではMVC専用のAJAXクラスが用意されています。

AjaxHelperクラスメンバ

メソッド	概要
ActionLink	Ajaxを利用した”文字列”を返すハイパーリンクを生成
BeginForm	Ajaxを利用したViewや文字列を返すフォームを生成
BeginRouteForm	Ajaxを利用したViewや文字列を返す異なるルートのフォームを生成
RouteLink	Ajaxを利用した”文字列”を返す異なるルートへのハイパーリンクを生成

　HtmlHelperクラスに比べて、AjaxHelperクラスは利用できるメソッドが少なく、大別すると2種類しかありません。

　ActionLinkメソッドは文字列を、BeginForm／BeginRouteFormメソッドはViewや文字列を部分更新します。実開発ではパーシャルレンダリングの時のみの利用とし、それ以外の例えばアニメーションなどを実装したい場合はjQueryなどを利用して実装します。

　また、BeginForm／BeginRouteFormメソッドはHtml.BeginForm同様にusingステートメントを使い、通常の構文同様{}内に非同期通信をする要素の記述をします。

　なお、AJAXリクエストを判別するためにRequest.IsAjaxRequest拡張メソッドがあります。このIsAjaxRequestメソッドはASP.NET AJAX（Microsoft AJAX Library）のリクエストは勿論、jQuery、Prototype.js等のJavaScriptライブラリのAJAXリクエストにも対応しています。このメソッドのメリットとして、AjaxHelperクラスによるAJAXリクエストを判定し、ページの中でAJAXを利用したユーザーコントロールの部分更新が可能になります。実際の活用サンプルは次のようになります。

BeginFormメソッドを利用したサンプル

　実行した画面は図5～6のようになります。ユーザーコントロールは、テーブルタグに画像と文字を埋め込んだだけのあまり意味の無いサンプルなので、割愛させていただきます。詳しくはサンプルを参照ください。

図5 実行直後の画面

図6 ボタンクリック後の画面

　コントローラ側の処理はこちら。

HomeControllerクラスの一部

public ActionResult AJAXRequest()
{
//非同期通信の判定
    if (Request.IsAjaxRequest())
    {
        // AJAXリクエストの時はPartialPage.ascxを返す
        return PartialView("PartialPage");
    }
    //同期通信の場合はIndex.aspxを返す
    return  View("AJAXIndex");
}

　上記コードではIsAjaxRequestメソッドを使い、非同期通信のリクエストがあった時のみ、部分ページとしてユーザーコントロールを表示させます。もし通常のリクエストであればIndex.aspxページを返します。

　フォーム側の処理はこちらです。BeginFormメソッドの1番基本的な使い方は第一パラメタにActionメソッド名、第二パラメタにAjaxOptionsクラスを設定します。AjaxOptionsクラスは、ASP.NET MVCでAJAXを実行する場合のオプションを設定するクラスです。

　オーソドックスな利用方法として、AJAXの動作の対象要素IDをUpdateTargetIdで指定します。

　なお、usingブロック内で通信が発生した場合に非同期通信が発生します。

AJAXIndex.aspxの一部

<%--Ajax.BeginForm(Actionメソッド名 ,
        new AjaxOptions() { UpdateTargetId=Ajax動作の対象要素ID}) --%>
<% using (Ajax.BeginForm("AJAXRequest",
        new AjaxOptions() { UpdateTargetId = "divView" }))
   { %>
        <%-- ボタンクリック時にAJAXRequestメソッドを経由する --%>
        <input type="submit" value="部分更新" />
<% } %>

<div id="divView">
</div>

　上記の部分では、BeginFormメソッドで、AJAXRequestアクションメソッドと、AJAXによる通信結果の動作の対象要素IDをdivViewに設定しています。

ActionLinkメソッドと、IsAjaxRequestメソッドを利用したサンプル

　実行した画面は図7～8のようになります。

図7 実行直後の画面

図8 ハイパーリンクをクリックした後の画面

　コントローラ側の処理はこちら。

HomeControllerクラスの一部

[OutputCache(Duration = 5, VaryByParam = "none")]
public string WhatTimeIsIt()
{
    return DateTime.Now.ToString();
}

　上記コードでは、OutputCache属性でDurationプロパティを5に、VaryByParamプロパティを"none"に設定しています。戻り値は、現在の時刻を返しています。

　フォーム側の処理はこちらです。Ajax.ActionLinkメソッドはHtml.ActionLink同様にハイパーリンクが表示されます。違いはリンクをクリックした時の通信が同期か、非同期かの違いです。Ajax.ActionLinkメソッドの1番基本的な使い方は第一パラメタにリンクテキストを、第二パラメタにActionメソッド名、第三パラメタにAjaxOptionsクラスを設定します。

AJAXIndex.aspxの一部

<%-- Ajax.ActionLink(リンクテキスト,Actionメソッド名 ,
      AjaxOptions { UpdateTargetId=Ajax動作の対象要素ID}) --%>
<%= Ajax.ActionLink("現在時刻表示", "WhatTimeIsIt",
          new AjaxOptions {  UpdateTargetId = "TimeDate" })%>
<div>時間：<span id="TimeDate"></span></div>

　上記の部分では、ActionLinkメソッドで、"現在時刻表示"というハイパーリンクをクリックしたときにWhatTimeアクションメソッドにルーティングされるように設定し、AJAXによる通信結果の動作の対象要素IDをTimeDateに設定しています。

　以上がサーバーサイドのAJAX専用クラスを利用したサンプルの紹介でした。何度も記述していますが、クライアントスクリプトは、Microsoft AJAX LibraryやjQueryの標準サポートが行われています。部分更新以外のAJAX機能を利用する際はこちらを利用してください。