Поделиться через

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

  • Статья

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

Загрузить PDF-файл

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

Общие сведения

Элемент управления Анимация в наборе элементов управления ASP.NET AJAX — это не только элемент управления, но и целая платформа для добавления анимации в элемент управления. Для содержимого существует специальный расширитель, который в значительной 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создается асинхронный триггер обратной передачи и привязывается к 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>

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

Текущее время исчезает в

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

НазадВперед