Condividi tramite

Personalizzazione della gestione degli errori per i controlli UpdatePanel ASP.NET

  • Articolo

Aggiornamento: novembre 2007

Quando si verifica un errore durante gli aggiornamenti a pagina parziale nei controlli UpdatePanel, il comportamento predefinito prevede la visualizzazione di una finestra di messaggio del browser con un messaggio di errore. In questa esercitazione viene illustrato come personalizzare il modo in cui l'errore viene presentato all'utente e come personalizzare il messaggio di errore.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso è necessario:

  • Microsoft Visual Studio 2005 o Microsoft Visual Web Developer Express Edition.

  • Sito Web ASP.NET con supporto AJAX.

Personalizzazione della gestione degli errori nel codice server

Per iniziare verrà personalizzata la gestione degli errori utilizzando il codice server nella pagina.

Per personalizzare la gestione degli errori nel codice server

  1. Creare una nuova pagina e passare alla visualizzazione Progettazione.

  2. Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sul controllo ScriptManager e sul controllo UpdatePanel per aggiungerli alla pagina.

  3. Aggiungere i controlli seguenti all'interno del controllo UpdatePanel:

  4. Fare doppio clic sul pulsante Calcola e aggiungere il codice riportato di seguito per il relativo gestore eventi:

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

    Il codice contiene un'istruzione try-catch. Nel blocco try il codice esegue una divisione con i valori immessi nelle caselle di testo. Se l'operazione non riesce, il codice nel blocco catch aggiunge le informazioni aggiuntive sulla stringa in ExtraInfo all'eccezione e quindi rigenera l'eccezione senza gestirla.

  5. Passare alla visualizzazione Progettazione e selezionare il controllo ScriptManager.

  6. Nella barra degli strumenti della finestra Proprietà fare clic sul pulsante Eventi, quindi fare doppio clic sulla casella AsyncPostBackError per creare un gestore per l'evento.

  7. Aggiungere il codice seguente al gestore eventi 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.";
    }
}

    Il codice verifica se l'elemento dati ExtraInfo è definito per l'eccezione. Se è definito, la proprietà AsyncPostBackErrorMessage viene impostata sul valore stringa. In caso contrario, viene creato un messaggio di errore predefinito.

  8. Salvare le modifiche e quindi premere CTRL+F5 per visualizzare la pagina in un browser.

  9. Aggiungere un numero maggiore di zero a ogni casella di testo, quindi fare clic sul pulsante Calcola per dimostrare un postback riuscito.

  10. Impostare il valore della seconda casella di testo su 0, quindi fare clic sul pulsante Calcola per creare una condizione di errore.

    Nel browser viene visualizzata una finestra di messaggio che contiene il messaggio impostato nel codice server.

    Nota:

    Lo stile della finestra di messaggio dipende dal browser utilizzato, mentre il messaggio è uguale in tutti i browser.

    		 
    <%@ 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)
        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 >
    <title>Partial-Page Update Error Handling Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" >
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1"  Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2"  Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" ></asp:Label><br />
                    <asp:Button ID="Button1"  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 >
    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 >
    <title>Partial-Page Update Error Handling Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" >
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1"  Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2"  Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" ></asp:Label><br />
                    <asp:Button ID="Button1"  OnClick="Button1_Click" Text="calculate" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Utilizzo di uno script client per personalizzare la gestione degli errori

Nella procedura precedente è stato illustrato come personalizzare gli errori durante il rendering a pagina parziale impostando le proprietà del controllo ScriptManager. Nella procedura descritta di seguito viene illustrata la personalizzazione utilizzando la classe client PageRequestManager per visualizzare il messaggio di errore in un elemento <div> anziché in una finestra di messaggio del browser.

Per personalizzare la gestione degli errori nello script client

  1. Nella pagina creata precedentemente passare alla visualizzazione Origine.

  2. Aggiungere alla pagina il seguente markup:

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

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

    Il markup include gli elementi che è possibile utilizzare per visualizzare gli errori del rendering a pagina parziale. Definisce l'elemento <div> denominato AlertDiv che contiene altri due elementi <div>. Uno degli elementi <div> nidificati contiene un controllo <input> che consente agli utenti di nascondere l'elemento <div>.

  3. Aggiungere nell'elemento <head> il seguente markup dello stile:

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

    Gli stili consentono di evidenziare visivamente le informazioni sull'errore rispetto al resto del contenuto della pagina.

  4. Passare alla visualizzazione Progettazione e verificare che la pagina sia analoga alla seguente:

  5. Nell'elenco a discesa nella parte superiore della finestra Proprietà selezionare l'elemento DOCUMENT, che rappresenta l'elemento <body> nella pagina, e impostare la relativa proprietà Id su bodytag.

  6. Passare alla visualizzazione Origine.

  7. Aggiungere il seguente blocco <script> in un punto qualsiasi dopo l'elemento <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>

    Questo script consente di effettuare le seguenti operazioni:

    • Definizione di un gestore per l'evento endRequest della classe PageRequestManager. Nel gestore il codice visualizza l'elemento <div>AlertDiv se si verifica una condizione di errore.

    • Definizione della funzione ToggleAlertDiv che nasconde o visualizza l'elemento AlertDiv e modifica il colore della pagina in base a una condizione di errore.

    • Definizione della funzione ClearErrorState che nasconde l'interfaccia utente del messaggio di errore.

  8. Salvare le modifiche e quindi premere CTRL+F5 per visualizzare la pagina in un browser.

  9. Aggiungere un numero maggiore di zero a ogni casella di testo, quindi fare clic sul pulsante Calcola per dimostrare un postback riuscito.

  10. Impostare il valore della seconda casella di testo su 0, quindi fare clic sul pulsante Calcola per dimostrare una condizione di errore.

    Viene visualizzato l'elemento AlertDiv personalizzato anziché la finestra di messaggio del browser. Nella figura seguente viene illustrato un esempio della condizione di errore.

    <%@ 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)
        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" >
    <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" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  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" >
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1"  Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2"  Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" ></asp:Label><br />
                    <asp:Button ID="Button1"  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"  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 >

    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" >
    <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" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  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" >
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1"  Width="39px"></asp:TextBox>
                    /
                    <asp:TextBox ID="TextBox2"  Width="39px"></asp:TextBox>
                    =
                    <asp:Label ID="Label1" ></asp:Label><br />
                    <asp:Button ID="Button1"  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"  onclick="ClearErrorState()" />
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Verifica

In questa esercitazione sono stati illustrati i modi in cui è possibile estendere la gestione degli errori durante il rendering a pagina parziale. Nel codice server è possibile personalizzare la gestione degli errori impostando la proprietà AsyncPostBackErrorMessage e gestendo l'evento AsyncPostBackError del controllo ScriptManager. Nel codice client è possibile personalizzare la gestione degli errori gestendo l'evento endRequest della classe PageRequestManager.

Vedere anche

Concetti

Utilizzo di eventi PageRequestManager

Riferimenti

Classe Sys.WebForms.PageRequestManager

Evento endRequest di Sys.WebForms.PageRequestManager