ASP.NET AJAX の部分ページ更新について理解する

  • [アーティクル]

作成者: Scott Cate

おそらく、ASP.NET AJAX 拡張機能の最も目に見える機能は、コードの変更やマークアップの変更を最小限に抑えながら、サーバーへの完全なポストバックを行わずに、部分的または増分のページ更新を行う機能です。 利点は広範です。マルチメディア (Adobe Flash や Windows Media など) の状態は変更されず、帯域幅のコストが削減され、クライアントでは通常ポストバックに関連するちらつきが発生しません。

はじめに

Microsoft の ASP.NET テクノロジは、オブジェクト指向のイベント ドリブン プログラミング モデルを提供し、コンパイルされたコードの利点と結び付けます。 ただし、そのサーバー側処理モデルには、テクノロジに固有のいくつかの欠点があります。

  • ページの更新にはサーバーへのラウンドトリップが必要です。これにはページの更新が必要です。
  • ラウンドトリップでは、Javascript またはその他のクライアント側テクノロジ (Adobe Flash など) によって生成された効果は保持されません
  • ポストバック中、Microsoft インターネット以外のブラウザーエクスプローラーは、スクロール位置の自動復元をサポートしていません。 また、インターネット エクスプローラーでも、ページが更新されるとちらつきが発生します。
  • ポストバックでは、特に GridView コントロールやリピーターなどのコントロールを処理する場合に、__VIEWSTATEフォーム フィールドが拡大する可能性があるため、大量の帯域幅が必要になる場合があります。
  • JavaScript やその他のクライアント側テクノロジを使用して Web サービスにアクセスするための統合モデルはありません。

Microsoft の ASP.NET AJAX 拡張機能を入力します。 同期 J avaScript AndX ML を表す AJAX は、Microsoft AJAX Framework を構成するサーバー側コードと Microsoft AJAX スクリプト ライブラリと呼ばれるスクリプト コンポーネントで構成されるクロスプラットフォーム JavaScript を介して増分ページ更新を提供するための統合フレームワークです。 ASP.NET AJAX 拡張機能は、JavaScript を介して ASP.NET Web サービスにアクセスするためのクロスプラットフォーム サポートも提供します。

このホワイトペーパーでは、ScriptManager コンポーネント、UpdatePanel コントロール、UpdateProgress コントロールなど、ASP.NET AJAX Extensions の部分的なページ更新機能について説明し、使用する必要があるシナリオと使用すべきでないシナリオについて検討します。

このホワイトペーパーは、Visual Studio 2008 のベータ 2 リリースと .NET Framework 3.5 に基づいており、ASP.NET AJAX 拡張機能を基底クラス ライブラリに統合しています (以前は ASP.NET 2.0 で使用できるアドオン コンポーネントでした)。 このホワイトペーパーでは、Visual Web Developer Express Edition ではなく Visual Studio 2008 を使用していることも前提としています。参照されている一部のプロジェクト テンプレートは、Visual Web Developer Express ユーザーが使用できない場合があります。

部分ページ 更新

おそらく、ASP.NET AJAX 拡張機能の最も目に見える機能は、コードの変更やマークアップの変更を最小限に抑えながら、サーバーへの完全なポストバックを行わずに、部分的または増分のページ更新を行う機能です。 利点は広範です。マルチメディア (Adobe Flash や Windows Media など) の状態は変更されず、帯域幅のコストが削減され、クライアントでは通常ポストバックに関連するちらつきが発生しません。

部分ページ レンダリングを統合する機能は、プロジェクトに最小限の変更を加えた ASP.NET に統合されます。

チュートリアル: 部分レンダリングを既存のプロジェクトに統合する

  1. Microsoft Visual Studio 2008 で、[ファイル] -> [新規作成>] - [Web サイト] の順に移動し、ダイアログから [ASP.NET Web サイト] を選択して、新しい ASP.NET Web サイト プロジェクトを作成します。 任意の名前を付けることができます。ファイル システムまたはインターネット インフォメーション サービス (IIS) にインストールできます。
  2. 基本的な ASP.NET マークアップ (サーバー側のフォームとディレクティブ) を含む空白の既定のページが @Page 表示されます。 という名前の Label Label1 と Button を Button1 フォーム要素内のページにドロップします。 テキストプロパティは任意に設定できます。
  3. デザイン ビューで、ダブルクリック Button1 して分離コード イベント ハンドラーを生成します。 このイベント ハンドラー内で、 [ボタンをクリックしました] に設定 Label1.Text します。 .

