ASP.NET-Ajaxコントロール

AJAXはAsynchronous JavaScript and XMLの略です。これは、応答時間を短縮するクロスプラットフォームテクノロジーです。 AJAXサーバーコントロールは、ブラウザによって実行および処理されるスクリプトをページに追加します。

ただし、他のASP.NETサーバーコントロールと同様に、これらのAJAXサーバーコントロールにも、サーバー側で処理されるメソッドとイベントハンドラーを関連付けることができます。

Visual Studio IDEのコントロールツールボックスには、「AJAX Extensions」と呼ばれるコントロールのグループが含まれています

AJAX Extensions

ScriptManagerコントロール

ScriptManagerコントロールは最も重要なコントロールであり、他のコントロールが機能するためにはページ上に存在する必要があります。

基本的な構文は次のとおりです。

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

[Ajax対応サイト]を作成するか、[アイテムの追加]ダイアログボックスから[AJAX Webフォーム]を追加すると、Webフォームにスクリプトマネージャーコントロールが自動的に含まれます。 ScriptManagerコントロールは、すべてのサーバー側コントロールのクライアント側スクリプトを処理します。

UpdatePanelコントロール

UpdatePanelコントロールはコンテナーコントロールであり、Controlクラスから派生します。子コントロールのコンテナとして機能し、独自のインターフェイスはありません。内部のコントロールがポストバックをトリガーすると、UpdatePanelが介入して非同期的にポストを開始し、ページのその部分のみを更新します。

たとえば、ボタンコントロールが更新パネル内にあり、クリックされた場合、更新パネル内のコントロールのみが影響を受け、ページの他の部分のコントロールは影響を受けません。これは、部分的ポストバックまたは非同期ポストバックと呼ばれます。

例

アプリケーションにAJAX Webフォームを追加します。デフォルトでは、スクリプトマネージャーコントロールが含まれています。更新パネルを挿入します。更新パネルコントロール内に、ラベルコントロールとともにボタンコントロールを配置します。別のボタンとラベルのセットをパネルの外側に配置します。

デザインビューは次のようになります。

ScriptManager

ソースファイルは次のとおりです。

<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>Outside the Update Panel</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 = "Showing time from panel" + time;
lbltotal.Text = "Showing time from outside" + time;

ページの実行時に、合計ポストバックボタンをクリックすると、両方のラベルの時間が更新されますが、部分ポストバックボタンをクリックすると、更新パネル内のラベルのみが更新されることに注意してください。

更新パネル

ページには複数の更新パネルを含めることができ、各パネルにはグリッドなどの他のコントロールが含まれ、データのさまざまな部分が表示されます。

合計ポストバックが発生すると、デフォルトで更新パネルのコンテンツが更新されます。このデフォルトモードは、コントロールのUpdateModeプロパティを変更することで変更できます。更新パネルの他のプロパティを見てみましょう。

UpdatePanelコントロールのプロパティ

次の表に、更新パネルコントロールのプロパティを示します。

Properties	Description
ChildrenAsTriggers	This property indicates whether the post backs are coming from the child controls, which cause the update panel to refresh.
ContentTemplate	It is the content template and defines what appears in the update panel when it is rendered.
ContentTemplateContainer	Retrieves the dynamically created template container object and used for adding child controls programmatically.
IsInPartialRendering	Indicates whether the panel is being updated as part of the partial post back.
RenderMode	Shows the render modes. The available modes are Block and Inline.
UpdateMode	Gets or sets the rendering mode by determining some conditions.
Triggers	Defines the collection trigger objects each corresponding to an event causing the panel to refresh automatically.

UpdatePanelコントロールのメソッド

次の表に、更新パネルコントロールのメソッドを示します。

Methods	Description
CreateContentTemplateContainer	Creates a Control object that acts as a container for child controls that define the UpdatePanel control’s content.
CreateControlCollection	Returns the collection of all controls that are contained in the UpdatePanel control.
Initialize	Initializes the UpdatePanel control trigger collection if partial-page rendering is enabled.
Update	Causes an update of the content of an UpdatePanel control.

更新パネルの動作は、UpdateModeプロパティとChildrenAsTriggersプロパティの値に依存します。

UpdateMode	ChildrenAsTriggers	Effect
Always	False	Illegal parameters.
Always	True	UpdatePanel refreshes if whole page refreshes or a child control on it posts back.
Conditional	False	UpdatePanel refreshes if whole page refreshes or a triggering control outside it initiates a refresh.
Conditional	True	UpdatePanel refreshes if whole page refreshes or a child control on it posts back or a triggering control outside it initiates a refresh.

UpdateProgressコントロール

UpdateProgressコントロールは、1つ以上の更新パネルコントロールが更新されている間、ブラウザーに一種のフィードバックを提供します。たとえば、ユーザーがログインしたり、データベース指向のジョブを実行している間にサーバーの応答を待ったりします。

「ページの読み込み中…」のような視覚的な確認を提供し、作業が進行中であることを示します。

UpdateProgressコントロールの構文は次のとおりです。

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1" >

   <ProgressTemplate>
      Loading...
   </ProgressTemplate>

</asp:UpdateProgress>

上記のスニペットは、ProgressTemplateタグ内の単純なメッセージを示しています。ただし、画像またはその他の関連するコントロールである可能性があります。 AssociatedUpdatePanelIDプロパティを使用して単一の更新パネルに割り当てられていない限り、UpdateProgressコントロールはすべての非同期ポストバックに対して表示されます。

UpdateProgressコントロールのプロパティ

次の表に、更新の進行状況コントロールのプロパティを示します。

Properties	Description
AssociatedUpdatePanelID	Gets and sets the ID of the update panel with which this control is associated.
Attributes	Gets or sets the cascading style sheet (CSS) attributes of the UpdateProgress control.
DisplayAfter	Gets and sets the time in milliseconds after which the progress template is displayed. The default is 500.
DynamicLayout	Indicates whether the progress template is dynamically rendered.
ProgressTemplate	Indicates the template displayed during an asynchronous post back which takes more time than the DisplayAfter time.

UpdateProgressコントロールのメソッド

次の表に、更新の進行制御のメソッドを示します。

Methods	Description
GetScriptDescriptors	Returns a list of components, behaviors, and client controls that are required for the UpdateProgress control’s client functionality.
GetScriptReferences	Returns a list of client script library dependencies for the UpdateProgress control.

タイマーコントロール

タイマーコントロールは、ポストバックを自動的に開始するために使用されます。これは、次の2つの方法で実行できます。

（1）UpdatePanelコントロールのTriggersプロパティの設定：

<Triggers>
   <asp:AsyncPostBackTrigger ControlID="btnpanel2" EventName="Click"/>
</Triggers>

（2）タイマーコントロールをUpdatePanel内に直接配置して、子コントロールトリガーとして機能する。単一のタイマーを複数の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" style="width:304px" >
         </asp:Label>
   </ContentTemplate>

</asp:UpdatePanel>

Asp.net-ajax-control