以動態方式控制 UpdatePanel 動畫 (C#)

作者 ：擷取 Wenz

下載 PDF

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 針對 UpdatePanel 的內容，有一個特別擴充器依賴動畫架構：UpdatePanelAnimation。 它也可以與 UpdatePanel 觸發程式搭配運作。

概觀

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 對於 的內容 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" />

然後，此程式碼會放入 <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 屬性設定為面板的識別碼，並在擴充器內定義動畫。 淡化很合理，這會在更新的時間上建立良好的視覺效果強調。 您的擴充標記可能如下所示：

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

在瀏覽器中執行檔案。 每當您按一下按鈕時，目前的時間會顯示在面板中，一律會在一秒的持續時間內淡入。

目前時間在 (按一下以檢視完整大小的影像)

上一個下一個