一覧 1: 部分レンダリングが有効になっている前の default.aspx のマークアップ

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

リスト 2: default.aspx.cs の Codebehind (トリミング済み)

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}
  1. F5 キーを押して Web サイトを起動します。 Visual Studio では、デバッグを有効にするためにweb.config ファイルを追加するように求められます。これを行います。 ボタンをクリックすると、ページが更新されてラベル内のテキストが変更され、ページが再描画されると短いちらつきが発生します。
  2. ブラウザー ウィンドウを閉じた後、Visual Studio に戻り、マークアップ ページに戻ります。 Visual Studio ツールボックスを下にスクロールし、[AJAX 拡張機能] というラベルの付いたタブを見つけます。 (古いバージョンの AJAX または Atlas 拡張機能を使用しているためにこのタブがない場合は、このホワイトペーパーの後半で AJAX 拡張機能ツールボックス項目を登録するためのチュートリアルを参照するか、Web サイトからダウンロードできる Windows インストーラーを使用して現在のバージョンをインストールしてください)。

[A J A X Estensions] と [スクリプト マネージャー] が選択されているタブを示すスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

  1. 既知の問題:ASP.NET 2.0 AJAX 拡張機能と共に Visual Studio 2005 が既にインストールされているコンピューターに Visual Studio 2008 をインストールすると、Visual Studio 2008 によって AJAX 拡張機能ツールボックス項目がインポートされます。 コンポーネントのツールヒントを調べることで、これが当てはであるかどうかを判断できます。バージョン 3.5.0.0 と表示されます。 バージョン 2.0.0.0 と表示されている場合は、古いツールボックス項目をインポートしており、Visual Studio の [ツールボックス項目の選択] ダイアログを使用して手動でインポートする必要があります。 デザイナーを使用してバージョン 2 コントロールを追加することはできません。

  2. タグが開始される前に <asp:Label> 、空白の行を作成し、ツールボックスの UpdatePanel コントロールをダブルクリックします。 ページの上部に新しい @Register ディレクティブが含まれていることに注意してください。これは、System.Web.UI 名前空間内のコントロールをプレフィックスを使用して asp: インポートする必要があることを示します。

  3. 終了 </asp:UpdatePanel> タグを Button 要素の末尾の後にドラッグして、Label コントロールと Button コントロールがラップされた適切な形式になるようにします。

  4. 開始 <asp:UpdatePanel> タグの後に、新しいタグを開き始めます。 IntelliSense では、2 つのオプションが表示されることに注意してください。 この場合は、タグを <ContentTemplate> 作成します。 マークアップが整形式になるように、ラベルとボタンの周囲にこのタグをラップしてください。

更新パネル タグの後にコンテンツ テンプレート タグが続く s p を示すスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

  1. 要素内の任意の場所に <form> 、ツールボックス内の項目を ScriptManager ダブルクリックして ScriptManager コントロールを含めます。
  2. 属性 EnablePartialRendering= trueが<asp:ScriptManager>含まれるようにタグを編集します。

リスト 3: 部分レンダリングが有効になっている default.aspx のマークアップ

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

  1. web.config ファイルを開きます。 Visual Studio によって、System.Web.Extensions.dllへのコンパイル参照が自動的に追加されていることに注意してください。

  2. Visual Studio 2008 の新機能: ASP.NET Web サイト プロジェクト テンプレートに付属するweb.configには、ASP.NET AJAX 拡張機能への必要なすべての参照が自動的に含まれており、コメント解除して追加機能を有効にできる構成情報のコメント付きセクションが含まれています。 Visual Studio 2005 には、ASP.NET 2.0 AJAX 拡張機能がインストールされたときも同様のテンプレートがありました。 ただし、Visual Studio 2008 では、AJAX 拡張機能は既定でオプトアウトされます (つまり、既定で参照されますが、参照として削除できます)。

[無題のページ] ブラウザーが選択され、既定のメモ帳が表示されているスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

  1. F5 キーを押して Web サイトを起動します。 部分レンダリングをサポートするためにソース コードの変更が必要なかったことに注意してください。変更されたのはマークアップのみです。

