連載：Microsoft AJAX Library＆JavaScriptプログラミング 第2回　PageRequestManagerクラスでUpdatePanelコントロールを極める！ 山田 祥寛（http://www.wings.msn.to/） 2007/11/16
Page1 Page2 Page3 Page4 Page5

■非同期ポストバックの完了を通知するには？

　UpdatePanelコントロールによる部分更新を行った場合、（ページ全体をリフレッシュした場合と異なり）時としてエンド・ユーザー側で「いつ」「どの部分が」更新されたかが分かりにくいことがある。

　そこで、部分更新機能を実装する場合には（その対象がごく小さな領域である場合には特に）、更新反映のタイミングで何かしらこれをエンド・ユーザーに通知するのが好ましい。

　ここでは、更新終了時にUpdatePanelコントロール内の背景色を黄色にフラッシュする例を見てみよう。

<script type="text/javascript"> function pageLoad() {   var mng = Sys.WebForms.PageRequestManager.getInstance();   // 非同期ポストバックの完了時に呼び出される   // イベント・ハンドラを定義   mng.add_endRequest(     function(sender, args) {       // UpdatePanelコントロールの背景色を黄色に設定       $get('panel').style.backgroundColor = '#FFFF00';       // 2000ミリ秒後に背景色を白色に戻す       setTimeout("$get('panel').style.backgroundColor                                         = '#FFFFFF';", 2000);     }   ); } </script>

リスト10 非同期通信完了後、2秒間だけ該当個所の背景をフラッシュするコード（Flush.aspx）

［更新］ボタンをクリック 非同期処理が完了

非同期ポストバック完了の通知

非同期通信が完了した後、2秒間だけ更新部分の背景色が黄色になる。

　ここでは、$get関数でUpdatePanelコントロールを取得し、その背景色（backgroundColorプロパティ）を#FFFF00に設定しているわけだ。また、setTimeout関数で2000ミリ秒後に背景色を#FFFFFFに設定している。

　ちなみに、ここではPageRequestManagerクラスを利用した場合の例を見てみたが、ASP.NET AJAX Control Toolkitを使用しているならば、UpdatePanelAnimationコントロールを利用することも可能だ。このコントロールを利用することで、UpdatePanelコントロールによる部分更新の前後で任意のアニメーションを実行することが可能になる。

　UpdatePanelAnimationコントロールの扱いについては、後日、「.NET TIPS：UpdatePanelAnimationコントロールで非同期通信前後にアニメーションを実行するには？」で紹介する予定だ。

■非同期ポストバック時に発生した例外を処理するには？

　次に、非同期ポストバック時に発生した例外を、JavaScript側で処理する例を見てみよう。ここでは、サーバ側で発生した例外メッセージをメッセージボックスで表示する。

サーバ側で発生した例外情報をメッセージボックスで表示

　このサンプルを動作させるために、まずはサーバ側のイベント・ハンドラで意図的に例外を発生させることにする。

Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs)   Throw New Exception( _             "非同期ポストバック時にエラーが発生しました。") End Sub

リスト11 ボタン・クリック時に例外を発生するコード

　また、例外発生時にデバッグ中断されてしまうのを防ぐために、アプリケーション構成ファイル（Web.config）の<compilation>要素を以下のように修正する。debug属性がtrueである場合には、本サンプルは正しく動作しないので、注意してほしい。

<compilation debug="false">

リスト12 デバッグを無効にするための設定（Web.config）

本サンプルをVisual Studioからデバッグ実行した場合、［デバッグが無効です］ダイアログが表示されるが、ここでは［デバッグなしで実行する］を選択すること。［デバッグを有効にするためにWeb.configを変更する］を選択すると、debug属性が再びtrueに変更されてしまい、サンプルは正常に動作しない。

　次に、非同期ポストバック時に発生した例外を取得し、メッセージボックスに表示するためのクライアントサイドのコードだ。

<script type="text/javascript"> function pageLoad() {   var mng = Sys.WebForms.PageRequestManager.getInstance();   // 非同期ポストバックの完了時に呼び出される   // イベント・ハンドラを定義   mng.add_endRequest(     function(sender, args){       // サーバ側で発生した例外の詳細メッセージを表示       window.alert(args.get_error().message);       // 発生した例外が処理済みであることを宣言       args.set_errorHandled(true);     }   ); } </script>

リスト13 非同期ポストバック時に発生した例外を表示するコード

　サーバ側で発生したエラー情報を取得するには、Sys.EventArgs派生クラスのerrorプロパティを参照すればよい。errorプロパティはJavaScriptネイティブのErrorオブジェクトを返すので、ここではそのmessageプロパティ（詳細メッセージ）を表示しているわけだ。

　なお、endRequestイベント・ハンドラの中で例外処理を行った場合には、errorHandledプロパティ（例外を処理済みか）にtrueをセットすること。さもないと、ScriptManagerコントロールの設定に従って、デフォルトの例外処理が重複して実行されてしまう。

　ちなみに、ScriptManagerコントロールを用いた例外処理の制御については、後日「.NET TIPS：非同期通信時に発生した例外情報をロギングするには？」で紹介する予定だ。

INDEX
	Microsoft AJAX Library＆JavaScriptプログラミング
	第2回　PageRequestManagerクラスでUpdatePanelコントロールを極める！
	1．UpdatePanelコントロールを拡張するPageRequestManagerクラスの基本
	2．ボタンの2重クリックを防止するには？／実行中の非同期ポストバックをキャンセルするには？
	3．非同期ポストバックの優先順位を制御するには？
	4．非同期ポストバックの完了を通知するには？／非同期ポストバック時に発生した例外を処理するには？
	5．部分更新時にサーバサイドから追加情報を取得するには？

　

「Microsoft AJAX Library＆JavaScriptプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）