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

Кристиан Венц

Скачать в формате PDF

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

Обзор

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

Шаги

Первый шаг — это обычное включение ScriptManager в страницу, чтобы загрузить библиотеку AJAX ASP.NET и использовать набор средств управления:

<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 объекта создается асинхронный триггер postback, который привязан к событию 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>

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

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