Web サイトを起動すると、部分レンダリングが有効になっていることがわかります。ボタンをクリックするとちらつきが発生したり、ページスクロール位置に変更が加えられることはありません (この例では示されていません)。 ボタンをクリックした後にページのレンダリングされたソースを確認すると、実際にはポストバックが発生しなかったことが確認されます。元のラベル テキストはソース マークアップの一部であり、ラベルは JavaScript によって変更されています。

Visual Studio 2008 には、ASP.NET AJAX-Enabled Web サイト用の定義済みテンプレートが付属していないようです。 ただし、Visual Studio 2005 と ASP.NET 2.0 AJAX Extensions がインストールされている場合は、Visual Studio 2005 内でこのようなテンプレートを使用できます。 そのため、Web サイトを構成し、AJAX-Enabled Web サイト テンプレートから始めると、さらに簡単になります。テンプレートには、完全に構成されたweb.config ファイル (Web サービス アクセスと JSON シリアル化 - JavaScript Object Notation を含むすべての ASP.NET AJAX 拡張機能をサポート) が含まれており、既定では メイン Web Forms ページ内に UpdatePanel と ContentTemplate が含まれている必要があります。 この既定のページで部分レンダリングを有効にするのは、このチュートリアルの手順 10 に戻り、コントロールをページにドロップするのと同じくらい簡単です。

ScriptManager コントロール

ScriptManager コントロール リファレンス

Markup-Enabledプロパティ:

プロパティ名 Type 説明
AllowCustomErrors-Redirect Bool web.config ファイルのカスタム エラー セクションを使用してエラーを処理するかどうかを指定します。
AsyncPostBackError-Message String エラーが発生した場合にクライアントに送信されるエラー メッセージを取得または設定します。
AsyncPostBack-Timeout Int32 クライアントが非同期要求の完了を待機する既定の時間を取得または設定します。
EnableScript-Globalization Bool スクリプトのグローバリゼーションが有効かどうかを取得または設定します。
EnableScript-Localization Bool スクリプトのローカライズが有効かどうかを取得または設定します。
ScriptLoadTimeout Int32 クライアントへのスクリプトの読み込みに使用できる秒数を決定します
ScriptMode Enum (Auto、Debug、Release、Inherit) リリース バージョンのスクリプトをレンダリングするかどうかを取得または設定します。
ScriptPath String クライアントに送信するスクリプト ファイルの場所へのルート パスを取得または設定します。

Code-Onlyプロパティ:

プロパティ名 Type 説明
AuthenticationService AuthenticationService-Manager クライアントに送信される ASP.NET 認証サービス プロキシに関する詳細を取得します。
IsDebuggingEnabled Bool スクリプトとコードのデバッグが有効になっているかどうかを取得します。
IsInAsyncPostback Bool ページが非同期のポストバック要求に現在存在するかどうかを取得します。
ProfileService ProfileService-Manager クライアントに送信される ASP.NET プロファイル サービス プロキシに関する詳細を取得します。
スクリプト コレクション<スクリプトリファレンス> クライアントに送信されるスクリプト参照のコレクションを取得します。
サービス コレクション<サービスリファレンス> クライアントに送信される Web サービス プロキシ参照のコレクションを取得します。
SupportsPartialRendering Bool 現在のクライアントが部分レンダリングをサポートしているかどうかを取得します。 このプロパティが false を返す場合、すべてのページ要求は標準のポストバックになります。

パブリック コード メソッド:

メソッド名 Type 説明
SetFocus(string) Void 要求が完了したときに、クライアントのフォーカスを特定のコントロールに設定します。

マークアップの子孫:

Tag 説明
<AuthenticationService> ASP.NET 認証サービスへのプロキシの詳細を提供します。
<ProfileService> ASP.NET プロファイル サービスへのプロキシに関する詳細を提供します。
<スクリプト> 追加のスクリプト参照を提供します。
<asp:ScriptReference> 特定のスクリプト参照を示します。
<サービス> プロキシ クラスが生成される追加の Web サービス参照を提供します。
<asp:ServiceReference> 特定の Web サービス参照を示します。

ScriptManager コントロールは、ASP.NET AJAX 拡張機能に不可欠なコアです。 スクリプト ライブラリ (広範なクライアント側スクリプト タイプ システムを含む) へのアクセスを提供し、部分レンダリングをサポートし、追加の ASP.NET サービス (認証やプロファイルなど、その他の Web サービス) を広範にサポートします。 ScriptManager コントロールは、クライアント スクリプトのグローバリゼーションとローカリゼーションのサポートも提供します。

