動態控制 UpdatePanel 動畫效果功能（VB）

作者 ：克里斯蒂安·溫茲

下載 PDF

ASP.NET AJAX 控制工具包中的動畫控制不只是控制項，而是一個完整的框架，用來為控制項添加動畫。 對於 UpdatePanel 的內容，有一個特殊的延伸器，高度依賴動畫框架：UpdatePanelAnimation。 它也可以與 UpdatePanel 觸發器協同運作。

概觀

ASP.NET AJAX 控制工具包中的動畫控制不只是控制項，而是一個完整的框架，用來為控制項添加動畫。 對於 UpdatePanel的內容，存在一個高度依賴動畫框架的特殊延伸器： UpdatePanelAnimation。 它也可能與 UpdatePanel 誘因共同作用。

Steps

第一步如常，將 包含 ScriptManager 在頁面中，以便載入 ASP.NET AJAX 函式庫並可使用控制工具包：

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

在瀏覽器裡執行該檔案。 每當你點擊按鈕時，面板上會顯示當前時間，並且會淡入一秒鐘。

當前時間正在畫面中淡入（點擊查看全尺寸圖片）