UpdatePanel アニメーションを動的に制御する (VB)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダーが存在します。 UpdatePanel トリガーと連携することもできます。

概要

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダーが存在します。 UpdatePanel トリガーと連携することもできます。

手順

最初のステップは、通常どおり、ページに ScriptManager を含めることです。これにより、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit が使用できるようになります。

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

このシナリオのアニメーションは、現在時刻の表示に適用されます。 この情報は、Page_Load() メソッドを使用してラベルに書き込むことができます。または、(簡単にするために) 次のインライン コードを使用します。

<%= DateTime.Now.ToLongTimeString() %>

また、時刻の更新をトリガーするボタンが作成されます。

<asp:Button ID="Button1" runat="server" Text="Update" />

このコードは、UpdatePanel 要素の <ContentTemplate> セクションに配置されます。 トリガーのみがパネルの内容を更新できるため、パネルの UpdateMode 属性を "Conditional" に設定する必要があります。 UpdatePanel の <Triggers> セクションでは、非同期ポストバック トリガーが作成され、ボタンの Click イベントに関連付けられます。 したがって、ユーザーがボタンをクリックすると、UpdatePanel が更新されます。 UpdatePanel コントロールのマークアップを次に示します。

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <%= DateTime.Now.ToLongTimeString() %>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
 </Triggers>
</asp:UpdatePanel>

最後に、UpdatePanelAnimationExtender を構成する必要があります。TargetControlID 属性をパネルの ID に設定し、エクステンダー内でアニメーションを定義します。 フェードインには意味があり、更新時刻を視覚的に強調します。 エクステンダー マークアップは次のようになります。

<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="UpdatePanel1">
 <Animations>
 <OnUpdated>
 <FadeIn Duration="1.0" Fps="24" />
 </OnUpdated>
 </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

ブラウザーでファイルを実行します。 ボタンをクリックすると、現在時刻がパネルに表示され、常に 1 秒間フェードインします。

The current time is fading in

現在時刻がフェードインしています (クリックしてフルサイズの画像を表示します)

前へ