다음을 통해 공유

UpdateProgress 컨트롤 소개

  • 아티클

업데이트: 2007년 11월

이 자습서에서는 UpdateProgress 컨트롤을 사용하여 부분 페이지 업데이트의 진행률을 표시합니다. 페이지에 UpdatePanel 컨트롤이 포함되어 있는 경우 UpdateProgress 컨트롤을 추가하여 부분 페이지 업데이트의 상태에 대해 사용자에게 알려 줄 수 있습니다. 하나의 UpdateProgress 컨트롤을 사용하여 전체 페이지에 대한 부분 페이지 업데이트의 진행률을 표시할 수 있습니다. 또는 각 UpdatePanel 컨트롤에 대한 UpdateProgress 컨트롤을 포함할 수 있습니다. 이러한 두 가지 패턴에 대해 이 자습서에서 설명합니다.

사전 요구 사항

고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.

  • Microsoft Visual Studio 2005 또는 Visual Web Developer Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

단일 UpdateProgress 컨트롤 사용

먼저 하나의 UpdateProgress 컨트롤을 사용하여 페이지의 모든 부분 페이지 업데이트에 대한 진행률을 표시합니다.

전체 페이지에 대해 하나의 UpdateProgress 컨트롤을 사용하려면

  1. 새 페이지를 만들고 디자인 뷰로 전환합니다.

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

  3. UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

  4. UpdateProgress 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

  5. UpdateProgress 컨트롤 내에 Processing…이라는 텍스트를 입력합니다.

  6. UpdatePanel 컨트롤 내에 Label 컨트롤 및 Button 컨트롤을 추가합니다.

  7. Label 컨트롤의 Text 속성을 Initial Page Rendered로 설정합니다.

  8. Button 컨트롤을 두 번 클릭하여 단추의 Click 이벤트에 대한 처리기를 추가합니다.

  9. 인위적으로 3초의 지연을 만든 다음 현재 시간을 표시하는 다음과 같은 코드를 Click 처리기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}
    참고:

    Click 이벤트에 대한 처리기는 이 자습서를 위해 지연을 인위적으로 적용합니다. 실제로는 지연을 적용하지 않습니다. 대신 서버 트래픽이나, 실행 시간이 긴 데이터베이스 쿼리 같이 처리 시간이 오래 걸리는 서버 코드로 인해 시간 지연이 발생합니다.

  10. 변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 해당 페이지를 봅니다.

  11. 단추를 클릭합니다.

    짧은 지연 후에 진행률 메시지가 표시됩니다. Click 이벤트에 대한 처리기가 완료되면 진행률 메시지가 숨겨지고 패널에 표시되는 시간이 업데이트됩니다.

    이 예제는 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Initial page rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

여러 UpdateProgress 컨트롤 사용

페이지에 있는 하나의 UpdateProgress 컨트롤에서 페이지의 모든 UpdatePanel 컨트롤에 대한 진행률 메시지를 표시할 수 있습니다. UpdatePanel 컨트롤 내부에서 발생하는 비동기 포스트백은 UpdateProgress 컨트롤에서 해당 메시지를 표시하도록 만듭니다. 패널에 대한 트리거인 컨트롤의 포스트백에서도 메시지를 표시합니다.

Progress 컨트롤의 AssociatedUpdatePanelID 속성을 설정하여 UpdateProgress 컨트롤을 단일 UpdatePanel 컨트롤에 연결할 수 있습니다. 이 경우 UpdateProgress 컨트롤에서는 포스트백이 연결된 UpdatePanel 컨트롤 내부에서 발생하는 경우에만 메시지를 표시합니다.

다음 절차에서는 페이지에 두 개의 UpdateProgress 컨트롤을 추가하고 각 컨트롤을 서로 다른 UpdatePanel 컨트롤에 연결합니다.

