AJAX は、Asynchronous JavaScript and XML の略です。これは、応答時間を短縮するクロスプラットフォーム テクノロジです。 AJAX サーバー コントロールはスクリプトをページに追加し、ブラウザーによって実行および処理されます。
ただし、他の ASP.NET サーバー コントロールと同様、これらの AJAX サーバー コントロールにはメソッドとイベント ハンドラーを関連付けることができ、これらはすべてサーバー側で処理されます。
Visual Studio IDE のコントロール ツールボックスには、「AJAX」と呼ばれる一連のコントロール コンポーネントが含まれています。
ScriptManager コントロールは最も重要なコントロールであり、他のコントロールが機能するにはページ上に存在する必要があります。
基本的な構文は次のとおりです。
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
「Ajax 対応サイト」を作成するか、「項目の追加」ダイアログから「AJAX Web フォーム」を追加すると、Web ページが自動的に形成され、スクリプト マネージャー コントロールが含まれます。 ScriptManager コントロールは、すべてのサーバー側コントロールのクライアント側スクリプトを処理します。
UpdatePanel コントロールはコンテナ コントロールであり、Control クラスから派生します。これは、その中の子コントロールのコンテナとして動作し、独自のインターフェイスを持ちません。そのコントロールの 1 つが送信バックをトリガーすると、UpdatePanel が介入して非同期的に開始し、ページの一部を更新します。
たとえば、ボタン コントロールが更新パネル内にあり、それをクリックした場合、更新パネル内のコントロールのみが影響を受け、ページの他の部分のコントロールは影響を受けません。これを部分コミットリターンまたは非同期コミットリターンと呼びます。
AJAX Web フォームをアプリケーションに追加します。これには、デフォルトのスクリプト マネージャー コントロールが含まれています。更新パネルを挿入します。ボタン コントロールとラベル label を更新パネル コントロール内に配置します。別のボタンとラベルのセットをパネルの外側に配置します。
デザインビューは次のようになります。
リソース ファイルは次のようになります。
<form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" > <ContentTemplate> <asp:Button ID="btnpartial" runat="server" onclick="btnpartial_Click" Text="Partial PostBack"/> <br /> <br /> <asp:Label ID="lblpartial" runat="server"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <p> </p> <p>更新パネルの外側</p> < p> <asp:Button ID="btntotal" runat="server" onclick="btntotal_Click" Text="Total PostBack" /> </p> <asp:Label ID="lbltotal" runat="server"></asp:Label></form>
ボタン コントロールはすべて、時間ハンドラーの同じコードを持っています。
string time = DateTime.Now.ToLongTimeString();lblpartial.Text = "パネルからの表示時間" + time;lbltotal.Text = "外部からの表示時間" + time;
ページが実行されるときに、合計送信リターン ボタンをクリックすると、すべてのタグが更新時間とともに更新されますが、部分送信リターン ボタンをクリックすると、更新パネル内のタグのみが更新されることに注目してください。
| 財産 | 説明する |
|---|---|
| トリガーとしての子供たち | このプロパティは、戻り値が子コントロールからのものであるかどうかを示します。子コントロールによって更新パネルが更新されます。 |
| コンテンツテンプレート | これはコンテンツ テンプレートであり、更新パネルが表示されるときにそのパネル内に表示される内容を定義します。 |
| コンテンツテンプレートコンテナ | 動的に作成されたテンプレート コンテナ オブジェクトを取得し、プログラムによって子コントロールを追加するために使用されます。 |
| IsInPartialRendering | パネルが部分的なコミットリターンの一部として更新されるかどうかを示します。 |
| レンダーモード | レンダリングモードを表示します。利用可能なモードはブロックとインラインです。 |
| 更新モード | いくつかの条件を決定してレンダリング モードを取得または設定します。 |
| トリガー | パネルを自動的に更新するイベントにそれぞれ対応するコレクション トリガー オブジェクトを定義します。 |
次の表に、更新パネル コントロールのメソッドを示します。
| 方法 | 説明する |
|---|---|
| CreateContentTemplateContainer | Control オブジェクトは、UpdatePanel コントロールの内容を定義する子コントロールのコンテナーとして機能するように作成されます。 |
| コントロールコレクションの作成 | UpdatePanel コントロールに含まれるすべてのコントロールのコレクションを返します。 |
| 初期化する | 部分的なページ描画が実行されている場合は、UpdatePanel コントロール トリガー コレクションを初期化します。 |
| アップデート | UpdatePanel コントロールのコンテンツを更新します。 |
更新パネルの動作は、UpdateMode プロパティと ChildrenAsTriggers プロパティの値によって異なります。
| 方法 | 説明する | 影響 |
|---|---|---|
| いつも | 間違い | 不正なパラメータです。 |
| いつも | 真実 | ページ全体が更新されるか、その上の子コントロールが返されると、UpdatePanel が更新されます。 |
| 条件付き | 間違い | UpdatePanel は、ページ全体が更新されるか、ページ外のトリガーされたコントロールが更新を開始する場合に更新します。 |
| 条件付き | 真実 | UpdatePanel は、ページ全体が更新されるか、その上の子コントロールが返されるか、その外側のトリガー コントロールが更新を開始する場合に更新されます。 |
UpdateProgress コントロールは、1 つ以上の更新パネル コントロールが更新されたときにブラウザーからフィードバックを提供します。たとえば、ユーザーがログインするとき、またはデータベース指向の作業を実行するときに、サーバーからの応答を待ちます。
「ページを読み込み中...」など、作業が処理されていることを視覚的に確認できます。
UpdateProgress コントロールの構文は次のとおりです。
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" > <ProgressTemplate> 読み込み中... </ProgressTemplate></asp:UpdateProgress>
上のスニペットは、ProgressTemplate タグを含む単純なメッセージを示しています。ただし、画像やその他の関連コントロールを使用することもできます。 UpdateProgress コントロールは、AssociatedUpdatePanelID プロパティを使用して別の更新パネルとして指定されていない限り、すべての非同期戻り値を表示します。
次の表に、更新進行状況コントロールのプロパティを示します。
| 財産 | 説明する |
|---|---|
| 関連更新パネルID | このコントロールが関連付けられているコントロールを含む更新パネルの ID を取得および設定します。 |
| 属性 | UpdateProgress コントロールのカスケード スタイル シート (CSS) プロパティを取得および設定します。 |
| 表示後 | 処理テンプレートが表示されてからの時間をミリ秒単位で取得および設定します。デフォルトは 500 です。 |
| 動的レイアウト | プロセス テンプレートを動的に表示するかどうかを示します。 |
| 進捗テンプレート | DisplayAfter 時間よりも時間がかかる非同期コミットリターン中にテンプレートが表示されることを示します。 |
次の表に、更新の進行状況を制御するメソッドを示します。
| 方法 | 説明する |
|---|---|
| GetScriptDescriptors | UpdateProgress コントロールのクライアント側機能に必要なコンポーネント、動作、およびクライアント側コントロールのリストを返します。 |
| GetScriptReferences | クライアント スクリプトが依存する UpdateProgress コントロールのリストを返します。 |
タイマー コントロールは、提出物の返却を自動的に初期化するために使用されます。これは次の 2 つの方法で実行できます。
(1) UpdatePanel コントロールの Triggers プロパティを設定します。
<トリガー> <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click" /></Triggers>
(2) サブコントロールのトリガーとして、タイマー コントロールを UpdatePanel 内に直接配置します。 1 つのタイマーが多くの UpdatePanel のトリガーとして機能できます。
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="1000"> </asp:Timer> < asp:Label ID="Label1" runat="server" Height="101px" > </asp:Label> </ContentTemplate></asp:UpdatePanel>