外部コントロールからUpdatePanelコントロールを更新したい
前回紹介した例は，UpdatePanelコントロール上にリフレッシュ対象のコントロールもポストバックの発生元となるコントロールも配置されている，最もシンプルなパターンでした。前回の例でも見たように，UpdatePanelコントロール配下の子コントロールは，自動的にUpdatePanelコントロール更新のトリガーとして認識されます＊1。しかし，ページの構造（レイアウト）によっては，リフレッシュ対象のコントロールとポストバックの発生元とが必ずしも隣接しているとは限らないケースがあります。つまり，ページレイアウトによっては「UpdatePanelコントロールの外部」からUpdatePanelコントロールをリフレッシュしたいというケースがあるはずです。
具体的な例を見てみましょう。以下で紹介するのは，前回登場したUpdatePanel.aspx上のButtonコントロールを，UpdatePanelコントロールの外に移動した場合の例です（図1）。
図1：変更したUpdatePanel.aspxのフォームレイアウト
まずは，このままの状態でUpdatePanel.aspxを実行してみましょう（図2）。
図2：UpdatePanel.aspxの実行結果
［更新］ボタンをクリックすると，UpdatePanelコントロールの内外いずれのLiteralコントロールもリフレッシュされてしまうことが確認できるはずです。つまり，UpdatePanelコントロール本来の部分更新が正しく動作していないわけです（UpdatePanelコントロール外部に配置されたボタンコントロールは，通常の，ページ全体に対するポストバック処理を発生しますので，この動作は当然です）。
このような場合には，UpdatePanelコントロールに対して更新のきっかけとなるコントロールとそのイベント（「トリガー」と呼びます）をあらかじめ登録しておく必要があります。トリガーを登録するには，プロパティ・ウィンドウのTriggersプロパティ右端から［...］ボタンをクリックします。
図3：［UpdatePanelTriggerコレクションエディタ］ダイアログ
［UpdatePanelTriggerコレクションエディタ］ダイアログが開きますので（図3），左下の［追加］ボタンから［AsyncPostBackTrigger］を選択し，トリガーの追加を行います。トリガーの設定は，ダイアログ右の［AsyncPostBackプロパティ］欄から表1の要領で行ってください。
| プロパティ | 概要 | 設定値 |
|---|---|---|
| ControlID | イベント発生元のコントロールID | btnRefresh |
| EventName | UpdatePanelコントロールを更新するためのイベント | Click |
［OK］ボタンをクリックし，ダイアログを閉じれば準備は完了です。修正したUpdatePanel.aspxを実行し，［更新］ボタンをクリックすると，今度はUpdatePanelコントロール上のLiteralコントロールのみが更新されることが確認できるはずです（図4）。
図4修正したUpdatePanel.aspxの実行結果
ちなみに，本稿では省略しますが，UpdatePanelコントロールでは，ページ内に複数個配置したり，UpdatePanelコントロールの配下に入れ子で配置したりすることも可能です。この場合にも，それぞれ該当するUpdatePanelコントロールに関連付けるためのトリガーを明示的に登録しておくことで，該当する領域のみを部分更新することが可能になります＊2。
TimerコントロールでUpdatePanelコントロールを自動更新する
次に，ASP.NET AJAXが標準で提供するもう一つのコントロールであるTimerコントロールを見てみましょう。Timerコントロールは，その名の通り，ページ上でタイマー管理を行うためのコントロールで，指定された時間間隔でTickイベントを発生させることができます。Tickイベントに対応するイベントハンドラを記述することで，（例えば）一定時間ごとにUpdatePanelコントロール上のコンテンツを更新するといったような機能を実装できます（図5）。
図5：TimerコントロールでUpdatePanelコントロールの内容を自動更新
さっそく，具体的な手順を見ていきます。使用するのは，前節でも利用したUpdatePanel.aspxです。図6のように，UpdatePanel.aspx上にTimerコントロールを配置します。この際，既存のButtonコントロールを削除するとともに，前節で紹介したトリガー設定をUpdatePanelコントロールから取り除いておく必要があります。
図6：修正したUpdatePanel.aspxのフォームレイアウト
また，ページ上のプロパティ設定を以下のように設定しておきます（表2）。
| コントロール | プロパティ | 概要 |
|---|---|---|
| UpdatePanel | UpdateMode | Conditional |
| Timer | (ID) | tim |
| Interval | 3000 |
Timer.IntervalプロパティはTickイベントの発生間隔をミリ秒単位で，UpdatePanel.UpdateModeプロパティは常にパネルを更新するかどうかを，それぞれ設定します。後述するように，UpdatePanelコントロールをUpdateメソッド経由で更新する場合には，必ずConditional値にセットしておく必要があります。
次に，Tickイベントハンドラを定義します。フォームデザイナ上，Timerコントロールをダブルクリックすると，コードエディタが開きます。コードエディタには，デフォルトでTickイベントハンドラの最低限のコードが自動生成されていますので，リスト1のように必要なコードを入力してみましょう（追記部分は太字）。
リスト1：UpdatePanel.aspx
Protected Sub tim_Tick(ByVal sender As Object, ByVal e As System.EventArgs) upanel.Update() End Sub |
これによって，Tickイベントの発生都度（つまり，Intervalプロパティで設定した3000ミリ秒間隔で），UpdatePanelコントロールの更新を行うことができます。UpdatePanelコントロールをプログラム側から呼び出すには，UpdateメソッドをコールするだけでOKです。
以上を理解したら，修正したUpdatePanel.aspxを実行してみましょう。UpdatePanelコントロール内のLiteralコントロール（時刻表示）が3秒おきに更新されれば成功です。
UpdateProgressコントロールで通信状況を表示する
UpdateProgressコントロールは，UpdatePanelコントロールによる通信処理中に，ブラウザ上に通信中メッセージ（または画像などを含む任意のコンテンツ）を表示するためのコントロールです。UpdateProgressコントロールを利用することで，エンドユーザーは視覚的に現在の通信状態を把握することができます（図7）。特に，UpdatePanelコントロールを利用して数秒以上にわたる長時間の処理を実行する場合には，UpdateProgressコントロールによってエンドユーザーに「いま何が起こっているのか」を明示的に示すことは重要です。
図7：通信中にメッセージを表示
さっそく，具体的な手順を見ていきます。使用するのは，前節でも利用したUpdatePanel.aspxです。図8のように，UpdatePanel.aspx上にUpdateProgressコントロールを配置します。この際，UpdateProgressコントロールの配下には，通信中に表示するメッセージ（画像）を指定しておく必要があります。
図8：修正したUpdatePanel.aspxのフォームレイアウト
また，UpdateProgressコントロールのプロパティ設定を，以下のように設定しておきます（表3）。
| プロパティ | 概要 | 設定値 |
|---|---|---|
| AssociatedUpdatePanelID | 関連付けるUpdatePanelコントロールのID値 | upanel |
| DisplayAfter | 通信発生から何ミリ秒後にメッセージを表示するか | 500 |
AssociatedUpdatePanelIDプロパティが指定されなかった場合，UpdateProgressコントロールは，ページ上のすべてのUpdatePanelコントロールに対して関連付けられます。
以上で，UpdateProgressコントロールを利用するための最低限の動作は完了です。ただし，このままの状態では，サーバーサイドの処理が一瞬で終了してしまうため，通信メッセージの表示が確認できないはずです。そこでここでは，前節でも使用したTickイベントハンドラに，以下の1行を追加しておきます（リスト2）。これによって，サーバー側の処理をわざと3000ミリ秒だけ休止しているわけです。
リスト2：UpdatePanel.aspx
Protected Sub tim_Tick(ByVal sender As Object, ByVal e As System.EventArgs) System.Threading.Thread.Sleep(3000) upanel.Update() End Sub |
以上を理解したら，修正したUpdatePanel.aspxを実行してみましょう。UpdatePanelコントロールの更新中に通信メッセージが表示されれば成功です。
☆ ☆ ☆
いかがですか。ASP.NET AJAXが提供する拡張サーバーコントロールを利用することで，定型的なAjax機能を限りなくコーディングレスで実現できることが実感できたのではないでしょうか。次回は，引き続きASP.NET AJAXをベースに構築されたサーバーコントロール集「ASP.NET AJAX Control Toolkit」について紹介していきます。
