UpdatePanel 애니메이션을 동적으로 제어(VB)Dynamically Controlling UpdatePanel Animations (VB)

Christian Wenzby Christian Wenz

코드 다운로드 또는 PDF 다운로드Download Code or Download PDF

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가 하기 위한 전체 프레임 워크입니다.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)에 크게 의존 하는 특수 extender가 있습니다.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

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤이 아니라 컨트롤에 애니메이션을 추가 하기 위한 전체 프레임 워크입니다.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)를 많이 사용 하는 특수 extender가 있습니다.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

첫 번째 단계는 ASP.NET AJAX 라이브러리가 로드 되 고 Control Toolkit를 사용할 수 있도록 페이지에 ScriptManager를 포함 하는 것입니다.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" />

그런 다음이 코드는 UpdatePanel 요소의 <ContentTemplate> 섹션에 배치 됩니다.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. UpdatePanel<Triggers> 섹션에서 비동기 포스트백 트리거를 만들고 단추의 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 특성을 패널의 ID로 설정 하 고 extender 내에서 애니메이션을 정의 합니다.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. Extender 태그는 다음과 같습니다.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. 단추를 클릭할 때마다 현재 시간이 패널에 표시 되며, 항상 1 초 동안 페이드 인 됩니다.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)