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

Статья
10/22/2014

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

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

Обязательные компоненты

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

Microsoft Visual Studio 2005 или Microsoft Visual Web Developer, экспресс-выпуск.
Веб-узел ASP.NET с включенным AJAX.

Настройка обработки ошибок в коде сервера

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

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

Создайте новую страницу и переключитесь в представление конструирования.
На вкладке Расширения AJAX панели элементов дважды щелкните элементы управления ScriptManager и UpdatePanel, чтобы добавить их на страницу.
Добавьте следующие элементы внутрь элемента управления UpdatePanel:
- Два элемента управления TextBox.
- Элемент управления Label
- Элемент управления Button. Присвойте его свойству Text значение Calculate.
- Любой текст внутри элемента управления UpdatePanel.

Дважды нажмите кнопку Calculate и добавьте следующий код для его обработчика событий:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Try
        Dim a As Int32
        a = Int32.Parse(TextBox1.Text)
        Dim b As Int32
        b = Int32.Parse(TextBox2.Text)
        Dim res As Int32 = a / b
        Label1.Text = res.ToString()
    Catch ex As Exception
        If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then
            ex.Data("ExtraInfo") = " You can't divide " & _
              TextBox1.Text & " by " & TextBox2.Text & "."
        End If
        Throw ex
    End Try

End Sub

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

Перейдите к представлению конструирования и выберите элемент управления ScriptManager.
В панели инструментов окна «Свойства» нажмите кнопку «События» и дважды щелкните поле AsyncPostBackError для создания обработчика данного события.

В обработчик событий AsyncPostBackError добавьте следующий код:

Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)
    If (e.Exception.Data("ExtraInfo") <> Nothing) Then
        ScriptManager1.AsyncPostBackErrorMessage = _
           e.Exception.Message & _
           e.Exception.Data("ExtraInfo").ToString()
    Else
        ScriptManager1.AsyncPostBackErrorMessage = _
           "An unspecified error occurred."
    End If
End Sub

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 установлено в строковое значение. В остальных случаях создается сообщение об ошибке по умолчанию.

Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.
В каждое поле введите любое число больше нуля и нажмите кнопку Calculate для демонстрации успешной обратной передачи.

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

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

Урок 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 runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Try
            Dim a As Int32
            a = Int32.Parse(TextBox1.Text)
            Dim b As Int32
            b = Int32.Parse(TextBox2.Text)
            Dim res As Int32 = a / b
            Label1.Text = res.ToString()
        Catch ex As Exception
            If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then
                ex.Data("ExtraInfo") = " You can't divide " & _
                  TextBox1.Text & " by " & TextBox2.Text & "."
            End If
            Throw ex
        End Try

    End Sub
    Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)
        If (e.Exception.Data("ExtraInfo") <> Nothing) Then
            ScriptManager1.AsyncPostBackErrorMessage = _
               e.Exception.Message & _
               e.Exception.Data("ExtraInfo").ToString()
        Else
            ScriptManager1.AsyncPostBackErrorMessage = _
               "An unspecified error occurred."
        End If
    End Sub
</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>

<%@ 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>, а не в окне сообщения веб-обозревателя.

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

На ранее созданной странице переключитесь в представление источника.
Добавьте на страницу следующую разметку:
```
    <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 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>.

Добавьте следующую разметку стиля в элемент <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>

<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>

Стили позволяют информации об ошибке выделяться на фоне остального содержимого страницы.

Переключитесь в представление конструирования и убедитесь, что страница выглядит следующим образом:
Из раскрывающегося списка в верхней части окна свойств выберите элемент DOCUMENT, соответствующий элементу страницы <body>, и задайте его свойству Id значение bodytag.
Перейдите в представление исходного кода.

Добавьте следующий блок <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>

<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, которая скрывает пользовательский интерфейс сообщения об ошибке.

Сохраните изменения и нажмите CTRL + F5 для просмотра страницы в обозревателе.
В каждое поле введите любое число больше нуля и нажмите кнопку Calculate для демонстрации успешной обратной передачи.

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

Вместо окна сообщения веб-обозревателя отображается пользовательский элемент AlertDiv. На следующем рисунке показан пример ошибочной ситуации.

Урок 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 runat="server">
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Try
            Dim a As Int32
            a = Int32.Parse(TextBox1.Text)
            Dim b As Int32
            b = Int32.Parse(TextBox2.Text)
            Dim res As Int32 = a / b
            Label1.Text = res.ToString()
        Catch ex As Exception
            If (TextBox1.Text.Length > 0 AndAlso TextBox2.Text.Length > 0) Then
                ex.Data("ExtraInfo") = " You can't divide " & _
                  TextBox1.Text & " by " & TextBox2.Text & "."
            End If
            Throw ex
        End Try

    End Sub
    Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)
        If (e.Exception.Data("ExtraInfo") <> Nothing) Then
            ScriptManager1.AsyncPostBackErrorMessage = _
               e.Exception.Message & _
               e.Exception.Data("ExtraInfo").ToString()
        Else
            ScriptManager1.AsyncPostBackErrorMessage = _
               "An unspecified error occurred."
        End If
    End Sub
</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>

<%@ 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.

См. также

Основные понятия

Работа с событиями класса PageRequestManager

Ссылки

Класс Sys.WebForms.PageRequestManager

Событие Sys.WebForms.PageRequestManager endRequest

Поделиться через