Анимация элемента управления UpdatePanel (VB)

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

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

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

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

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

Этапы

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

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

Анимация в этом сценарии будет применяться к ASP.NET Wizard веб-элементу управления, размещенному UpdatePanelв . Три (произвольных) шага предоставляют достаточно возможностей для активации обратной передачи:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Wizard ID="Wizard1" runat="server">
 <WizardSteps>
 <asp:WizardStep runat="server" StepType="Start" Title="Ready!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Step" Title="Set!">
 </asp:WizardStep>
 <asp:WizardStep runat="server" StepType="Finish" Title="Go!">
 </asp:WizardStep>
 </WizardSteps>
 </asp:Wizard>
 </ContentTemplate>
</asp:UpdatePanel>

Разметка, необходимая для элемента управления, UpdatePanelAnimationExtender очень похожа на разметку, используемую AnimationExtenderдля . В атрибуте TargetControlID мы предоставляем ID объект для анимации UpdatePanel . В элементе UpdatePanelAnimationExtender<Animations> управления содержится XML-разметка для анимаций. Однако есть одно отличие: количество событий и обработчиков событий ограничено по сравнению с AnimationExtender. Для UpdatePanelsсуществуют только два из них:

• <OnUpdated> при обновлении UpdatePanel
• <OnUpdating> при запуске обновления UpdatePanel

В этом сценарии новое содержимое UpdatePanel (после обратной передачи) должно исчезать. Это необходимая для этого разметка:

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

Теперь при выполнении обратной передачи в UpdatePanel новое содержимое панели плавно исчезает.

Следующий шаг мастера — исчезание (щелкните для просмотра полноразмерного изображения)

НазадВперед