페이지에서 여러 UpdateProgress 컨트롤을 사용하려면

  1. 새 페이지를 만들고 디자인 뷰로 전환합니다.

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

  3. 두 번에 걸쳐 UpdatePanel 컨트롤을 두 번 클릭하여 컨트롤의 인스턴스 두 개를 페이지에 추가합니다.

  4. 각 UpdatePanel 컨트롤에서 Label 컨트롤 및 Button 컨트롤을 추가합니다.

  5. 두 Label 컨트롤의 Text 속성을 Panel Initially Rendered로 설정합니다.

  6. 각 Button 컨트롤을 두 번 클릭하여 각 단추의 Click 이벤트에 대한 처리기를 추가합니다.

  7. 인위적으로 3초의 지연을 만든 다음 현재 시간을 표시하는 다음과 같은 코드를 각 Click 처리기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    ' Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000)
    Label1.Text = "Page refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label1.Text = "Page refreshed at " +
        DateTime.Now.ToString();       
}

protected void Button2_Click(object sender, EventArgs e)
{
    // Introducing delay for demonstration.
    System.Threading.Thread.Sleep(3000);
    Label2.Text = "Page refreshed at " +
        DateTime.Now.ToString();       

}

  8. 디자인 뷰로 전환합니다.

  9. 첫 번째 UpdatePanel 컨트롤 내부를 클릭하고 UpdateProgress 컨트롤을 추가합니다.

  10. UpdateProgress 컨트롤 내에 Panel1 Updating이라는 텍스트를 입력합니다.

    이렇게 하면 ProgressTemplate 속성이 설정됩니다.

  11. UpdateProgress 컨트롤을 선택하고 속성 창에서 AssociatedUpdatePanelID 속성을 UpdatePanel1로 설정합니다.

  12. 두 번째 UpdatePanel 컨트롤 내부를 클릭하고 두 번째 UpdateProgress 컨트롤을 추가합니다.

  13. UpdateProgress 컨트롤의 텍스트를 Panel2 Updating으로 설정하고 해당 AssociatedUpdatePanelID 속성을 UpdatePanel2로 설정합니다.

  14. 변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

  15. 첫 번째 패널의 단추를 클릭합니다.

    짧은 지연 후에 첫 번째 패널과 관련된 진행률 메시지가 표시됩니다. 다른 UpdateProgress 컨트롤은 표시되지 않습니다.

  16. 두 번째 패널의 단추를 클릭합니다.

    두 번째 패널과 관련된 진행률 메시지가 표시됩니다.

    참고:

    기본적으로 이전 비동기 포스트백이 진행 중일 때 새 비동기 포스트백을 시작하면 첫 번째 포스트백이 취소됩니다. 자세한 내용은 특정 비동기 포스트백에 우선 순위 설정을 참조하십시오.

    이 예제는 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000)
        Label1.Text = "Page refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </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 Button1_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label1.Text = "Page refreshed at " +
            DateTime.Now.ToString();       
    }

    protected void Button2_Click(object sender, EventArgs e)
    {
        // Introducing delay for demonstration.
        System.Threading.Thread.Sleep(3000);
        Label2.Text = "Page refreshed at " +
            DateTime.Now.ToString();       

    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1, #UpdatePanel2 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel1</legend>
                <asp:Label ID="Label1"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button1"  Text="Button" OnClick="Button1_Click" />
                <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Panel1 updating...
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="UpdatePanel2" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel2</legend>
                <asp:Label ID="Label2"  Text="Panel initially rendered."></asp:Label>
                <br />
                <asp:Button ID="Button2"  Text="Button" OnClick="Button2_Click" />
                <asp:UpdateProgress ID="UpdateProgress2"  AssociatedUpdatePanelID="UpdatePanel2">
                    <ProgressTemplate>
                        Panel2 updating....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

검토

이 자습서에서는 UpdateProgress 컨트롤을 사용하는 두 가지 방법을 소개했습니다. 첫 번째 방법은 특정 UpdatePanel 컨트롤에 연결되지 않는 UpdateProgress 컨트롤 하나를 페이지에 추가하는 것입니다. 이 경우 컨트롤에서는 모든 UpdatePanel 컨트롤에 대한 진행률 메시지를 표시합니다. Progress 컨트롤을 사용하는 두 번째 방법은 여러 UpdateProgress 컨트롤을 추가하고 각 컨트롤을 서로 다른 UpdatePanel 컨트롤에 연결하는 것입니다.

참고 항목

작업

UpdatePanel 컨트롤 소개

개념

UpdateProgress 컨트롤 개요

부분 페이지 렌더링 개요

참조

UpdateProgress

UpdatePanel