代替スクリプトと補足スクリプトの提供

Microsoft ASP.NET 2.0 AJAX Extensions には、参照アセンブリに埋め込まれたリソースとしてデバッグ エディションとリリース エディションの両方にスクリプト コード全体が含まれていますが、開発者は ScriptManager をカスタマイズされたスクリプト ファイルに自由にリダイレクトしたり、追加の必要なスクリプトを登録したりできます。

一般的に含まれるスクリプト (Sys.WebForms 名前空間やカスタム型指定システムをサポートするものなど) の既定のバインドをオーバーライドするには、ScriptManager クラスの イベントに登録 ResolveScriptReference できます。 このメソッドが呼び出されると、イベント ハンドラーは、問題のスクリプト ファイルへのパスを変更できます。スクリプト マネージャーは、スクリプトの別のコピーまたはカスタマイズされたコピーをクライアントに送信します。

さらに、スクリプト参照 (クラスによって ScriptReference 表されます) は、プログラムまたはマークアップを使用して含めることができます。 これを行うには、プログラムによってコレクションをScriptManager.Scripts変更するか、ScriptManager コントロールの第 1 レベルの子である タグの下<Scripts>にタグを含めます<asp:ScriptReference>。

UpdatePanels のカスタム エラー処理

更新は UpdatePanel コントロールで指定されたトリガーによって処理されますが、エラー処理とカスタム エラー メッセージのサポートは、ページの ScriptManager コントロール インスタンスによって処理されます。 これは、 AsyncPostBackErrorカスタム例外処理ロジックを提供できるページに イベント を公開することによって行われます。

AsyncPostBackError イベントを使用すると、 プロパティを AsyncPostBackErrorMessage 指定できます。これにより、コールバックの完了時にアラート ボックスが発生します。

既定のアラート ボックスを使用する代わりに、クライアント側のカスタマイズも可能です。たとえば、既定のブラウザー モーダル ダイアログではなく、カスタマイズされた <div> 要素を表示できます。 この場合、クライアント スクリプトでエラーを処理できます。

リスト 5: カスタム エラーを表示するクライアント側スクリプト

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

簡単に言うと、上記のスクリプトは、非同期要求が完了したときに、クライアント側の AJAX ランタイムにコールバックを登録します。 その後、エラーが報告されたかどうかを確認し、報告された場合は、その詳細を処理し、最後にエラーがカスタム スクリプトで処理されたことをランタイムに示します。

グローバリゼーションとローカライズのサポート

ScriptManager コントロールは、スクリプト文字列とユーザー インターフェイス コンポーネントのローカライズを広範囲にサポートします。ただし、このトピックはこのホワイトペーパーの範囲外です。 詳細については、「ASP.NET AJAX 拡張機能」の「グローバリゼーション サポート」を参照してください。

UpdatePanel コントロール

UpdatePanel コントロール リファレンス

Markup-Enabledプロパティ:

プロパティ名 Type 説明
ChildrenAsTriggers bool 子コントロールがポストバック時に更新を自動的に呼び出すかどうかを指定します。
RenderMode enum (ブロック、インライン) コンテンツを視覚的に表示する方法を指定します。
UpdateMode enum (Always、Conditional) UpdatePanel が部分レンダリング中に常に更新されるか、トリガーがヒットしたときにのみ更新されるかを指定します。

Code-Onlyプロパティ:

プロパティ名 Type 説明
IsInPartialRendering bool UpdatePanel が現在の要求の部分レンダリングをサポートしているかどうかを取得します。
ContentTemplate Itemplate 更新要求のマークアップ テンプレートを取得します。
ContentTemplateContainer コントロール 更新要求のプログラムによるテンプレートを取得します。
トリガー UpdatePanel- TriggerCollection 現在の UpdatePanel に関連付けられているトリガーの一覧を取得します。

パブリック コード メソッド:

メソッド名 Type 説明
Update() Void 指定した UpdatePanel をプログラムで更新します。 サーバー要求が、それ以外の場合はトリガーされない UpdatePanel の部分的なレンダリングをトリガーできるようにします。

マークアップの子孫:

