다음을 통해 공유

UpdateProgress 컨트롤 개요

  • 아티클

업데이트: 2007년 11월

UpdateProgress 컨트롤은 UpdatePanel 컨트롤의 부분 페이지 업데이트에 대한 상태 정보를 제공합니다. UpdateProgress 컨트롤의 기본 콘텐츠 및 레이아웃을 사용자 지정할 수 있습니다. 부분 페이지 업데이트가 매우 빠르게 진행될 때 깜박이지 않도록 하려면 UpdateProgress 컨트롤이 표시되기 전에 지연을 지정할 수 있습니다.

이 항목에서는 다음에 대해 설명합니다.

  • 시나리오

  • 배경

  • 코드 예제

  • 클래스 참조

시나리오

웹 페이지에 부분 페이지 렌더링을 위한 하나 이상의 UpdatePanel 컨트롤이 포함된 경우 UpdateProgress 컨트롤을 사용하면 보다 이해하기 쉬운 UI를 디자인하는 데 도움이 됩니다. 부분 페이지 업데이트가 느린 경우 UpdateProgress 컨트롤을 사용하여 업데이트 상태에 대한 시각적 피드백을 제공할 수 있습니다. 각각 다른 UpdatePanel 컨트롤과 연결된 여러 UpdateProgress 컨트롤을 페이지에 배치할 수 있습니다. 또는 하나의 UpdateProgress 컨트롤을 사용하고 이를 페이지의 모든 UpdatePanel 컨트롤과 연결할 수 있습니다.

배경

UpdateProgress 컨트롤은 연결된 UpdatePanel 컨트롤로 인해 비동기 포스트백이 발생했는지 여부에 따라 표시 또는 숨겨지는 <div> 요소를 렌더링합니다. 초기 페이지 렌더링 및 동기 포스트백의 경우 UpdateProgress 컨트롤이 표시되지 않습니다.

UpdateProgress 컨트롤과 UpdatePanel 컨트롤 연결

UpdateProgress 컨트롤의 AssociatedUpdatePanelID 속성을 설정하여 UpdateProgress 컨트롤과 UpdatePanel 컨트롤을 연결합니다. UpdatePanel 컨트롤에서 포스트백 이벤트가 발생하면 연결된 모든 UpdateProgress 컨트롤이 표시됩니다. UpdateProgress 컨트롤과 특정 UpdatePanel 컨트롤을 연결하지 않으면 UpdateProgress 컨트롤이 모든 비동기 포스트백에 대한 진행률을 표시합니다.

UpdatePanel 컨트롤의 ChildrenAsTriggers 속성을 false로 설정하고 해당 UpdatePanel 컨트롤 내에서 비동기 포스트백이 발생하면 연결된 모든 UpdateProgress 컨트롤이 표시됩니다.

UpdateProgress 컨트롤의 콘텐츠 만들기

ProgressTemplate 속성을 사용하여 UpdateProgress 컨트롤로 표시되는 메시지를 선언적으로 지정합니다. <ProgressTemplate> 요소에는 HTML 및 태그가 포함될 수 있습니다. 다음 예제에서는 UpdateProgress 컨트롤의 메시지를 지정하는 방법을 보여 줍니다.

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

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

다음 예제에서는 두 UpdatePanel 컨트롤에 대한 업데이트 상태를 표시하는 하나의 UpdateProgress 컨트롤을 보여 줍니다.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 { 
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" >
    <ProgressTemplate>
      Update in progress...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

다음 예제에서는 두 UpdateProgress 컨트롤을 보여 줍니다. 각 컨트롤은 연결된 UpdatePanel 컨트롤에 대한 업데이트 상태를 표시합니다.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;
     }
     #UpdateProgress1, #UpdateProgress2 {
      width: 200px; background-color: #FFC080;
      position: absolute; bottom: 0px; left: 0px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button1"  Text="Refresh Panel" OnClick="Button_Click" />    
    <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
    <ProgressTemplate>
      UpdatePanel1 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      UpdatePanel2 updating...
    </ProgressTemplate>
    </asp:UpdateProgress>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

다음 예제에서는 <ProgressTemplate> 요소에 사용자가 클릭하여 비동기 포스트백을 중지할 수 있는 단추를 추가하는 방법을 보여 줍니다. 다른 포스트백이 실행되는 중 시작된 새 포스트백은 모두 취소됩니다.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    Protected Sub Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Example</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
      border-right: gray 1px solid; border-top: gray 1px solid; 
      border-left: gray 1px solid; border-bottom: gray 1px solid;    
    }
    #UpdatePanel1, #UpdatePanel2 { 
      width:200px; height:200px; position: relative;
      float: left; margin-left: 10px; margin-top: 10px;
     }
     #UpdateProgress1 {
      width: 400px; background-color: #FFC080; 
      bottom: 0%; left: 0px; position: absolute;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
    <asp:ScriptManager ID="ScriptManager1"  />
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var postBackElement;
    function InitializeRequest(sender, args) {
       if (prm.get_isInAsyncPostBack())
       {
          args.set_cancel(true);
       }
       postBackElement = args.get_postBackElement();
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "block";
       }
    }
    function EndRequest (sender, args) {
       if (postBackElement.id == 'ButtonTrigger')
       {
         $get('UpdateProgress1').style.display = "none";    
       }
    }
    function AbortPostBack() {
      if (prm.get_isInAsyncPostBack()) {
           prm.abortPostBack();
      }        
    }
    </script>
    <asp:Button ID="ButtonTrigger"  Text="Refresh Panel 1" OnClick="Button_Click" />    
    <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    The trigger for this panel 
    causes the UpdateProgress to be displayed
    even though the UpdateProgress is associated
    with panel 2.     
    <br />
    </ContentTemplate>
    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
    <ContentTemplate>
    <%=DateTime.Now.ToString() %> <br />
    <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="Button_Click"/>    
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
      Update in progress...
      <input type="button" value="stop" onclick="AbortPostBack()" />
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>
    </form>
