UpdatePanel アニメーションを動的に制御する (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 UpdatePanel のコンテンツには、アニメーション フレームワーク UpdatePanelAnimation に大きく依存する特別なエクステンダーが存在します。 UpdatePanel トリガーと連携することもできます。
概要
ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 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 秒間フェードインします。
現在時刻がフェードインしています (クリックすると全画面の画像が表示されます)
