다음을 통해 공유

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

  • 아티클

업데이트: 2007년 11월

이 자습서에서는 ECMAScript(JavaScript) 코드를 작성하여 클라이언트 동작에서 UpdateProgress 컨트롤을 확장합니다. 이 코드에서는 Microsoft AJAX 라이브러리에 포함된 PageRequestManager 클래스를 사용합니다. UpdateProgress 컨트롤에서 비동기 포스트백을 취소하는 데 사용할 수 있는 단추를 추가합니다. 이 작업의 일부로 클라이언트 스크립트를 사용하여 진행률 메시지를 표시하거나 숨깁니다.

이 항목에서는 사용자가 UpdateProgress 컨트롤에 대해 잘 알고 있다고 가정합니다. 그렇지 않은 경우 UpdateProgress 컨트롤 소개 항목을 참조하십시오.

사전 요구 사항

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

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

  • AJAX 사용 ASP.NET 웹 사이트

클라이언트 스크립트에서 비동기 포스트백을 취소하려면

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

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤, UpdatePanel 컨트롤 및 UpdateProgress 컨트롤을 두 번 클릭하여 각 컨트롤의 인스턴스 하나를 페이지에 추가합니다.

  3. 도구 상자의 표준 탭에서 Label 컨트롤을 UpdatePanel 컨트롤에 추가하고 레이블의 Text 속성을 Panel Rendered로 설정합니다.

  4. Button 컨트롤을 UpdatePanel 컨트롤에 추가하고 해당 Text 속성을 Refresh로 설정합니다.

  5. UpdateProgress 컨트롤에서 Processing…이라는 텍스트를 추가합니다.

  6. 도구 상자의 HTML 탭에서 HtmlButton 컨트롤을 UpdateProgress 컨트롤에 추가하고 해당 Value 특성을 Cancel로 설정합니다.

  7. Refresh 단추를 두 번 클릭하여 해당 Click 이벤트의 이벤트 처리기를 추가합니다.

  8. 인위적으로 3초의 지연을 만든 다음 레이블을 현재 서버 시간으로 설정하는 다음과 같은 코드를 Click 처리기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString();
}
    참고:

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

  9. <asp:ScriptManager> 요소 아래에 다음 스크립트를 추가합니다.

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

    이 스크립트는 PageRequestManager 클래스의 현재 인스턴스를 가져옵니다. 그런 다음 abortPostBack 메서드를 호출하여 비동기 포스트백을 중지하는 함수를 만듭니다.

  10. HtmlButton 컨트롤의 onclick 특성을 이전 단계에서 만든 처리기의 이름인 CancelAsyncPostBack으로 설정합니다.

    <input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

    <input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

  11. 다음 스타일 블록을 <head> 요소에 추가합니다.

    <style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

    <style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

    이 스타일 설정은 UpdateProgress 컨트롤이 브라우저 창의 왼쪽 아래 모퉁이에 표시되도록 구성합니다.

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

  13. Refresh를 클릭합니다.

    짧은 지연 후에 진행률 메시지가 표시됩니다. UpdatePanel 컨트롤의 메시지가 변경되어 시간을 표시하도록 부분 페이지 업데이트가 완료될 때까지 기다립니다.

    참고:

    DisplayAfter 속성을 설정하여 지연 시간을 구성할 수 있습니다. 기본값은 500밀리초입니다.

  14. Refresh를 다시 클릭한 다음 곧바로 Cancel을 클릭하여 부분 페이지 업데이트를 중지합니다.

    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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

클라이언트 스크립트를 사용하여 업데이트 진행률 표시

다음 시나리오에서는 UpdateProgress 컨트롤이 자동으로 표시되지 않습니다.

  • UpdateProgress 컨트롤이 특정 업데이트 패널에 연결되어 있지만 비동기 포스트백이 해당 업데이트 패널 내에 있지 않은 컨트롤에서 발생하는 경우

  • UpdateProgress 컨트롤이 UpdatePanel 컨트롤에 연결되어 있지 않고 비동기 포스트백이 UpdatePanel 내에 있지 않고 트리거가 아닌 컨트롤에서 발생하지 않는 경우(예: 업데이트가 코드에서 수행되는 경우)

다음 절차에서는 비동기 포스트백이 관련 UpdatePanel 컨트롤 내부에서 발생하지 않는 경우 UpdateProgress 컨트롤을 표시하는 방법을 보여 줍니다. 이 절차에서는 이 자습서의 처음 부분을 완료한 것으로 가정합니다.

UpdateProgress 컨트롤을 프로그래밍 방식으로 표시하려면

  1. 앞에서 만든 페이지에서 디자인 뷰로 전환합니다.

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

  3. UpdatePanel 및 UpdateProgress 컨트롤 밖의 위치에 Button 컨트롤을 추가합니다.

  4. 단추의 Text 속성을 Trigger로 설정하고 ID를 Panel1Trigger로 설정합니다.

  5. UpdatePanel 컨트롤을 선택하고 속성 창에서 Triggers 속성의 상자에서 줄임표(...)를 클릭합니다.

    UpdatePanelTrigger 컬렉션 편집기 대화 상자가 표시됩니다.

  6. AsyncPostBackTrigger 개체를 만들고 해당 ControlID 속성을 Panel1Trigger로 설정합니다.

  7. 확인을 클릭하여 컬렉션 편집기를 닫습니다.

  8. Trigger 단추를 두 번 클릭하여 해당 Click 이벤트의 이벤트 처리기를 추가합니다.

  9. 3초 지연을 인위적으로 만드는 다음 코드를 Click 처리기에 추가합니다. 이 코드에서는 이러한 지연 후에 포스트백이 트리거로 인해 발생했다는 메시지와 서버 시간을 표시합니다.

    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

    protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

  10. 소스 뷰에서 페이지에 이미 있는 <script> 블록 아래에 다음과 같은 클라이언트 스크립트를 추가합니다.

    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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

    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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

    이 스크립트는 다음 작업을 수행합니다.

    • PageRequestManager 클래스의 initializeRequest 이벤트에 대한 처리기를 정의합니다. 이 처리기 코드에서는 이미 진행 중인 비동기 포스트백을 모두 취소합니다. 그렇지 않고 포스트백이 Panel1Trigger<div> 요소에서 발생한 경우 이 코드에서는 UpdateProgress 템플릿을 표시합니다.

    • PageRequestManager 클래스의 endRequest 이벤트에 대한 처리기를 정의합니다. 포스트백이 Panel1Trigger<div> 요소에서 발생한 경우 이 처리기 코드에서는 진행률 컨트롤을 숨깁니다.

    다음 예제에서는 전체 스크립트 블록을 보여 줍니다.

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

    <script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

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

  12. Refresh 단추를 클릭합니다.

    짧은 지연 후에 진행률 메시지가 표시됩니다. UpdatePanel 컨트롤의 메시지에 시간이 표시되도록 부분 페이지 업데이트가 완료될 때까지 기다립니다.

  13. Trigger 단추를 클릭합니다.

    진행률 메시지가 표시됩니다.

    <%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

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

검토

이 자습서에서는 JavaScript 코드를 작성하여 UpdateProgress 컨트롤의 동작을 확장하는 방법을 보여 주었습니다. PageRequestManager 클래스의 이벤트 및 메서드를 사용하면 프로그램 방식으로 비동기 포스트백을 취소하고 UpdateProgress 컨트롤을 표시하거나 숨길 수 있습니다.

참고 항목

개념

PageRequestManager 이벤트 작업

참조

Sys.WebForms.PageRequestManager 클래스