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

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

Скачать код или скачать PDFDownload Code or Download PDF

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления.The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Для содержимого UpdatePanel существует специальный расширитель, который сильно зависит от платформы анимации: UpdatePanelAnimation.For the contents of an UpdatePanel, a special extender exists that relies heavily on the animation framework: UpdatePanelAnimation. Он также может работать вместе с триггерами UpdatePanel.It can also work together with UpdatePanel triggers.

ОбзорOverview

Элемент управления Animation в наборе средств ASP.NET AJAX Control Toolkit — это не просто элемент управления, но вся платформа для добавления анимации в элемент управления.The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. Для содержимого UpdatePanelсуществует специальный расширитель, который сильно зависит от платформы анимации: UpdatePanelAnimation.For the contents of an UpdatePanel, a special extender exists that relies heavily on the animation framework: UpdatePanelAnimation. Он также может работать вместе с триггерами UpdatePanel.It can also work together with UpdatePanel triggers.

ШагиSteps

Первым шагом является включение ScriptManager на страницу, чтобы загрузить библиотеку ASP.NET AJAX и использовать набор элементов управления.The first step is as usual to include the ScriptManager in the page so that the ASP.NET AJAX library is loaded and the Control Toolkit can be used:

<asp:ScriptManager ID="asm" runat="server" />

Анимация в этом сценарии будет применена к отображению текущего времени.The animation in this scenario will be applied to a display of the current time. Эти сведения можно записать в метку с помощью метода Page_Load() или (для простоты) используется следующий встроенный код:This information can be written into a label using the Page_Load() method, or (for the sake of simplicity) the following inline code is used:

<%= DateTime.Now.ToLongTimeString() %>

Кроме того, создается кнопка для активации обновления времени.Also, a button to trigger updating the time is created:

<asp:Button ID="Button1" runat="server" Text="Update" />

Затем этот код помещается в раздел <ContentTemplate> элемента UpdatePanel.This code is then put into the <ContentTemplate> section of an UpdatePanel element. Атрибут UpdateMode панели должен иметь значение "Conditional", так как только триггеры могут обновлять содержимое панели.The panel's UpdateMode attribute must be set to "Conditional", since only triggers may update the panel's contents. В разделе <Triggers> UpdatePanelсоздается триггер асинхронной обратной передачи, связанный с событием Click кнопки.In the <Triggers> section of the UpdatePanel, an asynchronous postback trigger is created and tied to the Click event of the button. Таким же, если пользователь нажимает кнопку, UpdatePanel обновляется.Thus, if the user clicks on the button, the UpdatePanel is refreshed. Ниже приведена разметка для элемента управления UpdatePanel.Here is the markup for the UpdatePanel control:

<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 идентификатор панели и определите анимацию в расширителье.Finally, the UpdatePanelAnimationExtender must be configured: Set the TargetControlID attribute to the ID of the panel, and define an animation within the extender. Плавное появление имеет смысл, что создает привлекательное визуальное внимание на обновленное время.Fading in makes sense, which creates a nice visual emphasis on the updated time. Разметка расширителя может выглядеть следующим образом:Your extender markup may then look like this:

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

Запустите файл в браузере.Run the file in the browser. При каждом нажатии кнопки текущее время отображается на панели, а в течение одной секунды всегда выводится на экран.Whenever you click on the button, the current time is shown in the panel, always fading in for the duration of one second.

текущее время помещается в плавностьThe current time is fading in

Текущее время отображается в виде затухания (щелкните, чтобы просмотреть изображение с полным размером)The current time is fading in (Click to view full-size image)