.NET TIPS

［ASP.NET AJAX］UpdatePanelコントロール利用時の注意点とは？［2.0のみ、C#、VB］

山田 祥寛
2007/11/15

　ASP.NET AJAXにおいて、UpdatePanelコントロールは、ごくシンプルな手順でページの部分更新を利用できるという意味で、非常に有用なコントロールである。

　しかし、UpdatePanelコントロールはAjax的な動作をコーディングレスで実現できるというその便利さのために、Ajaxのもう1つの特長である「効率」を犠牲にしている点を忘れてはならない。

　例えば、以下のようなWebページを想定してみよう。


Webフォーム（UpdatePanel.aspx）のフォーム・レイアウト
UpdatePanelコントロール内にラベルと［更新］ボタンを配置している。

　このページを実行し［更新］ボタンをクリックしたとき、サーバへ送信されるリクエスト・データの中身はどのようになっているのだろうか。Ajax本来の「必要なデータだけが送信される」という特長を考えれば、直感的にはUpdatePanelコントロール配下に含まれる情報だけが送信されるように思われる方は多いだろう。しかし、実際にリクエスト・データの中身を確認してみると、そうはなっていないことが分かる。

非同期ポストバック時のリクエスト・データの確認

　以下は、Web Development Helperを利用して、非同期ポストバック時のリクエストを確認したものだ（Web Development Helperについては、別稿「TIPS：Webサービス・ブリッジ機能により構造化データを受け渡しするには？（応用編）」を参照）。


Web Development Helperで非同期通信の内容を確認したところ
UpdatePanelコントロールに関係のないTextBoxコントロールに入力されたデータ（txtNameの欄）やビューステート（__VIEWSTATEの欄）が送信されている。

　このように、UpdatePanelコントロール配下の情報のみならず、（パネル外での）入力データをはじめ、ページ全体の状態情報を管理するビューステートなどが送信されていることが確認できるはずだ。

　つまり、UpdatePanelコントロールによる部分更新とはあくまで疑似的なものであり、リクエスト・データには「通常のポストバックと同様のデータが含まれている」ということである。これが先ほど、「UpdatePanelコントロールは効率を犠牲にしている」と述べた理由なのである。

　さらに踏み込んで、UpdatePanelコントロールによる非同期通信の挙動について見てみよう。UpdatePanelコントロールによる非同期ポストバックが発生した場合のリクエスト・ヘッダに注目してほしい。


非同期ポストバック時のリクエスト・データ（Web Development Helper）

　リクエスト・ヘッダの中に「x-microsoftajax : Delta=true」という1行が含まれていることが確認できるはずだ。これによって、サーバサイドでは現在のポストバックが非同期ポストバックであることを識別している。

　実際には、UpdatePanelコントロールによる非同期通信では、サーバサイドの処理は通常のポストバックと「同等の処理」が行われる（つまり、ページのLoadイベントや自動ポストバックされなかった変更系イベントなども非同期ポストバックのタイミングで実行されるということだ）。通常のポストバックとUpdatePanelコントロールによる非同期ポストバックとが異なる点は、実にレンダリング段階における実装のみなのである。

　先ほど述べたx-microsoftajaxヘッダが見つかった場合、ASP.NET（厳密には非同期通信を管理するScriptManagerコントロール）は、最終的に以下のような構造データを最終的なレスポンスとして出力する。


非同期ポストバック時のレスポンス・データ（Web Development Helper）

　ちなみに、応答に含まれるそれぞれのフィールドの意味は、以下のとおりだ。

フィールド 概要
asyncPostBackControlIDs 非同期通信のトリガとなったコントロール（ID値）
asyncPostBackTimeout 非同期通信のタイムアウト時間（秒）
childUpdatePanelIDs 入れ子となったUpdatePanelコントロール（ID値）
formAction フォーム送信先のURL
hiddenField 隠しフィールドの情報
pageTitle ページのタイトル
panelsToRefreshIDs 非同期通信によって更新されたUpdatePanelコントロール（ID値）
postBackControlIDs UpdatePanel更新のトリガとして登録されたコントロール（ID値）
updatePanel UpdatePanelの更新されたコンテンツ
updatePanelIDs 非同期通信に関連するUpdatePanelコントロール（ID値）
非同期ポストバックの応答に含まれる構造データの情報（主要な項目）

　クライアントサイドでは、サーバサイドから応答されたこの構造データでもって、最終的に対象となるUpdatePanelコントロールの更新を行うというわけだ。

UpdatePanelコントロール利用時の注意点

　UpdatePanelコントロールの、このような内部的な挙動を知っておくことは（一見して単なる“うんちく”に思われるかもしれないが）実はとても重要だ。このような内部的な動作の流れを理解したうえで、アプリケーション開発者の皆さんに意識していただきたい点は、主に次の2点である。

不要なビューステートは無効にする

　特に、GridView／DetailsViewのようなリッチなサーバ・コントロールを含んだページでは、ビューステートの分量も大幅に増大する可能性がある。これは非同期通信の回数が増えた場合に、トラフィック上の大きなオーバーヘッドになる要因である。不要なビューステートは最大限無効にしておくのが好ましい。

イベント・ハンドラの処理では、同期／非同期ポストバックを区別する

　特にInit、Loadなどのページ・イベントや変更系イベントでは、非同期ポストバック時に不要な処理を行っていないかを十分にチェックすべきだ。もしも非同期ポストバックに際しては除外したい処理がある場合には、以下のようにScriptManagerコントロールのIsInAsyncPostBackプロパティで、現在の通信が非同期通信であるかどうかを判別するとよい。

If Not manager.IsInAsyncPostBack Then
  ' 非同期ポストバックでない場合のみ行う処理
 End If
if (!manager.IsInAsyncPostBack) {
  // 非同期ポストバックでない場合のみ行う処理
 }
IsInAsyncPostBackプロパティによる非同期通信の判別（上：VB、下：C#）
変数managerはScriptManagerコントロールを参照しているものとする。

　UpdatePanelコントロールは、ASP.NET AJAXが提供する中でも最も便利で、かつ強力なコントロールである。それだけにその限界も理解して、ASP.NET AJAXのもう1つの非同期通信技術である「ブリッジ機能」とうまく使い分けていくことが重要である。End of Article

利用可能バージョン：.NET Framework 2.0のみ
カテゴリ：Webフォーム　処理対象：ASP.NET AJAX
使用ライブラリ：UpdatePanelコントロール
関連TIPS：［ASP.NET AJAX］Webサービス・ブリッジ機能により構造化データを受け渡しするには？（応用編）

この記事と関連性の高い別の.NET TIPS
［ASP.NET AJAX］非同期通信で発生した例外の処理方法を変更するには？
［ASP.NET］ポストとポストバックの違いは？
［ASP.NET AJAX］UpdatePanelAnimationコントロールで部分更新前後にアニメーションを実行するには？
［ASP.NET AJAX］Webサービス・ブリッジ機能により構造化データを受け渡しするには？（応用編）
［ASP.NET］ビューステートに保存されるものは？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT