시작하기전에..

이 포스트는 http://ajax.asp.net/docs/overview/UpdateProgressOverview.aspx 한글화 한것임을 알려드립니다.
(영어실력의 부재로 인해 매끄러운 해석이 나오지 않음을 이해해주시기 바랍니다. ^^;;)

Introduction

UpdateProgress 컨트롤은 UpdatePanel 컨트롤 안의 부분 페이지 업데이트에 대한 상태정보를 제공합니다. UpdateProgress 컨트롤의 레이아웃과 기본 콘텐츠를 커스터마이즈 할 수 있습니다. 부분 페이지 업데이트가 매우 빠를때 번쩍임을 예방하기 위해 UpdateProgress 컨트롤을 보여주기 전에 지연시간을 설정하여야 합니다.

이 글은 다음의 정보를 포함합니다.

• Scenarios
• Background
• Code Examples
• Class Reference

Scenarios

UpdateProgress 컨트롤은 부분 페이지 렌더링을 위해 한개이상의 UpdatePanel 컨트롤을 웹페이지가 포함하고 있을때 보다 직관력 있는 UI를 디자인할 수 있도록 도와줍니다. 부분 페이지 업데이트가 느릴 경우에 UpdateProgress를 사용함으로서 업데이트의 상태에 대한 비쥬얼한 피드백을 제공합니다. 페이지에 다수의 UpdateProgress 컨트롤을 넣을 수 있고 , 각각을 다른 UpdatePanel 컨트롤과 함께 조합할 수 있습니다. 양자택일로, 한개의 UpdateProgress 컨트롤을 사용할 수 있고 페이지의 모든 UpdatePanel 컨트롤과 함께 조합할 수도 있습니다.

Background

UpdateProgress 컨트롤은 비동기적 포스트백을 야기하는 조합된 UpdatePanel 컨트롤인지 아닌지에 의존해서 보여지거나 숨겨지는 <div>요소를 렌더합니다. 최초로 페이지가 렌더링될때와 비동기적 포스트백이 발생할때 UpdateProgress 컨트롤은 보여지지 않습니다.

Associating an UpdateProgress Control with an UpdatePanel Control

UpdateProgress 컨트롤의 AssociatedUpdatePanelID 프로퍼티 설정에 의해 UpdatePanel 컨트롤과 함께 UpdateProgress 컨트롤을 결합합니다. UpdatePanel 컨트롤에서 포스트백 이벤트가 발생할때 어떠한 결합된 UpdateProgress 컨트롤도 보여지게 됩니다. UpdateProgress 컨트롤이 특정한 UpdatePanel 컨트롤과 결합되지 않는다면, UpdateProgress 컨트롤은 어떠한 비동기적 포스트백에서도 진행상황을 보여줍니다.

UpdatePanel 컨트롤의 ChildrenAsTriggers 프로퍼티가 false로 설정되고 비동기적 포스트백이 UpdatePanel 컨트롤 내부로 부터 발생되었다면, 어떠한 결합된 UpdateProgress 컨트롤도 보여질 것입니다.

Creating Content for the UpdateProgress Control

ProgressTemplate 프로퍼티를 사용하여 UpdateProgress 컨트롤에 의해 보여지는 메세지를 선언적으로 정의할 수 있습니다. <ProgressTemplate> 요소는 HTML과 마크업을 포함할 수 있습니다. 다음의 예제는 UpdateProgress 컨트롤의 메세지를 어떻게 정의하는가를 보여줍니다.

CS

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

VB

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

다음의 예제는 두개의 UpdatePanel 컨트롤의 상태를 보여주는 한개의 UpdateProgress 컨트롤을 보여줍니다.

다음의 예제는 두개의 UpdateProgress 컨트롤을 보여줍니다. 각각은 결합된 UpdatePanel 컨트롤의 업데이트 상태를 보여줍니다.

다음의 예제는 사용자가 비동기적 포스트백을 멈추기 위해 클릭 할 수 있는 <ProgressTemplate> 요소의 버튼을 추가하는 방법을 보여줍니다. 다른 포스트백이 발생하는 동안 초기화되는 어떠한 포스트백도 실행을 취소할 수 있습니다.

