Ajax対応コントロール/コンポーネントの開発：Periodic Refreshパターン

定期リフレッシュを行うAjaxコンポーネントをASP.NETで開発する

GetNotificationId JavaScript関数の再確認

　ここで、リスト1のコードに戻り、前に説明しなかった部分について見ていきます。リスト7に、該当部分を太字で示します。

リスト7　OnPreRenderメソッドの再確認

protected override void OnPreRender(EventArgs e)
{
   DetermineRenderClientScript();
   if (renderClientScript)
   {
      ``string js = Page.ClientScript.GetCallbackEventReference(
               this,
               "GetNotificationId('"+ClientID+"')",
               "AjaxNotifierCallback",
               "'" + ClientID + "'", true);
      string js2 = "function DoCallback () {" + js + ";}";

      Page.ClientScript.RegisterClientScriptResource
               (typeof(AjaxNotifier),
               "CustomComponents.AjaxNotifier.js");
      Page.ClientScript.RegisterClientScriptBlock(typeof(AjaxNotifier),
               typeof(AjaxNotifier).FullName +
               "DoCallback", js2, true);
      Page.ClientScript.RegisterStartupScript(typeof(AjaxNotifier),
               typeof(AjaxNotifier).FullName +
               "WebDoCallback", js,true);
   }
   base.OnPreRender(e);
}

　リスト7の太字部分が示すように、GetNotificationIdJavaScript関数は、クライアントからサーバに渡される通知IDを特定する処理に使われています。この通知IDは、これまでの時点でユーザーに示されている最新の通知のIDです。GetNotificationIdJavaScript関数の実装は次のようになっています。

function GetNotificationId(ajaxNotifierId)
{
   var ajaxNotifier = document.getElementById(ajaxNotifierId);
   return ajaxNotifier.notificationId;
}

　リスト7で見たように、OnPreRenderは、AjaxNotifierコントロールのClientIDプロパティの値をGetNotificationIdJavaScript関数に渡します。GetNotificationIdは、この値をdocument DOMオブジェクトのgetElementByIdメソッドに渡すことでAjaxNotifierコントロールの親HTML要素にアクセスし、親要素のnotificationId属性の値を返します。この属性が、現在のユーザーに示されている最新の通知のIDを表すカスタムHTML属性であることに注目してください。

　リスト7の太字部分のコードが示すように、OnPreRenderは、クライアントコールバック要求のコールバックとしてAjaxNotifierCallbackJavaScript関数を登録します。この関数は、サーバ応答が到着すると自動的に呼び出されます。AjaxNotifierCallbackJavaScript関数の実装をリスト8に示します。

リスト8　AjaxNotifierCallbackメソッド

function AjaxNotifierCallback(result, context)
{
   var xmlDocument = CreateXmlDocument();
   xmlDocument.loadXML(result);

   var notification = xmlDocument.documentElement;
   if (notification.childNodes.length > 0)
   {
      var notificationId = notification.childNodes[0].text;
      var ajaxNotifier = document.getElementById(context);
      if (notificationId != ajaxNotifier.notificationId)
      {
         ajaxNotifier.notificationId = notificationId;
         InitializeDetailsPopup(context);
         var notificationSource = notification.childNodes[1].text;

         var notificationSummary = notification.childNodes[2].text;

         var content = "<r>" +
            "<td colspan='2'>" +
               "<p><center><b>Notification</b></center></p>" +
               "<p><b>From: </b>"+notificationSource+"</p>" +
               "<p><b>Message:</b><br/>"+notificationSummary+"</p>" +
            "</td>" +
         "</r>";
         DisplayDetailsPopup (content);
      }
   }
   setTimeout(DoCallback,6000);
}

　AjaxNotifierCallback関数は、まず、第27章で説明したCreateXmlDocumentJavaScript関数を呼び出して、XMLストアを作成します。

var xmlDocument = CreateXmlDocument();

　次に、サーバから受け取ったXMLドキュメントを、XMLストアにロードします。

xmlDocument.loadXML(result);

　次に、XMLドキュメントのドキュメント要素にアクセスします。リスト6に示したように、このドキュメント要素は<notification>要素です。

var notification = xmlDocument.documentElement;

　そして、ドキュメント要素の最初の子要素にアクセスします。リスト6に示したように、最初の子要素は<id>要素です。

var notificationId = notification.childNodes[0].text;

　次に、AjaxNotifierCallbackはAjaxNotifierコントロールの親HTML要素にアクセスします。