</body>
</html>

이전 예제에서 <ProgressTemplate> 요소에 있는 HtmlButton 컨트롤의 onClick 특성은 JavaScript AbortPostBack 함수를 호출합니다. 자세한 내용은 PageRequestManager 클래스의 isInAsyncPostBack 속성 및 abortPostBack 메서드를 참조하십시오.

콘텐츠 레이아웃 지정

DynamicLayout 속성이 true이면 UpdateProgress 컨트롤이 처음에 페이지에 표시될 때 공간을 차지하지 않습니다. 대신 필요 시 페이지가 동적으로 변경되어 UpdateProgress 컨트롤 콘텐츠를 표시합니다. 동적 디스플레이를 지원하기 위해 컨트롤은 해당 display 스타일 속성이 처음에 none으로 설정된 <div> 요소로 렌더링됩니다.

DynamicLayout 속성이 false이면 UpdateProgress 컨트롤이 보이지 않더라도 페이지에 표시될 때 공간을 차지합니다. 이 경우 컨트롤의 <div> 요소는 해당 display 스타일 속성이 block으로 설정되고 해당 visibility가 처음에 hidden으로 설정됩니다.

페이지에 UpdateProgress 컨트롤 배치

UpdatePanel 컨트롤 내부 또는 외부에 UpdateProgress 컨트롤을 배치할 수 있습니다. UpdateProgress 컨트롤은 연결된 UpdatePanel 컨트롤이 비동기 포스트백의 결과로 업데이트될 때마다 표시됩니다. UpdateProgress 컨트롤이 다른 UpdatePanel 컨트롤 내부에 있는 경우에도 마찬가지입니다.

UpdatePanel 컨트롤이 다른 업데이트 패널 내에 있는 경우 자식 패널 내에서 포스트백이 발생하면 해당 자식 패널과 연결된 모든 UpdateProgress 컨트롤이 표시됩니다. 또한 부모 패널과 연결된 모든 UpdateProgress 컨트롤이 표시됩니다. 부모 패널의 직계 자식 컨트롤에서 포스트백이 발생하면 해당 부모 패널과 연결된 UpdateProgress 컨트롤만 표시됩니다. 이는 포스트백이 트리거되는 방식에 대한 논리를 따릅니다.

UpdateProgress 컨트롤이 표시되는 경우 지정

PageRequestManager 클래스의 JavaScript beginRequest 및 endRequest 이벤트를 사용하여 UpdateProgress 컨트롤이 표시되는 경우를 프로그래밍 방식으로 지정할 수 있습니다. beginRequest 이벤트 처리기에서는 UpdateProgress 컨트롤을 나타내는 DOM 요소를 표시하고 endRequest 이벤트 처리기에서는 해당 요소를 숨깁니다.

다음과 같은 경우에는 UpdateProgress 컨트롤을 표시 및 숨기는 클라이언트 스크립트를 제공해야 합니다.

  • 업데이트 패널(UpdateProgress 컨트롤과 연결되지 않음)에 대해 비동기 포스트백 트리거로 등록된 컨트롤에서 발생한 포스트백 중

  • ScriptManager 컨트롤의 RegisterAsyncPostBackControl 메서드를 사용하여 프로그래밍 방식으로 비동기 포스트백 컨트롤로 등록된 컨트롤에서 발생한 포스트백 중. 이 경우 UpdateProgress 컨트롤은 비동기 포스트백이 트리거되었는지 여부를 자동으로 확인할 수 없습니다.

코드 예제

다음 단원에는 [T:System.Web.UI.]UpdateProgress 컨트롤을 만들고 사용하는 방법을 보여 주는 코드 예제가 포함되어 있습니다.

자습서

클래스 참조

다음 표에서는 [T:System.Web.UI.]UpdateProgress 컨트롤을 사용하기 위한 핵심 클래스를 보여 줍니다.

Class

설명

UpdateProgress

UpdatePanel 컨트롤의 콘텐츠가 업데이트될 때 브라우저에 시각적 피드백을 제공합니다.

UpdatePanel

부분 페이지 업데이트에 참여할 수 있는 웹 페이지 부분을 지정합니다.

ScriptManager

부분 페이지 렌더링을 관리합니다. ScriptManager 컨트롤은 브라우저에 보낼 스크립트 구성 요소를 등록하고 페이지의 지정된 영역만 렌더링되도록 페이지 렌더링을 재정의합니다.

PageRequestManager

브라우저에서의 부분 페이지 렌더링을 조정합니다. PageRequestManager 클래스는 서버와 비동기적으로 정보를 교환하고 사용자 지정 클라이언트 스크립팅을 위해 이벤트 및 메서드를 노출합니다.

추가 항목

ASP.NET 페이지 수명 주기 개요

참고 항목

작업

UpdatePanel 컨트롤 소개

UpdateProgress 컨트롤 소개

클라이언트 스크립트에서 UpdateProgress 컨트롤 프로그래밍

개념

UpdatePanel 컨트롤 개요