Tag 説明
<ContentTemplate> 部分レンダリング結果のレンダリングに使用するマークアップを指定します。 asp:UpdatePanel> の<子。
<トリガー> この UpdatePanel の更新に関連付けられている n 個のコントロールのコレクションを指定します。 asp:UpdatePanel> の<子。
<asp:AsyncPostBackTrigger> 指定した UpdatePanel の部分ページ レンダリングを呼び出すトリガーを指定します。 これは、問題の UpdatePanel の子孫としてのコントロールである場合とそうでない場合があります。 イベント名に細かく設定します。トリガー>の<子。
<asp:PostBackTrigger> ページ全体を更新するコントロールを指定します。 これは、問題の UpdatePanel の子孫としてのコントロールである場合とそうでない場合があります。 オブジェクトに対して細かく設定します。 トリガー>の<子。

コントロールは UpdatePanel 、AJAX Extensions の部分レンダリング機能に参加するサーバー側のコンテンツを区切るコントロールです。 ページ上に置くことができる UpdatePanel コントロールの数に制限はなく、入れ子にすることもできます。 各 UpdatePanel は分離されているため、それぞれが個別に動作します (2 つの UpdatePanel を同時に実行し、ページのポストバックに関係なく、ページのさまざまな部分をレンダリングできます)。

UpdatePanel コントロールは、主にコントロール トリガーを扱います。既定では、ポストバックを作成する UpdatePanel ContentTemplate 内に含まれるすべてのコントロールが UpdatePanel のトリガーとして登録されます。 つまり、UpdatePanel は既定のデータ バインド コントロール (GridView など) とユーザー コントロールを操作でき、スクリプトでプログラミングできます。

既定では、ページの部分的なレンダリングがトリガーされると、UpdatePanel コントロールがそのようなアクションのトリガーを定義しているかどうかに関係なく、ページ上のすべての UpdatePanel コントロールが更新されます。 たとえば、1 つの UpdatePanel で Button コントロールが定義され、その Button コントロールがクリックされると、そのページ上のすべての UpdatePanel コントロールが既定で更新されます。 これは、既定では UpdatePanel の UpdateMode プロパティが に Always設定されているためです。 または、UpdateMode プロパティを に Conditional設定することもできます。つまり、UpdatePanel は特定のトリガーにヒットした場合にのみ更新されます。

カスタム コントロール ノート

UpdatePanel は、任意のユーザー コントロールまたはカスタム コントロールに追加できます。ただし、これらのコントロールが含まれるページには、EnablePartialRendering プロパティが true に設定された ScriptManager コントロールも含まれている必要があります。

Web カスタム コントロールを使用するときにこれを考慮する方法の 1 つは、 クラスの保護された CreateChildControls() メソッドを CompositeControl オーバーライドすることです。 これにより、ページが部分レンダリングをサポートしていると判断した場合は、コントロールの子と外部の間に UpdatePanel を挿入できます。それ以外の場合は、単に子コントロールをコンテナー Control インスタンスにレイヤー化できます。

UpdatePanel に関する考慮事項

UpdatePanel は、JavaScript XMLHttpRequest のコンテキスト内でポストバック ASP.NET ラップするブラックボックスの何かとして動作します。 ただし、動作と速度の両方に関して、重要なパフォーマンスに関する考慮事項に留意する必要があります。 UpdatePanel のしくみを理解して、その使用が適切なタイミングを決定できるように、AJAX 交換を調べる必要があります。 次の例では、既存のサイトと、Firebug 拡張機能を持つ Mozilla Firefox を使用します (Firebug は XMLHttpRequest データをキャプチャします)。

特に、フォームまたはコントロールに市区町村フィールドと州フィールドを設定する郵便番号のテキスト ボックスを含むフォームを考えてみましょう。 このフォームは最終的に、ユーザーの名前、住所、連絡先情報などのメンバーシップ情報を収集します。 特定のプロジェクトの要件に基づいて、考慮すべき多くの設計上の考慮事項があります。

フォーム上の市区町村、州、郵便番号フィールドを示すスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

タグにコンソールという単語が表示されたパネルを示すスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

このアプリケーションの元のイテレーションでは、郵便番号、市区町村、州など、ユーザー登録データ全体を組み込んだコントロールが構築されました。 コントロール全体が UpdatePanel 内にラップされ、Web フォームにドロップされました。 ユーザーが郵便番号を入力すると、UpdatePanel はイベント (トリガーを指定するか、ChildrenAsTriggers プロパティを true に設定して、バックエンドの対応する TextChanged イベント) を検出します。 AJAX は、FireBug によってキャプチャされた UpdatePanel 内のすべてのフィールドをポストします (右側の図を参照)。

