以動態方式控制 UpdatePanel 動畫 (VB)

作者 ：一個是一個

下載 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>

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

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

[上一步]