Динамическое управление анимациями UpdatePanel (VB)

по Кристиан Венз

Скачать код или скачать PDF

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. Для содержимого UpdatePanel существует специальный расширитель, который сильно зависит от платформы анимации: UpdatePanelAnimation. Он также может работать вместе с триггерами UpdatePanel.

Обзор

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления. Для содержимого UpdatePanelсуществует специальный расширитель, который сильно зависит от платформы анимации: UpdatePanelAnimation. Он также может работать вместе с триггерами UpdatePanel.

Шаги

Первым шагом является включение 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 идентификатор панели и определите анимацию в расширителье. Плавное появление имеет смысл, что создает привлекательное визуальное внимание на обновленное время. Разметка расширителя может выглядеть следующим образом:

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

Запустите файл в браузере. При каждом нажатии кнопки текущее время отображается на панели, а в течение одной секунды всегда выводится на экран.

текущее время помещается в плавность

Текущее время отображается в виде затухания (щелкните, чтобы просмотреть изображение с полным размером)