ASP.NET AJAX β2版で提供されている拡張サーバー・コントロールは以下の通りです(表1)。
名称 | 概要 |
---|---|
ScriptManager | Ajax動作に必要なJavaScriptのコードを管理 |
ScriptManagerProxy | Ajax動作に必要なJavaScriptのコードを管理(マスターページ対応) |
UpdatePanel | 部分的に更新可能な領域を定義 |
UpdateProgressコントロール | 非同期通信中に状態メッセージを表示 |
Timer | 指定時間おきに特定の処理を実行 |
このうち,ScriptManager(ScriptManagerProxy)コントロールは,すでにここまでの回でも紹介したとおりです。
UpdatePanelコントロールの基本
それではさっそく,具体的なサンプルを見ていくことにしましょう。今回紹介するのはUpdatePanelコントロール。UpdatePanelコントロールは,その名の通り,(ページ全体ではなく)部分的に更新可能な領域を定義するためのコントロールです。
本稿では,このUpdatePanelコントロールの内外にLiteralコントロールを一つずつ配置し,それぞれLiteralコントロール上に現在時刻を表示します。同じくUpdatePanelコントロール上に配置したButtonコントロール([更新]ボタン)をクリックすると,UpdatePanelコントロール上に配置したLiteralコントロールだけが更新されることが確認できます(図1)。
図1:UpdatePanelコントロールを使ったサンプルアプリケーション
更新ボタンをクリックすると
UpdatePanelコントロール上のLiteralコントロールのみ更新される
以下に,構築の手順を追っていきます。
1. ページ・レイアウトとプロパティの設定を行う
ソリューションエクスプローラから新規の「.aspx」ファイルを作成し(ファイル名はUpdatePanel.aspxとしておきます),図2のようにコントロールを配置してください。
図2:UpdatePanel.aspxのフォームレイアウト
また,それぞれのコントロールに対して,表2の要領でプロパティを設定しておきます。
コントロール | プロパティ | 設定値 |
---|---|---|
ScriptManager | (ID) | manager |
EnablePartialRendering | True | |
UpdatePanel | (ID) | upanel |
Literal | (ID) | ltrUpdate |
Text | △(ブランク) | |
Button | (ID) | btnUpdate |
Text | 更新 | |
Literal | (ID) | ltrNoUpdate |
Text | △(ブランク) |
EnablePartialRenderingプロパティは,ページ内の「部分的な更新」を有効にするかどうかを指定します。UpdatePanelコントロールを使用する場合には,原則として,本プロパティをTrueに設定しておく必要があります*1。
2. ページ・ロード時のコードを記述する
次に,それぞれのLiteralコントロールに対して,ロード時に現在時刻を表示するコードを追加します。それぞれのLiteralコントロールを選択状態にしたうえで,プロパティウィンドウから(イベント)ボタン(図3)をクリックし,イベント一覧を表示,Loadイベントをダブルクリックしてください。コードエディタには,デフォルトで最低限のコードが自動生成されていますので,リスト1のようにコードを入力してみましょう(追記部分は太字)。図3:イベントボタン
リスト1:UpdatePanel.aspx
<script runat="server"> Protected Sub ltrUpdate_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) ltrUpdate.Text = DateTime.Now.ToString() End SubProtected Sub ltrNoUpdate_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) ltrNoUpdate.Text = DateTime.Now.ToString() End Sub </script>
それぞれLiteralコントロールに対して現在の時刻を表示するだけのシンプルなコードです。[更新]ボタンによって,それぞれのコントロールが書き換えられた(リフレッシュされた)かどうかを確認するために,このようにロード時に最新の日時が表示されるようにしておきます。
以上で,準備は完了です。UpdatePanel.aspxを実行し,ページ上の[更新]ボタンをクリックしてみましょう。本稿冒頭の図1のように,UpdatePanelコントロール上のコンテンツ(Literalコントロール)だけが表示されることが確認できれば成功です。
今回記述したのは,あくまでUpdatePanelコントロールの動作を確認するためのダミーのコードだけですから,UpdatePanelコントロールを利用するだけならば完全にコーディングレスで機能を実装できることがおわかりになるはずです。
☆ ☆ ☆
以上,今回はここまでです。次回は引き続き,UpdatePanelコントロールの応用的な使い方と,UpdateProgress/Timerコントロールについて紹介する予定です。