画面キャプチャが示すように、UpdatePanel 内のすべてのコントロールの値 (この場合は、すべて空) と ViewState フィールドが配信されます。 この特定の要求を行うために実際には 5 バイトのデータしか必要とされなかった場合、9 kb を超えるデータが送信されます。 応答はさらに肥大化しています。合計で、テキスト フィールドとドロップダウン フィールドを更新するだけで、57 kb がクライアントに送信されます。

また、AJAX がプレゼンテーション ASP.NET 更新する方法を確認することも興味深い場合があります。 UpdatePanel の更新要求の応答部分は、左側の Firebug コンソールの表示に表示されます。これは、特別に作成されたパイプ区切り文字列であり、クライアント スクリプトによって分割され、ページに再アセンブルされます。 具体的には、ASP.NET AJAX は、UpdatePanel を表すクライアント上の HTML 要素の innerHTML プロパティを設定します。 ブラウザーが DOM を生成し直すにつれて、処理する必要がある情報の量に応じて若干の遅延が発生します。

DOM を再生成すると、いくつかの追加の問題が発生します。

タブにコンソールが表示されたパネルと、[応答] タブのコードを示すスクリーンショット。

(クリックするとフルサイズの画像が表示されます)

  • フォーカスされた HTML 要素が UpdatePanel 内にある場合、フォーカスは失われます。 そのため、Tab キーを押して郵便番号テキスト ボックスを終了したユーザーの場合、次の宛先は [市区町村] テキスト ボックスでした。 ただし、UpdatePanel がディスプレイを更新すると、フォームはフォーカスを持たなくなり、Tab キーを押すとフォーカス要素 (リンクなど) の強調表示が開始されます。
  • DOM 要素にアクセスする任意の種類のカスタム クライアント側スクリプトが使用されている場合、関数によって永続化された参照は、部分的なポストバック後に機能しなくなる可能性があります。

UpdatePanels は、キャッチオール ソリューションを意図したものではありません。 代わりに、プロトタイプ作成、小さなコントロールの更新など、特定の状況に対する迅速なソリューションを提供し、.NET オブジェクト モデルに精通しているが DOM にあまり慣れていない開発者 ASP.NET に使い慣れたインターフェイスを提供します。 アプリケーションのシナリオによっては、パフォーマンスが向上する可能性がある代替手段がいくつかあります。

  • PageMethods と JSON (JavaScript Object Notation) を使用すると、開発者は Web サービス呼び出しが呼び出されたかのように、ページ上で静的メソッドを呼び出すことができます。 メソッドは静的であるため、状態は必要ありません。スクリプト呼び出し元はパラメーターを提供し、結果は非同期的に返されます。
  • アプリケーション全体で複数の場所で 1 つのコントロールを使用する必要がある場合は、Web サービスと JSON の使用を検討してください。 これは再び非常に少ない特別な作業を必要とし、非同期的に動作します。

Web サービスまたはページ メソッドを使用して機能を組み込むには、欠点もあります。 まず第一に、ASP.NET 開発者は通常、機能の小さなコンポーネントをユーザー コントロール (.ascx ファイル) に組み込む傾向があります。 ページ メソッドは、これらのファイルでホストできません。実際の .aspx ページ クラス内でホストされている必要があります。 Web サービスも同様に、.asmx クラス内でホストする必要があります。 アプリケーションによっては、このアーキテクチャが単一責任原則に違反する可能性があります。つまり、1 つのコンポーネントの機能が 2 つ以上の物理コンポーネントに分散され、結びつきがほとんどまたはまったくない可能性があります。

