AJAXが提供する拡張サーバーコントロールの一つであるUpdatePanelコントロールの基本的な使い方について紹介しました。今回は引き続きUpdatePanelコントロールの応用的な使い方とTimer/UpdateProgressコントロールについて解説を進めます。外部コントロールから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の要領で行ってください。Click[OK]ボタンをクリックし,ダイアログを閉じれば準備は完了です。修正したUpdatePanel.aspxを実行し,[更新]ボタンをクリックすると,今度はUpdatePanelコントロール上のLiteralコントロールのみが更新されることが確認できるはずです(図4)。図4修正したUpdatePanel.aspxの実行結果ちなみに,本稿では省略しますが,UpdatePanelコントロールでは,ページ内に複数個配置したり,UpdatePanelコントロールの配下に入れ子で配置したりすることも可能です。この場合にも,それぞれ該当するUpdatePanelコントロールに関連付けるためのトリガーを明示的に登録しておくことで,該当する領域のみを部分更新することが可能になります*2。AJAXが標準で提供するもう一つのコントロールであるTimerコントロールを見てみましょう。Timerコントロールは,その名の通り,ページ上でタイマー管理を行うためのコントロールで,指定された時間間隔でTickイベントを発生させることができます。Tickイベントに対応するイベントハンドラを記述することで,(例えば)一定時間ごとにUpdatePanelコントロール上のコンテンツを更新するといったような機能を実装できます(図5)。図5:TimerコントロールでUpdatePanelコントロールの内容を自動更新さっそく,具体的な手順を見ていきます。使用するのは,前節でも利用したUpdatePanel.aspxです。図6のように,UpdatePanel.aspx上にTimerコントロールを配置します。この際,既存のButtonコントロールを削除するとともに,前節で紹介したトリガー設定をUpdatePanelコントロールから取り除いておく必要があります。図6:修正したUpdatePanel.aspxのフォームレイアウトまた,ページ上のプロパティ設定を以下のように設定しておきます(表2)。3000Timer.IntervalプロパティはTickイベントの発生間隔をミリ秒単位で,UpdatePanel.UpdateModeプロパティは常にパネルを更新するかどうかを,それぞれ設定します。後述するように,UpdatePanelコントロールをUpdateメソッド経由で更新する場合には,必ずConditional値にセットしておく必要があります。次に,Tickイベントハンドラを定義します。フォームデザイナ上,Timerコントロールをダブルクリックすると,コードエディタが開きます。コードエディタには,デフォルトでTickイベントハンドラの最低限のコードが自動生成されていますので,リスト1のように必要なコードを入力してみましょう(追記部分は太字)。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)。500AssociatedUpdatePanelIDプロパティが指定されなかった場合,UpdateProgressコントロールは,ページ上のすべてのUpdatePanelコントロールに対して関連付けられます。以上で,UpdateProgressコントロールを利用するための最低限の動作は完了です。このままの状態では,サーバーサイドの処理が一瞬で終了してしまうため,通信メッセージの表示が確認できないはずです。そこでここでは,前節でも使用したTickイベントハンドラに,以下の1行を追加しておきます(リスト2)。これによって,サーバー側の処理をわざと3000ミリ秒だけ休止しているわけです。Sub以上を理解したら,修正したUpdatePanel.aspxを実行してみましょう。UpdatePanelコントロールの更新中に通信メッセージが表示されれば成功です。AJAXが提供する拡張サーバーコントロールを利用することで,定型的なAjax機能を限りなくコーディングレスで実現できることが実感できたのではないでしょうか。Toolkit」について紹介していきます。β2リリース(2006年11月06日時点)の情報を基に執筆しています。Candidate版,正式版などでは仕様が変更される可能性がありますのでご注意ください。農家が実感した自動飛行ドローンのすごさクラウド現場の負担軽減を!医療界でのAWS活用法SaaS導入で重要なID管理のコツとは?クラウドの新形態「aPaaS」のメリットDXを阻むコミュニケーションの壁とは?AWSとSAPの連携強化がもたらす利点はデジタル自治体では何が実現できるのか?500万社が導入。価値創造型の社内コミュニケーションとは発想を豊かにする有機的な会議ツールとは働き方が変わる。Reserved.このページに掲載されている記事・写真・図表などの無断転載を禁じます。掲載している情報は、記事執筆時点のものです。