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

작성자: Christian Wenz

PDF 다운로드

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. UpdatePanel 콘텐츠의 경우 애니메이션 프레임워크 UpdatePanelAnimation에 크게 의존하는 특수 확장기가 있습니다. UpdatePanel 트리거와 함께 작동할 수도 있습니다.

개요

ASP.NET AJAX 컨트롤 도구 키트의 애니메이션 컨트롤은 컨트롤뿐만 아니라 컨트롤에 애니메이션을 추가하는 전체 프레임워크입니다. 의 UpdatePanel콘텐츠의 경우 애니메이션 프레임워크 UpdatePanelAnimation에 크게 의존하는 특수 확장기가 있습니다. 트리거와 함께 UpdatePanel 작동할 수도 있습니다.

단계

첫 번째 단계는 ASP.NET AJAX 라이브러리가 로드되고 제어 도구 키트를 사용할 수 있도록 페이지에 를 포함하는 ScriptManager 일반적인 단계입니다.

<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 구성해야 합니다. 특성을 패널의 ID로 설정하고 TargetControlID extender 내에서 애니메이션을 정의합니다. 페이딩하는 것은 의미가 있으며, 업데이트된 시간에 시각적으로 강조합니다. 그러면 extender 태그가 다음과 같이 표시할 수 있습니다.

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

브라우저에서 파일을 실행합니다. 단추를 클릭할 때마다 현재 시간이 패널에 표시되며 1초 동안 항상 페이드 인됩니다.

현재 시간이 희미해지고 있습니다(전체 크기 이미지를 보려면 클릭).

이전