• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

マイクロソフトのAjax対応フレームワーク「Atlas」入門

第7回 ASP.NET AJAXのサーバーコントロールを使い倒せ!(Timer/UpdateProgress編)

山田 祥寛 2006/12/06 日経ソフトウエア
 前回は,ASP.NET 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の要領で行ってください。

表1:AsyncPostBackプロパティの設定
プロパティ概要設定値
ControlIDイベント発生元のコントロールIDbtnRefresh
EventNameUpdatePanelコントロールを更新するためのイベント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)。

表2:変更したUpdatePanel.aspxのプロパティ設定
コントロールプロパティ概要
UpdatePanelUpdateModeConditional
Timer(ID)tim
Interval3000

 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)。

表3:UpdateProgressコントロールのプロパティ設定
プロパティ概要設定値
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」について紹介していきます。

 本連載はASP.NET AJAX β2リリース(2006年11月06日時点)の情報を基に執筆しています。今後のRelease Candidate版,正式版などでは仕様が変更される可能性がありますのでご注意ください。

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る