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

作成者: Christian Wenz

PDF のダウンロード

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

概要

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

手順

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

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

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

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

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

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

次に、このコードは 要素の <ContentTemplate> セクションに UpdatePanel 配置されます。 トリガーのみがパネルの UpdateMode 内容を更新できるため、パネルの 属性を に "Conditional"設定する必要があります。 の <Triggers> セクション UpdatePanelでは、非同期ポストバック トリガーが作成され、ボタンのイベントに 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 秒間フェードインします。

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

[戻る]