ASP.NET UpdatePanel 컨트롤의 오류 처리 사용자 지정

Visual Studio 2010

업데이트: 2007년 11월

UpdatePanel 컨트롤의 부분 페이지 업데이트 중 오류가 발생하는 경우 기본 동작은 오류 메시지와 함께 브라우저 메시지 상자가 표시되는 것입니다. 이 자습서에서는 오류가 사용자에게 표시되는 방법을 사용자 지정하고 오류 메시지를 사용자 지정하는 방법을 보여 줍니다.

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

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

  • AJAX 사용 ASP.NET 웹 사이트

시작하려면 페이지에서 서버 코드를 사용하여 오류 처리를 사용자 지정합니다.

서버 코드에서 오류 처리를 사용자 지정하려면

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

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

    UpdatePanel 자습서
  3. 다음 컨트롤을 UpdatePanel 컨트롤 내에 추가합니다.

    • TextBox 컨트롤 두 개

    • Label 컨트롤 하나

    • Button 컨트롤 하나. 해당 Text 속성을 Calculate로 설정합니다.

    • UpdatePanel 컨트롤 내의 일부 텍스트

    UpdatePanel 자습서
  4. Calculate 단추를 두 번 클릭하고 해당 이벤트 처리기에 대해 다음 코드를 추가합니다.

    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {
            int a = Int32.Parse(TextBox1.Text);
            int b = Int32.Parse(TextBox2.Text);
            int res = a / b;
            Label1.Text = res.ToString();
        }
        catch (Exception ex)
        {
            if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
            {
                ex.Data["ExtraInfo"] = " You can't divide " +
                    TextBox1.Text + " by " + TextBox2.Text + ".";
            }
            throw ex;
        }        
    }
    
    
    

    이 코드에는 try-catch 문이 있습니다. try 블록에서 코드는 텍스트 상자에 입력된 값에 대해 나누기를 수행합니다. 작업이 실패하는 경우 catch 블록의 코드는 ExtraInfo의 추가 문자열 정보를 예외에 추가한 다음 예외를 처리하지 않고 다시 throw합니다.

  5. 디자인 뷰로 전환하고 ScriptManager 컨트롤을 선택합니다.

  6. 속성 창의 도구 모음에서 이벤트 단추를 클릭한 다음 AsyncPostBackError 상자를 두 번 클릭하여 해당 이벤트에 대한 처리기를 만듭니다.

    UpdatePanel 자습서
  7. AsyncPostBackError 이벤트 처리기에 다음 코드를 추가합니다.

    protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
    {
        if (e.Exception.Data["ExtraInfo"] != null)
        {
            ScriptManager1.AsyncPostBackErrorMessage =
                e.Exception.Message +
                e.Exception.Data["ExtraInfo"].ToString();
        }
        else
        {
            ScriptManager1.AsyncPostBackErrorMessage =
                "An unspecified error occurred.";
        }
    }
    
    
    

    이 코드는 ExtraInfo 데이터 항목이 예외에 대해 정의되어 있는지 여부를 확인합니다. 정의되어 있는 경우 AsyncPostBackErrorMessage 속성이 문자열 값으로 설정됩니다. 그렇지 않은 경우 기본 오류 메시지가 만들어집니다.

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

  9. 0보다 큰 숫자를 각 텍스트 상자에 추가한 다음 Calculate 단추를 클릭하여 성공한 포스트백을 표시합니다.

  10. 두 번째 텍스트 상자 값을 0으로 변경한 다음 Calculate 단추를 클릭하여 오류 조건을 만듭니다.

    브라우저는 서버 코드에 설정된 메시지를 포함하는 메시지 상자를 표시합니다.

    UpdatePanel 자습서
    Bb398934.alert_note(ko-kr,VS.100).gif참고:

    메시지 상자의 스타일은 사용하고 있는 브라우저에 따라 다르지만 메시지는 모든 브라우저에서 같습니다.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        protected void Button1_Click(object sender, EventArgs e)
        {
            try
            {
                int a = Int32.Parse(TextBox1.Text);
                int b = Int32.Parse(TextBox2.Text);
                int res = a / b;
                Label1.Text = res.ToString();
            }
            catch (Exception ex)
            {
                if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
                {
                    ex.Data["ExtraInfo"] = " You can't divide " +
                        TextBox1.Text + " by " + TextBox2.Text + ".";
                }
                throw ex;
            }        
        }
        protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
        {
            if (e.Exception.Data["ExtraInfo"] != null)
            {
                ScriptManager1.AsyncPostBackErrorMessage =
                    e.Exception.Message +
                    e.Exception.Data["ExtraInfo"].ToString();
            }
            else
            {
                ScriptManager1.AsyncPostBackErrorMessage =
                    "An unspecified error occurred.";
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Partial-Page Update Error Handling Example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
                        /
                        <asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
                        =
                        <asp:Label ID="Label1" runat="server"></asp:Label><br />
                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
    
    
    

이전 절차에서는 ScriptManager 컨트롤의 속성을 설정하여 부분 페이지 렌더링 동안 오류를 사용자 지정하는 방법을 설명했습니다. 다음 절차에서는 클라이언트 PageRequestManager 클래스를 사용하여 사용자 지정을 바탕으로 브라우저 메시지 상자 대신 <div> 요소에 오류 메시지를 표시합니다.

클라이언트 스크립트의 오류 처리를 사용자 지정하려면

  1. 이전에 만든 페이지의 소스 뷰로 전환합니다.

  2. 페이지에 다음 태그를 추가합니다.

        <div id="AlertDiv">
            <div id="AlertMessage">
            </div>
            <br />
            <div id="AlertButtons">
                <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
            </div>
        </div>
    </div>
    
    
    

    태그에는 부분 페이지 렌더링 오류를 표시하는 데 사용할 수 있는 요소가 포함됩니다. 그리고 두 개의 다른 <div> 요소를 포함하는 AlertDiv라는 <div> 요소를 정의합니다. 중첩된 <div> 요소 중 하나에는 사용자가 <div> 요소를 숨길 수 있게 해주는 <input> 컨트롤이 포함됩니다.

  3. <head> 요소에 다음 스타일 태그를 추가합니다.

    <style type="text/css">
    #UpdatePanel1 {
      width: 200px; height: 50px;
      border: solid 1px gray;
    }
    #AlertDiv{
    left: 40%; top: 40%;
    position: absolute; width: 200px;
    padding: 12px; 
    border: #000000 1px solid;
    background-color: white; 
    text-align: left;
    visibility: hidden;
    z-index: 99;
    }
    #AlertButtons{
    position: absolute; right: 5%; bottom: 5%;
    }
    </style>
    
    
    

    스타일은 나머지 페이지 콘텐츠에서 오류 정보를 시각적으로 강조합니다.

  4. 디자인 뷰로 전환하여 사용자 페이지가 다음과 유사한지 확인합니다.

    UpdatePanel 자습서
  5. 속성 창의 맨 위에 있는 드롭다운 목록에서 페이지의 <body> 요소를 나타내는 DOCUMENT 요소를 선택하고 해당 Id 속성을 bodytag로 설정합니다.

    UpdatePanel 자습서
  6. 소스 뷰로 전환합니다.

  7. 다음 <script> 블록을 <asp:ScriptManager> 요소 뒤의 아무 위치에나 추가합니다.

    <script type="text/javascript" language="javascript">
    var divElem = 'AlertDiv';
    var messageElem = 'AlertMessage';
    var bodyTag = 'bodytag';
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function ToggleAlertDiv(visString)
    {
         if (visString == 'hidden')
         {
             $get(bodyTag).style.backgroundColor = 'white';                         
         }
         else
         {
             $get(bodyTag).style.backgroundColor = 'gray';                         
    
         }
         var adiv = $get(divElem);
         adiv.style.visibility = visString;
    
    }
    function ClearErrorState() {
         $get(messageElem).innerHTML = '';
         ToggleAlertDiv('hidden');                     
    }
    function EndRequestHandler(sender, args)
    {
       if (args.get_error() != undefined)
       {
           var errorMessage;
           if (args.get_response().get_statusCode() == '200')
           {
               errorMessage = args.get_error().message;
           }
           else
           {
               // Error occurred somewhere other than the server page.
               errorMessage = 'An unspecified error occurred. ';
           }
           args.set_errorHandled(true);
           ToggleAlertDiv('visible');
           $get(messageElem).innerHTML = errorMessage;
       }
    }
    </script>
    
    
    

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

    • PageRequestManager 클래스의 endRequest 이벤트에 대한 처리기를 정의합니다. 오류 조건이 있는 경우 처리기의 코드는 AlertDiv <div> 요소를 표시합니다.

    • AlertDiv 요소를 숨기거나 표시하고 오류 조건을 기반으로 페이지의 색을 변경하는 ToggleAlertDiv 함수를 정의합니다.

    • 오류 메시지 UI를 숨기는 ClearErrorState 함수를 정의합니다.

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

  9. 0보다 큰 숫자를 각 텍스트 상자에 추가한 다음 Calculate 단추를 클릭하여 성공한 포스트백을 표시합니다.

  10. 두 번째 텍스트 상자 값을 0으로 변경한 다음 Calculate 단추를 클릭하여 오류 조건을 표시합니다.

    사용자 지정 AlertDiv 요소가 브라우저 메시지 상자 대신 표시됩니다. 다음 그림에서는 오류 조건의 예제를 보여 줍니다.

    UpdatePanel 자습서
    
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            try
            {
                int a = Int32.Parse(TextBox1.Text);
                int b = Int32.Parse(TextBox2.Text);
                int res = a / b;
                Label1.Text = res.ToString();
            }
            catch (Exception ex)
            {
                if (TextBox1.Text.Length > 0 && TextBox2.Text.Length > 0)
                {
                    ex.Data["ExtraInfo"] = " You can't divide " +
                        TextBox1.Text + " by " + TextBox2.Text + ".";
                }
                throw ex;
            }
        }
    
        protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
        {
            if (e.Exception.Data["ExtraInfo"] != null)
            {
                ScriptManager1.AsyncPostBackErrorMessage =
                    e.Exception.Message +
                    e.Exception.Data["ExtraInfo"].ToString();
            }
            else
            {
                ScriptManager1.AsyncPostBackErrorMessage =
                    "An unspecified error occurred.";
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>UpdatePanel Error Handling Example</title>
        <style type="text/css">
        #UpdatePanel1 {
          width: 200px; height: 50px;
          border: solid 1px gray;
        }
        #AlertDiv{
        left: 40%; top: 40%;
        position: absolute; width: 200px;
        padding: 12px; 
        border: #000000 1px solid;
        background-color: white; 
        text-align: left;
        visibility: hidden;
        z-index: 99;
        }
        #AlertButtons{
        position: absolute; right: 5%; bottom: 5%;
        }
        </style>
    </head>
    <body id="bodytag">
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
                </asp:ScriptManager>
                <script type="text/javascript" language="javascript">
                var divElem = 'AlertDiv';
                var messageElem = 'AlertMessage';
                var bodyTag = 'bodytag';
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function ToggleAlertDiv(visString)
                {
                     if (visString == 'hidden')
                     {
                         $get(bodyTag).style.backgroundColor = 'white';                         
                     }
                     else
                     {
                         $get(bodyTag).style.backgroundColor = 'gray';                         
    
                     }
                     var adiv = $get(divElem);
                     adiv.style.visibility = visString;
    
                }
                function ClearErrorState() {
                     $get(messageElem).innerHTML = '';
                     ToggleAlertDiv('hidden');                     
                }
                function EndRequestHandler(sender, args)
                {
                   if (args.get_error() != undefined)
                   {
                       var errorMessage;
                       if (args.get_response().get_statusCode() == '200')
                       {
                           errorMessage = args.get_error().message;
                       }
                       else
                       {
                           // Error occurred somewhere other than the server page.
                           errorMessage = 'An unspecified error occurred. ';
                       }
                       args.set_errorHandled(true);
                       ToggleAlertDiv('visible');
                       $get(messageElem).innerHTML = errorMessage;
                   }
                }
                </script>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Width="39px"></asp:TextBox>
                        /
                        <asp:TextBox ID="TextBox2" runat="server" Width="39px"></asp:TextBox>
                        =
                        <asp:Label ID="Label1" runat="server"></asp:Label><br />
                        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="calculate" />
                    </ContentTemplate>
                </asp:UpdatePanel>
                <div id="AlertDiv">
                    <div id="AlertMessage">
                    </div>
                    <br />
                    <div id="AlertButtons">
                        <input id="OKButton" type="button" value="OK" runat="server" onclick="ClearErrorState()" />
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    
    
    

이 자습서에서는 부분 페이지 렌더링 동안 오류 처리를 확장할 수 있는 방법을 설명했습니다. 서버 코드에서는 AsyncPostBackErrorMessage 속성을 설정하고 ScriptManager 컨트롤의 AsyncPostBackError 이벤트를 처리하여 오류 처리를 사용자 지정할 수 있습니다. 클라이언트 코드에서는 PageRequestManager 클래스의 endRequest 이벤트를 처리하여 오류 처리를 사용자 지정할 수 있습니다.

표시: