Настройка обработки ошибок для элементов управления ASP.NET UpdatePanel

Visual Studio 2010

Обновлен: Ноябрь 2007

При возникновении ошибки во время частичного обновления страницы в элементах управления UpdatePanel веб-обозреватель по умолчанию отображает окно сообщения с сообщением об ошибке. Это руководство показывает способ настройки представления ошибки пользователю и самого сообщения об ошибке.

Для реализации процедур в собственной среде разработки потребуется:

  • Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск.

  • Веб-узел ASP.NET с включенным AJAX.

Вначале будет выполнена настройка ошибок с помощью кода сервера на странице.

Чтобы настроить обработку ошибок в коде сервера

  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 к исключению и затем заново создает исключение без обработки.

  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. В каждое поле введите любое число больше нуля и нажмите кнопку Calculate для демонстрации успешной обратной передачи.

  10. Измените значение второго текстового поля на 0 и нажмите Calculate, чтобы создать ситуацию ошибки.

    Веб-обозреватель отобразит окно сообщения, содержащее сообщение, установленное в коде сервера.

    Урок UpdatePanel
    Bb398934.alert_note(ru-ru,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> содержит элемент управления <input>, который позволит пользователям скрывать элемент <div>.

  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. Из раскрывающегося списка в верхней части окна свойств выберите элемент DOCUMENT, соответствующий элементу страницы <body>, и задайте его свойству 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>
    
    
    

    Данный сценарий выполняет следующие действия:

    • Определяет обработчик для событий endRequest класса PageRequestManager. В обработчике код отображает элемент AlertDiv <div> при возникновении ситуации ошибки.

    • Определяет функцию ToggleAlertDiv, которая скрывает или отображает элемент AlertDiv и изменяет цвет страницы в зависимости от ситуации ошибки.

    • Определяет функцию ClearErrorState, которая скрывает пользовательский интерфейс сообщения об ошибке.

  8. Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.

  9. В каждое поле введите любое число больше нуля и нажмите кнопку 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 и обработки события AsyncPostBackError элемента управления ScriptManager. В клиентском коде обработку ошибок можно настроить путем обработки события endRequest класса PageRequestManager.

Показ: