外部のコントロールからUpdatePanelを更新する

 引き続き,UpdatePanelコントロールの応用的な使い方について解説しましょう。先ほど紹介した例は,UpdatePanelコントロール上にリフレッシュ対象のコントロールも,ポストバック*9の発生元となるコントロール([更新]ボタン)も配置されている,最もシンプルなパターンでした。UpdatePanelコントロール配下の子コントロールは,自動的にUpdatePanelコントロール更新のトリガーとして認識されるのです*10

 しかし,ページの構造(レイアウト)によっては,リフレッシュ対象のコントロールとポストバックの発生元とが必ずしも隣接しているとは限らないケースがあるでしょう。つまり「UpdatePanelコントロールの外部」からUpdatePanelコントロールをリフレッシュしたいというケースです。

 具体的な例を見てみましょう。以下で紹介するのは,先ほどのUpdatePanelコントロール上のButtonコントロールを,UpdatePanelコントロールの外に移動した場合の例です(図7)。このままの状態でUpdatePanel.aspxを実行してみましょう(図8)。

図7●修正後のUpdatePanel.aspxのフォーム・レイアウト
図7●修正後のUpdatePanel.aspxのフォーム・レイアウト
図8●UpdatePanel.aspxの実行結果
図8●UpdatePanel.aspxの実行結果
[画像のクリックで拡大表示]

 [更新]ボタンをクリックすると,UpdatePanelコントロールの内外いずれのLiteralコントロールもリフレッシュされてしまいます。UpdatePanelコントロール外部に配置されたボタンは,通常のページ全体に対するポストバック処理を発生しますので,この結果は当然です。

 このような場合には,UpdatePanelコントロールに対して更新のきっかけとなるコントロールとそのイベント(「トリガー」と呼びます)をあらかじめ登録しておけば,部分的な更新が可能になります。トリガーを登録するには,UpdatePanelコントロールのプロパティ・ウィンドウのTriggersプロパティ右端から[...]ボタンをクリックします。[UpdatePanelTriggerコレクションエディタ]ダイアログが開きますので(図9),左下の[追加]ボタンから[AsyncPostBackTrigger]を選択し,トリガーの追加を行います。トリガーの設定は,ダイアログ右の[AsyncPostBackプロパティ]欄から表3の要領で行ってください。

図9●「UpdatePanelTriggerコレクションエディタ」ダイアログ
図9●「UpdatePanelTriggerコレクションエディタ」ダイアログ

表3●AsyncPostBackのプロパティ設定
表3●AsyncPostBackのプロパティ設定

図10●UpdatePanel.aspxの実行結果
図10●UpdatePanel.aspxの実行結果  [画像のクリックで拡大表示]

 [OK]ボタンをクリックし,ダイアログを閉じれば準備は完了です。修正したUpdatePanel.aspxを実行し,[更新]ボタンをクリックすると,今度はUpdatePanelコントロール上のLiteralコントロールだけが更新されましたね(図10)。

 本稿では省略しますが,UpdatePanelコントロールは,ページ内に複数個配置したり,UpdatePanelコントロールの配下に入れ子で配置したりすることも可能です。この場合にも,それぞれ該当するUpdatePanelコントロールに関連付けるためのトリガーを明示的に登録しておくことで,該当する領域のみを部分更新することが可能になります*11