앞의 예제에서 <ProgressTemplate> 요소 안에있는 HtmlButton 컨트롤의 onClick 속성이 자바스크립트의 AbortPostBack 함수를 호출합니다. 더많은 정보를 원하시면 PageRequestManager 클래스의 abortPostBack 메소드와 isInAsyncPostBack 프로퍼티를 참조하십시요.

Specifying Content Layout

DynamicLayout 프로퍼티가 true 값을 가질때, UpdateProgress 컨트롤은 페이지가 보여지는 어떠한 공간도 차지하지 않습니다. 대신에, 페이지는 필요할때 UpdateProgress 컨트롤 컨텐츠를 보여주는 것을 다이나믹하게 변경합니다. 다이나믹 디스플레이를 지원하는 것은 컨트롤이 초기에 스타일의 display 속성이 none을 가지는 <div> 요소와 같이 렌더되어 질때 입니다.

DynamicLayout 프로퍼티가 false 값을 가질때 컨트롤이 보여지지 않음에도 불구하고 UpdateProgress 컨트롤은 보여지는 페이지의 공간을 차지합니다. 이런 경우에는 컨트롤의 <div> 요소가 스타일의 display 속성이 block이고 visibility가 초기에 hidden으로 설정되어 있습니다.

Putting UpdateProgress Controls on the Page

UpdatePanel 컨트롤 내부나 외부에 UpdateProgress 컨트롤을 삽입할 수 있습니다. UpdateProgress 컨트롤은 비동기적 포스트백의 결과와 같은 업데이트와 함께 UpdatePanel 컨트롤이 결합되는 것과 상관없이 보여지게 됩니다. 이는 다른 UpdatePanel 컨트롤 안에 UpdateProgress 컨트롤이 있음에도 불구하고 보여지게 됩니다.

다른 업데이트 패널 안에 UpdatePanel 컨트롤이 있다면, 자식 패널 내부에서 발생하는 포스트백은 자식 패널과 결합되는 어떠한 업데이트프로그래스 컨트롤도 보여지게 합니다. 이것은 또한 부모패널과 결합되는 어떠한 UpdateProgress 컨트롤도 보여줍니다. 부모 패널의 자식 컨트롤에서 포스트백이 직접 발생하였다면, 부모패널과 결합되는 UpdateProgress 컨트롤 만이 보여질 수 있습니다. 이것은 어떻게 포스트백이 일어나는가에 대한 로직을 수행합니다.

Specifying When UpdateProgress Controls Are Displayed

PageRequestManager 클래스의 beginRequest 자바스크립트 이벤트와 endRequest 자바스크립트 이벤트를 사용함으로서 언제 UpdateProgress 컨트롤이 보여지는가를 프로그래밍적으로 다룰 수 있습니다. beginRequest  이벤트 핸들러에서 UpdateProgress 컨트롤을 나타내는 DOM 엘리먼트를 보여줍니다. endRequest 이벤트 핸들러에선 엘리먼트를 숨깁니다.

다음의 환경에서 UpdateProgress 컨트롤을 보여주고 숨기기 위해선 클라이언트 스크립트를 제공하여야만 합니다.

• 컨트롤로부터 포스트백이 일어나는 동안 업데이트 패널의 비동기적 포스트백 트리거와 같이 등록되어 집니다. 하지만 UpdateProgress 컨트롤은 결합되지 못합니다.
• 컨트롤로 부터 포스트백이 일어나는 동안 ScriptManager 컨트롤의 RegisterAsyncPostBackControl(Control) 메소드를 사용하여 비동기적 포스트백 컨트롤과 같이 프로그래밍적으로 등록되어집니다. 이런 경우, UpdateProgress 컨트롤은 자동적으로 비동기적 포스트백을 일으키는 것을 결정할 수 없습니다.

Code Examples

다음의 부분에서 UpdateProgress 컨트롤의 사용과 생성에 대한 코드 예제를 포함합니다.

How-to and Walkthrough Topics

• Introduction to the UpdateProgress Control
• Programming UpdateProgress Controls in Client Script

Class Reference

다음 테이블의 목록은 UpdateProgress 클래스의 중요한 클래스 입니다.

Additional Topics

ASP.NET Page Life Cycle Overview

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.