次の方法で共有

UpdatePanel コントロール

  • [アーティクル]

ASP.NET の UpdatePanel コントロールは、クライアント側の機能を重視した Web アプリケーションを構築する場合に便利なコントロールです。UpdatePanel コントロールを使用すると、ポストバックによってページ全体を更新するのではなく、ページの選択した部分だけを更新できます。これを部分ページ更新といいます。ScriptManager コントロールと UpdatePanel コントロールを含む ASP.NET Web ページは、自動的に部分ページ更新の対象になり、カスタム クライアント スクリプトは必要ありません。

UpdatePanel コントロールが正常に機能するためには、web.config ファイルに特定の設定が必要です。このコントロールを使用するときに、サイトに必要な web.config ファイルが存在しない場合は、コントロールが表示されるはずのページの [デザイン] ビューにエラーが表示されます。[デザイン] ビューでその状態のコントロールをクリックすると、Microsoft Expression Web のオプションが表示されて、新しい web.config ファイルを作成するか、既存の web.config ファイルを更新するかの選択を求められます。

シナリオ

UpdatePanel コントロールは、サーバー コントロールの 1 つです。クライアントが行う複雑な動作を組み込んだ、エンド ユーザーとの対話性が高いサイトを開発するのに使用します。Web ページの特定の部分だけが更新するように、サーバーとクライアントを調整するコードを記述するには、通常、ECMAScript (JavaScript) をよく理解しておくことが必要です。しかし、UpdatePanel コントロールを使用すると、クライアント スクリプトを記述しなくても、部分ページ更新の対象となる Web ページを作成できます。必要に応じて、カスタム クライアント スクリプトを追加することもできます。UpdatePanel コントロールを使用すると、ページの動作がブラウザーに依存しなくなるので、クライアントとサーバー間で転送されるデータの量が減少する可能性があります。

背景

UpdatePanel コントロールは、ページ全体を更新するのではなく、更新できるページの領域を指定します。このプロセスは、ScriptManager サーバー コントロールと、クライアントの PageRequestManager クラスによって調整されます。部分ページ更新が有効な場合は、コントロールはサーバーに非同期的にポストできます。非同期ポストバックは、結果のサーバー ページがページ全体とライフ サイクルの制御を実行するという点では通常のポストバックと同じように動作します。ただし、非同期ポストバックでは、ページの更新は UpdatePanel コントロールで囲まれた、更新とマークされているページの領域に限定されます。サーバーは、影響を受ける要素の HTML マークアップだけをブラウザーに送信します。

部分ページ更新の有効化

UpdatePanel コントロールを使用するには、Web ページに ScriptManager コントロールが必要です。ScriptManager コントロールの EnablePartialRendering プロパティの既定値が true なので、部分ページ更新は既定で有効になります。

UpdatePanel コントロールのコンテンツの指定

[デザイン ] ビューでパネル内にコンテンツを配置することで、UpdatePanel コントロールにコンテンツを追加します。たとえば、他の ASP.NET コントロールと HTML コントロールをパネルにドラッグし、パネルにカーソルを置いてそこに直接入力できます。[デザイン ] ビューで UpdatePanel コントロールにコンテンツを追加した場合は、必要な <ContentTemplate></ContentTemplate> タグがコンテンツの前後に自動的に追加されます。[デザイン ] ビューではなく、[コード ] ビューで UpdatePanel コントロールにコンテンツを追加すると、<ContentTemplate></ContentTemplate> タグが存在しない場合に、これらのタグを手動で追加しなければなりません。追加しないと UpdatePanel コントロールのコンテンツはレンダリングされません。

UpdatePanel コントロールを含むページが最初にレンダリングされる場合は、UpdatePanel コントロールのすべてのコンテンツがレンダリングされ、ブラウザーに送信されます。それ以後の非同期ポストバックで、個々の UpdatePanel コントロールのコンテンツが更新されます。更新は、パネルの設定、ポストバックを発生させた要素、各パネルに固有のコードに基づいて実行されます。

UpdatePanel トリガーの指定

既定では、UpdatePanel コントロール内のどのポストバック コントロールによっても非同期ポストバックが発生し、パネルのコンテンツが更新されるようになっています。ただし、ページの他のコントロールによって UpdatePanel コントロールが更新されるように構成することもできます。このためには、UpdatePanel コントロールのトリガーを定義します。トリガーは、どのポストバック コントロールとイベントがパネルの更新を発生させるかを指定するバインドです。トリガー コントロールの指定されたイベント (ボタンの Click イベントなど) が発生すると、UodatePanel コントロールが更新されます。UpdatePanel コントロールのトリガーは、[UpdatePanelTrigger コレクション エディター] ダイアログ ボックスを使用して作成します。このダイアログ ボックスは、[タグのプロパティ] パネルの トリガー プロパティから表示します。

トリガーのコントロール イベントの指定はオプションです。イベントを指定しないと、トリガー イベントは、コントロールの既定のイベントになります。たとえば、Button コントロールの既定のイベントは、Click イベントです。

UpdatePanel コントロールが更新される方法

