連載：VS 2005でいってみようDBプログラミング 第12回　DBプログラミング 7つのヒント − 同時実行制御からASP.NET AJAXまで − 山田 祥寛（http://www.wings.msn.to/） 2007/01/27
Page1 Page2 Page3 Page4

Hint 5. GridViewコントロールのページング／ソート処理を高速化しよう（UpdatePanelコントロール編）

　以上で、アプリケーション上でASP.NET AJAXを利用する準備が整いました。

　ASP.NET AJAXは、大きくクライアントサイド・フレームワークとサーバサイド・フレームワークとに分類でき、いずれか片方のみを利用することも、双方を密に連携させることも可能になっています（図6）。

図6　ASP.NET AJAXの構成

大きくクライアントサイド・フレームワークとサーバサイド・フレームワークとに分類でき、いずれか片方のみを利用することも、双方を密に連携させることも可能だ。

　図6を見ても分かるように、ASP.NET AJAXの機能は実に多岐にわたりますが、本稿ではその中でもASP.NETアプリケーション開発をこれまで学んできた皆さんにとって、より親しみやすいサーバサイド・フレームワーク――その中でも、特に重要な「AJAX Extensionsコントロール」にフォーカスしてみたいと思います。

　AJAX Extensionsコントロールを利用することで、（例えば）テンプレート列や［選択］ボタンを含んだGridViewコントロール上でも、ポストバックしないページング／ソート処理を行うことが可能になります。

　ここでは、先ほどHint 3で作成したGridViewCallback.aspxを、ASP.NET AJAX対応に修正してみることにします（配布サンプル上では、GridViewAjax.aspxで確認が可能です）。

［1］フォーム・デザイナからレイアウトを修正する

　フォーム・デザイナで、以下の図7のようにサーバ・コントロールを配置してください。GridView／SqlDataSourceコントロールは、既存のものをコピーして、UpdatePanelコントロール配下に移動するものとします。その際、EnableSortingAndPagingCallbackプロパティをFalse（クライアント・コールバック機能を無効）に設定するとともに、クライアント・コールバック機能では利用できなかった［選択］ボタンを追加しておくものとします。

図7　ASP.NET AJAXを利用したページの例（GridViewAjax.aspx）

GridViewコントロールとSqlDataSourceコントロールは、既存のものをUpdatePanelコントロール内に移動している。 　 ScriptManagerコントロール（manager）を配置。 　 UpdatePanelコントロール（upanel）を配置。 　 UpdateProgressコントロール（prog）を配置。

　ScriptManagerコントロールは、その名のとおり、ASP.NET AJAXの動作に必要なクライアントサイド・スクリプトの出力／生成などを担当するためのコントロールです。ASP.NET AJAXの機能を利用する場合には、必ず「ページの先頭に1つだけ配置する」必要があります*4。

*4 マスタ・ページを利用している場合には、ScriptManagerコントロールは基本的にはコンテンツ・ページではなく、マスタ・ページの側に配置します。

　UpdatePanelコントロールは、ページ内の定義された領域のみを部分的に更新するためのコントロールです。この場合は、GridViewコントロールを配下に配置していますので、GridViewコントロール上でソートやページング、更新／削除を行った場合にも、（ページ全体ではなく）UpdatePanelコントロールの内容だけが更新されるというわけです。UpdatePanelコントロールは、ページ上に複数個配置したり、入れ子にしたりすることも可能です（これらに関する詳細は後日別稿であらためて紹介する予定です）。

　最後のUpdateProgressコントロールは、UpdatePanelコントロールによる部分更新が行われている間、ブラウザ上に通信中メッセージやアイコンを表示するためのコントロールです。

　通常のポストバックでは通信時にブラウザのアイコンが変化したり、ステータスバーに通信状況が表示されたりしますので、エンド・ユーザーはサーバとの通信が行われていることを知ることができますが、Ajax通信の場合には、標準ではブラウザは何ら通信中であることを示す表示を行いません。短時間で終了する通信であれば、これがあまり問題になることもないかもしれませんが、処理が長時間に及ぶ場合、通信中であるか否かがエンド・ユーザーの目にまったく見えないのはユーザビリティの観点からもあまりうれしいことではありません。そこでUpdateProgressコントロールを利用して、通信状況を明示的に示す必要があるというわけです。

　ここでは、通信中に表示するコンテンツとして単なるテキストを指定しているだけですが、（例えば）アニメーションGIF画像などを指定することで、より視覚に訴えるプログレスバーを表示することも可能です。

［2］AJAX Extensionsコントロールのプロパティ情報を変更する

　GridViewAjax.aspxのプロパティ情報を、以下の表4の要領で設定しておきます。

コントロール プロパティ 設定値 ScriptManager EnablePartialRendering True UpdateProgress AssociatedUpdatePanelID upanel DisplayAfter 500

表4　GridViewAjax.aspxのプロパティ情報

　ScriptManagerコントロールのEnablePartialRenderingプロパティは、UpdatePanelコントロールによる部分的な更新を有効にするかどうかを指定します。本プロパティはデフォルトでTrueとなっていますので、ここではそのまま変更せずにおきましょう。

　UpdateProgressコントロールのAssociatedUpdatePanelIDプロパティには、対応するUpdatePanelコントロールのID値を指定してください。ただし、省略時にはページ上に配置された「すべてのUpdatePanelコントロールの更新」に際してUpdateProgressコントロールの内容が表示されますので、本サンプルの場合には指定しなくても動作には影響しません。

　DisplayAfterプロパティは、更新処理の発生から何ミリ秒後に進ちょくメッセージを表示するかを指定します。本設定値を0に設定した場合には、処理発生時点で即座にメッセージを表示しますが、処理がごく短時間で完了した場合、メッセージも短時間だけしか表示されませんので、エンド・ユーザーの目には画面がちらついたように見えるはずです。いくらかの遅延を設けることで、一定以上の時間がかかった処理に対してのみ進ちょくメッセージが表示されますので、こうしたちらつきを防止することができます。

［3］イベント・ハンドラを用意する

　以上で、一連のAJAX Extensionsコントロールを動作させるための最低限の設定は完了です。

　ただし、このままでは（サンプル・データが少ないため）サーバ側の処理が一瞬で終わってしまい、UpdateProgressコントロールの表示を確認することはできないはずです。そこで以下では、ページのLoadイベント・ハンドラ（Page_Loadメソッド）に、以下のような時間稼ぎの記述を加えておきます。

' ページのLoadイベント・ハンドラ Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)   lblCur.Text = DateTime.Now.ToString()   System.Threading.Thread.Sleep(3000) End Sub

リスト6　グリッド表選択時に3000ミリ秒処理を休止するコード（GridViewAjax.aspx）

　Threadクラス（System名前空間）のSleepメソッドは指定された時間（ミリ秒単位）だけ処理を休止するメソッドです。ここでは3000ミリ秒（＝3秒）だけ処理を休止することで、疑似的にUpdateProgressコントロールの動作を視認できるようにしています。

　以上の手順を理解したら、GridViewAjax.aspxを実行してみましょう。ページングやソート／選択などの処理の前後でページ上部の現在時刻が変更されていないことが確認できれば成功です。また、グリッド表の操作時にページ下部に進ちょくメッセージが表示されることも確認してみましょう。

「書名」をクリック 3秒経過

図8　GridViewAjax.aspxの実行結果

進ちょくメッセージ（「…更新中…」）が3秒間表示され、グリッド表のみが更新される。

Hint 6. グリッド表を一定時間ごとに更新する 〜Timerコントロール〜

　Hint 5では、ASP.NET AJAXが提供するAJAX Extensionsコントロールとして、ScriptManager／UpdatePanel／UpdateProgressコントロールについて紹介しました。本項ではもう1つ、Hint 5では紹介しきれなかった「Timerコントロール」を使った例を見てみることにしましょう。

　Timerコントロールは、その名のとおり、処理のタイマー起動を管理するためのコントロールで、指定された時間間隔でTickイベントを発生します。Tickイベントに対応するイベント・ハンドラを定義することで、（例えば）一定時間単位でページ内のコンテンツを自動更新するような処理が可能になるというわけです。

　ここでは、Hint 5で紹介したGridViewAjax.aspxにTimerコントロールを追加して、グリッド表の内容が5秒おきに再読み込みされるような仕組みを作成してみます*5。

*5 一般的には、Timerコントロールの更新間隔はコンテンツの性質に合わせて、もう少し長め（例えば数十分以上）に設定するべきです。本サンプルでは動作確認の意味から短めの時間を設定していますが、短い間隔で処理が発生することで、サーバへの処理負荷も増大することになりますので注意してください。

［1］Timerコントロールを配置する

　GridViewAjax.aspxですでに配置されているUpdatePanelコントロールの配下に、図9のようにTimerコントロールを配置してください。

図9　GridViewAjax.aspxのフォーム・レイアウト

図7で示したフォーム・レイアウトに追加してTimerコントロールを配置する。 　 Timerコントロール（tim）を配置。

　また、サーバ・コントロールのプロパティ情報を表5の要領で設定します。

コントロール プロパティ 設定値 UpdatePanel UpdateMode Conditional Timer Interval 5000

表5　GridViewAjax.aspxのプロパティ情報

　UpdateModeプロパティはUpdatePanelコントロールの更新モードを指定します。デフォルトは「Always」ですが、Timerコントロール経由でUpdatePanelコントロールを制御する場合には、「Conditional」を設定しておく必要があります。

　TimerコントロールのIntervalプロパティには、Tickイベントの発生間隔をミリ秒単位で設定します。本サンプルの場合は、5秒おきにTimer.Tickイベントが発生することになります。

［2］Tickイベント・ハンドラを定義する

　あとは、Tickイベントに対応するイベント・ハンドラを定義するだけです（リスト7）。UpdatePanelコントロールの内容を更新するには、ただ単にUpdatePanelコントロールのUpdateメソッドを呼び出すだけです。

' TimerコントロールのTickイベント・ハンドラ Protected Sub tim_Tick(ByVal sender As Object, ByVal e As System.EventArgs)   upanel.Update() End Sub

リスト7　Tickイベント・ハンドラからUpdatePanelコントロールを更新（GridViewAjax.aspx）

　以上の手順を終えたら、GridViewAjax.aspxを実行してみましょう。5秒間隔でグリッド表がリフレッシュされることを確認してください（配布サンプル上ではGridViewAjax2.aspxから動作を確認できます）。

INDEX
	Visual Studio 2005でいってみようDBプログラミング
	第12回　データベース・プログラミング 7つのヒント − 同時実行制御からASP.NET AJAXまで −
	1．Hint 1.競合の検出／Hint 2. 楽観的同時実行制御の問題点とその解決方法
	2．Hint 3. GridViewページング・ソート処理の高速化／Hint 4. 「ASP.NET AJAX」の利用
	3．Hint 5. UpdatePanelコントロールによる高速化／Hint 6. Timerコントロールによる更新
	4．Hint 7. データベース・キャッシングの活用

　

「Visual Studio 2005でいってみようDBプログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）