最後に、アプリケーションで UpdatePanels を使用する必要がある場合は、次のガイドラインがトラブルシューティングとメンテナンスに役立つ必要があります。

  • UpdatePanels を可能な限り少なく入れ子にし、単位内だけでなく、コードの単位間でも入れ子にします。 たとえば、コントロールを折り返すページに UpdatePanel を設定すると、その Control には UpdatePanel も含まれます。このコントロールには UpdatePanel を含む別の Control が含まれますが、クロスユニットの入れ子になります。 これにより、更新する要素を明確に保ち、子 UpdatePanels に対する予期しない更新を防ぐことができます。
  • ChildrenAsTriggers プロパティを false に設定し、トリガー イベントを明示的に設定します。 コレクションの <Triggers> 利用は、イベントを処理するためのより明確な方法であり、予期しない動作を防ぎ、メンテナンス タスクを支援し、開発者にイベントのオプトインを強制する可能性があります。
  • 機能を実現するには、可能な限り最小の単位を使用します。 郵便番号サービスの説明で説明したように、最小限の値のみをラップすると、サーバーへの時間、処理の合計、クライアントとサーバー間の交換のフットプリントが短縮され、パフォーマンスが向上します。

UpdateProgress コントロール

UpdateProgress コントロール リファレンス

Markup-Enabledのプロパティ:

プロパティ名 Type 説明
AssociatedUpdate-PanelID String この UpdateProgress が報告する UpdatePanel の ID を指定します。
DisplayAfter int 非同期要求の開始後にこのコントロールが表示されるまでのタイムアウトをミリ秒単位で指定します。
DynamicLayout bool 進行状況を動的にレンダリングするかどうかを指定します。

マークアップの子孫:

Tag 説明
<ProgressTemplate> このコントロールと共に表示されるコンテンツのコントロール テンプレート セットが含まれます。

UpdateProgress コントロールは、サーバーへの転送に必要な作業を行いながら、ユーザーの関心を維持するためのフィードバックの尺度を提供します。 これは、特にほとんどのユーザーがページの更新に慣れ、ステータス バーが強調表示されるため、ユーザーが何かを行っていることをユーザーが認識するのに役立ちます。

注意として、UpdateProgress コントロールはページ階層の任意の場所に表示できます。 ただし、部分ポストバックが子 UpdatePanel から開始された場合 (UpdatePanel が別の UpdatePanel 内に入れ子になっている場合)、子 UpdatePanel をトリガーするポストバックでは、子 UpdatePanel と親 UpdatePanel の UpdateProgress テンプレートが表示されます。 ただし、トリガーが親 UpdatePanel の直接の子である場合は、親に関連付けられている UpdateProgress テンプレートのみが表示されます。

まとめ

Microsoft ASP.NET AJAX 拡張機能は、Web コンテンツのアクセシビリティを高め、Web アプリケーションに豊富なユーザー エクスペリエンスを提供するために設計された高度な製品です。 ASP.NET AJAX 拡張機能の一部として、ScriptManager、UpdatePanel、UpdateProgress コントロールなどの部分的なページ レンダリング コントロールは、ツールキットの最も目に見えるコンポーネントの一部です。

ScriptManager コンポーネントは、拡張機能用のクライアント JavaScript のプロビジョニングを統合するだけでなく、さまざまなサーバー側コンポーネントとクライアント側コンポーネントが最小限の開発投資で連携できるようにします。

UpdatePanel コントロールは見かけ上のマジック ボックスです。UpdatePanel 内のマークアップはサーバー側の Codebehind を持ち、ページの更新をトリガーすることはできません。 UpdatePanel コントロールは入れ子にすることができ、他の UpdatePanel のコントロールに依存できます。 既定では、UpdatePanels は子孫コントロールによって呼び出されたポストバックを処理しますが、この機能は宣言的またはプログラム的に微調整できます。

UpdatePanel コントロールを使用する場合、開発者は、発生する可能性のあるパフォーマンスへの影響を認識する必要があります。 Web サービスやページ メソッドなどの代替手段が考えられますが、アプリケーションの設計を検討する必要があります。

UpdateProgress コントロールを使用すると、ユーザーは自分が無視されていないこと、およびページがユーザー入力に応答するために何も行っていない間にバックグラウンド要求が行われていることをユーザーに知らせることができます。 また、部分的なレンダリング結果を中止する機能も含まれています。

これらのツールを組み合わせることで、サーバーの作業をユーザーに見やすくし、ワークフローを中断しにくくすることで、リッチでシームレスなユーザー エクスペリエンスを作成できます。

経歴

Scott Cate は 1997 年から Microsoft Web テクノロジと協力しており、ナレッジ ベース ソフトウェア ソリューションに重点を置いた ASP.NET ベースのアプリケーションの作成を専門とする myKB.com (www.myKB.com) の社長です。 Scott は、電子メールまたは scott.cate@myKB.comScottCate.com のブログから連絡を受けることができます

次へ