var ajaxNotifier = document.getElementById(context);

　AjaxNotifierコントロールの親HTML要素には、現在のユーザーに示されている最新の通知のIDを持つnotificationIdという名前のカスタム属性があることを思い出してください。AjaxNotifierCallbackは、サーバから受け取った通知のIDが、現在のユーザーに示されている最新の通知のIDと異なるかどうかを確認し、異なっている場合は、新しい通知IDをAjaxNotifierコントロールの親HTML要素のnotificationId属性に割り当てます。

ajaxNotifier.notificationId = notificationId;

　その後、AjaxNotifierCallbackは、第26章で説明したInitializeDetailsPopupJavaScript関数を呼び出して、ポップアップダイアログを初期化します。

InitializeDetailsPopup(context);

　次に、<notification>ドキュメント要素にある2番目と3番目の子要素の、開始タグと終了タグに挟まれているテキストコンテンツにアクセスします。リスト6を見るとわかるとおり、この2つの子要素は<source>要素と<summary>要素です。

var notificationSource = notification.childNodes[1].text;
var notificationSummary = notification.childNodes[2].text;

　次に、AjaxNotifierCallbackは、新しい通知を表示するHTMLを生成します。

var content = "<r>" +
                 "<td colspan='2'>" +
                    "<p><center><b>New Message</b></center></p>" +
                    "<p><b>From: </b>"+notificationSource+"</p>" +
                    "<p><b>Message:</b><br/>"+
                    notificationSummary+"</p>" +
                 "</td>" +
              "</r>";

　そして、DisplayDetailsPopup関数を呼び出して、詳細ポップアップダイアログにHTMLを表示します。

DisplayDetailsPopup (content);

　最後に、setTimeoutJavaScript関数を呼び出します。

setTimeout(DoCallback,6000);

　リスト1では、DoCallbackJavaScript関数が、サーバへの非同期クライアントコールバックを行うJavaScriptコードを実行し、ポストされた最新の通知が含まれるXMLドキュメントをダウンロードしています。AjaxNotifierCallbackJavaScript関数は、ページがロードされると自動的に呼び出されます。つまり、ユーザーがページをダウンロードすると、次のシーケンスが自動的にトリガされます。

1. AjaxNotifierCallbackが呼び出される。
2. AjaxNotifierCallbackが、ポストされた最新の通知を示すダイアログをポップアップ表示する。
3. AjaxNotifierCallbackがsetTimeout関数を呼び出す。

　setTimeout関数は、定期的にDoCallback関数を呼び出します。このDoCallback関数は、サーバに対してクライアントコールバック要求を行うJavaScriptコードを実行し、ポストされた最新の通知が含まれるXMLドキュメントをダウンロードします。サーバの応答が到着すると、JavaScriptコードはAjaxNotifierCallbackメソッドを呼び出し、このメソッドは前に説明した手順を繰り返します。

　次のワークフローで、AjaxNotifierの動作を自分自身で確かめてみましょう。

1. 『Professional ASP.NET 2.0 Server Controls and Component Development』のサンプルコードを取得して、第29章のコードファイルを含むアプリケーションをVisual Studio 2005で開きます。
2. アプリケーションを実行し、「AjaxNotifier.aspx」ページにアクセスします。リスト4がこのページの内容です。AjaxNotifierが自動的にサーバへの非同期コールバックを行って最新の通知を取得し、図1のポップアップダイアログに表示することを確認してください。
3. Server Explorerウィンドウに移動して、Notificationsという名前のデータベーステーブルにアクセスします。
4. 新しい通知レコードをテーブルに追加します。AjaxNotifierが最新の通知を自動的に表示していることを確認してください。

　このアプリケーションを最初に起動したときには、AjaxNotifierによってすべての通知が1つ1つ表示されます。これは、AjaxNotifierの現在の実装には、前回のセッションでユーザーに示された最新の通知のIDが格納されていないからです。そのため、アプリケーションを起動するたびに、この通知IDがゼロにリセットされます。この点は、ASP.NET 2.0のProfileオブジェクトに最新の通知のIDを格納することで簡単に修正できます。

　この記事は、Shahram Khosravi著『Professional ASP.NET 2.0 Server Control and Component Development』（Wrox Pr Inc.、2006年8月）、第29章「Developing Ajax-Enabled Controls and Components:More Ajax Patterns」からの抜粋です。
　Copyright 2007 by WROX.All rights reserved.
　この記事の内容を複製する場合は発行元の許可が必要です。