次に、部分ページ レンダリングでどのような場合にパネルのコンテンツを更新するかを決定する UpdatePanel コントロールのプロパティの設定を示します。

  • UpdateMode プロパティを [Always] に設定すると、UpdatePanel コントロールのコンテンツは、ページの任意の場所で発生したすべてのポストバックによって更新されます。このポストバックには、他の UpdatePanel コントロールの内部のコントロールからの非同期ポストバックと、UpdatePanel コントロールの外部のコントロールからのポストバックを含みます。

  • UpdateMode プロパティを [Conditional] に設定すると、UpdatePanel コントロールのコンテンツは、次のいずれかの場合に更新されます。

    • ポストバックがその UpdatePanel コントロールに指定されたトリガーによって発生した場合。

    • UpdatePanel コントロールの Update メソッドを明示的に呼び出した場合。

    • UpdatePanel コントロールが別の UpdatePanel コントロールの入れ子になっているときに、親パネルが更新された場合。

    • ChildrenAsTriggers プロパティが [true] に設定され、UpdatePanel コントロールの任意の子コントロールがポストバックを発生させた場合。入れ子になっている UpdatePanel コントロールの子コントロールは、それらが親パネルのトリガーとして明示的に定義されていない限り、外側の UpdatePanel コントロールを更新しません。

ChildrenAsTriggers プロパティを [false] に設定し、UpdateMode プロパティを [Always] に設定すると、例外が発生します。ChildrenAsTriggers プロパティは、UpdateMode プロパティの設定が [Conditional] の場合だけ使用されることを前提にしています。

入れ子になった UpdatePanel コントロールの使用

UpdatePanel コントロールは入れ子にすることができます。親パネルが更新されると、入れ子になったすべてのパネルも更新されます。子パネルが更新されても、その親パネルは更新されません。

UpdatePanel コントロールに対応しないコントロール

次の ASP.NET コントロールは部分ページ更新に対応していません。そのため、UpdatePanel コントロールの内部で動作するように作られていません。

  • いくつかの条件下での Treeview コントロール。これには、以下の条件が該当します。非同期ポストバックの一部ではないコールバックが有効化された場合。コントロールのスタイルを指定するときに、CSS スタイルの参照を使用して暗黙的に設定する代わりに、コントロールのプロパティとして直接的に設定した場合。EnableClientScript プロパティが [false] の場合 (既定値は [true])。非同期ポストバックの間に、EnableClientScript プロパティの値を変更した場合。

  • スタイルを指定するときに、CSS スタイルの参照を使用して暗黙的に設定せずに、コントロールのプロパティとしてスタイルを直接設定した Menu コントロール。

  • 非同期ポストバックの一部としてファイルをアップロードするために使用される FileUpload コントロールと HtmlInputFile コントロール。

  • EnableSortingAndPagingCallbacks プロパティが [true] に設定されている GridView コントロールと DetailsView コントロール。既定値は [false] です。

  • コンテンツが編集可能テンプレートに変換されていない Login、PasswordRecovery、ChangePassword、および CreateUserWizard の各コントロール。

  • Substitution コントロール。

FileUpload コントロールまたは HtmlInputFile コントロールを UpdatePanel コントロールの中で使用するには、ファイルをパネルの PostBackTrigger コントロールとして送信するポストバック コントロールを設定します。FileUpload コントロールと HtmlInputFile コントロールは、ポストバックの中でのみ使用できます。

上記以外のすべてのコントロールは、UpdatePanel コントロールの内部で動作します。

UpdatePanel コントロール内での Web パーツ コントロールの使用

ASP.NET Web パーツは、Web サイト作成用に統合されたコントロール セットです。エンド ユーザーはこれらのパーツを使用して、Web ページのコンテンツ、外観、およびビヘイビアーをブラウザーで直接変更できます。UpdatePanel コントロールの中で Web パーツを 使用できますが、次の制限があります。

  • すべての WebPartZone コントロールを、同じ UpdatePanel コントロールの中に配置する必要があります。たとえば、それぞれ独自の WebPartZone コントロールを持つ 2 つのUpdatePanel コントロールをページに配置することはできません。

  • WebPartManager コントロールが、Web パーツ コントロール用のすべてのクライアントの状態に関する情報を管理します。このコントロールを、ページの最上位の UpdatePanel コントロールの中に配置する必要があります。

  • Web パーツ コントロールのインポートまたはエクスポートは、非同期ポストバックでは実行できません(このタスクを実行するには FileUpload コントロールが必要ですが、このコントロールは非同期ポストバックでは使用できません)。既定では、Web パーツ コントロールをインポートすると、完全ポストバックが実行されます。

  • 非同期ポストバック中に Web パーツ コントロールのスタイルを追加または変更することはできません。

UpdatePanel コントロールの詳細については、MSDN ライブラリの「UpdatePanel コントロールの概要 Cc295545.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

UpdatePanel コントロールのプロパティの詳細については、MSDN ライブラリの「UpdatePanel プロパティ Cc295545.xtlink_newWindow(ja-jp,Expression.40).png」を参照してください。

関連項目

タスク

チュートリアル : UpdatePanel コントロールを間隔として指定された時間が経過するごとに更新する方法

概念

チュートリアル : 個別に更新する 2 つの領域を持つページを作成する方法
ScriptManager コントロール
部分ページ レンダリングの概要