共用方式為


以動態方式控制 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>

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

目前的時間正在淡化

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