UpdateProgress 컨트롤 소개
업데이트: 2007년 11월
이 자습서에서는 UpdateProgress 컨트롤을 사용하여 부분 페이지 업데이트의 진행률을 표시합니다. 페이지에 UpdatePanel 컨트롤이 포함되어 있는 경우 UpdateProgress 컨트롤을 추가하여 부분 페이지 업데이트의 상태에 대해 사용자에게 알려 줄 수 있습니다. 하나의 UpdateProgress 컨트롤을 사용하여 전체 페이지에 대한 부분 페이지 업데이트의 진행률을 표시할 수 있습니다. 또는 각 UpdatePanel 컨트롤에 대한 UpdateProgress 컨트롤을 포함할 수 있습니다. 이러한 두 가지 패턴에 대해 이 자습서에서 설명합니다.
사전 요구 사항
고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.
Microsoft Visual Studio 2005 또는 Visual Web Developer Express Edition
AJAX 사용 ASP.NET 웹 사이트
단일 UpdateProgress 컨트롤 사용
먼저 하나의 UpdateProgress 컨트롤을 사용하여 페이지의 모든 부분 페이지 업데이트에 대한 진행률을 표시합니다.
전체 페이지에 대해 하나의 UpdateProgress 컨트롤을 사용하려면
새 페이지를 만들고 디자인 뷰로 전환합니다.
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
UpdateProgress 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
UpdateProgress 컨트롤 내에 Processing…이라는 텍스트를 입력합니다.
UpdatePanel 컨트롤 내에 Label 컨트롤 및 Button 컨트롤을 추가합니다.
Label 컨트롤의 Text 속성을 Initial Page Rendered로 설정합니다.
Button 컨트롤을 두 번 클릭하여 단추의 Click 이벤트에 대한 처리기를 추가합니다.
인위적으로 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 이벤트에 대한 처리기는 이 자습서를 위해 지연을 인위적으로 적용합니다. 실제로는 지연을 적용하지 않습니다. 대신 서버 트래픽이나, 실행 시간이 긴 데이터베이스 쿼리 같이 처리 시간이 오래 걸리는 서버 코드로 인해 시간 지연이 발생합니다.
변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 해당 페이지를 봅니다.
단추를 클릭합니다.
짧은 지연 후에 진행률 메시지가 표시됩니다. 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 컨트롤을 사용하려면
새 페이지를 만들고 디자인 뷰로 전환합니다.
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
두 번에 걸쳐 UpdatePanel 컨트롤을 두 번 클릭하여 컨트롤의 인스턴스 두 개를 페이지에 추가합니다.
각 UpdatePanel 컨트롤에서 Label 컨트롤 및 Button 컨트롤을 추가합니다.
두 Label 컨트롤의 Text 속성을 Panel Initially Rendered로 설정합니다.
각 Button 컨트롤을 두 번 클릭하여 각 단추의 Click 이벤트에 대한 처리기를 추가합니다.
인위적으로 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(); }
디자인 뷰로 전환합니다.
첫 번째 UpdatePanel 컨트롤 내부를 클릭하고 UpdateProgress 컨트롤을 추가합니다.
UpdateProgress 컨트롤 내에 Panel1 Updating이라는 텍스트를 입력합니다.
이렇게 하면 ProgressTemplate 속성이 설정됩니다.
UpdateProgress 컨트롤을 선택하고 속성 창에서 AssociatedUpdatePanelID 속성을 UpdatePanel1로 설정합니다.
두 번째 UpdatePanel 컨트롤 내부를 클릭하고 두 번째 UpdateProgress 컨트롤을 추가합니다.
UpdateProgress 컨트롤의 텍스트를 Panel2 Updating으로 설정하고 해당 AssociatedUpdatePanelID 속성을 UpdatePanel2로 설정합니다.
변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.
첫 번째 패널의 단추를 클릭합니다.
짧은 지연 후에 첫 번째 패널과 관련된 진행률 메시지가 표시됩니다. 다른 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 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 컨트롤에 연결하는 것입니다.