「ASP.NET AJAXならコーディングレスでAjaxを実装できる(前編)」


外部のコントロールから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


この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら