Share via

Personnalisation de la gestion des erreurs pour les contrôles UpdatePanel ASP.NET

  • Article

Mise à jour : novembre 2007

Lorsqu'une erreur se produit pendant des mises à jour de pages partielles dans les contrôles UpdatePanel, le comportement par défaut est l'affichage d'un message de navigateur contenant un message d'erreur. Ce didacticiel vous indique comment personnaliser la présentation de l'erreur à l'utilisateur et comment personnaliser le message d'erreur.

Composants requis

Pour implémenter les procédures dans votre propre environnement de développement, vous avez besoin des éléments suivants :

  • Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express

  • Un site Web ASP.NET AJAX

Personnalisation de la gestion des erreurs dans le code serveur

Pour commencer, vous allez personnaliser la gestion des erreurs à l'aide de code serveur dans la page.

Pour personnaliser la gestion des erreurs dans le code serveur

  1. Créez une nouvelle page et basculez en mode Design.

  2. Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le contrôle ScriptManager et le contrôle UpdatePanel pour les ajouter à la page.

  3. Ajoutez les contrôles suivants à l'intérieur du contrôle UpdatePanel :

    • deux contrôles TextBox ;

    • un contrôle Label ;

    • un contrôle Button. Affectez à sa propriété Text la valeur Calculer ;

    • du texte à l'intérieur du contrôle UpdatePanel.

  4. Double-cliquez sur le bouton Calculer et ajoutez le code suivant de son gestionnaire d'événements :

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

    Le code contient une instruction try-catch. Dans le bloc try, le code exécute la division des valeurs saisies dans les zones de texte. Si l'opération échoue, le code dans le bloc catch ajoute des informations de chaîne supplémentaires dans ExtraInfo de l'exception puis lève à nouveau l'exception sans la gérer.

  5. Basculez en mode Design et sélectionnez le contrôle ScriptManager.

  6. Dans la barre d'outils de la fenêtre Propriétés, cliquez sur le bouton Événements puis double-cliquez sur la zone AsyncPostBackError afin de créer un gestionnaire pour cet événement.

  7. Ajoutez le code suivant au gestionnaire d'événements 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.";
    }
}

    Le code contrôle si l'élément de données ExtraInfo est défini pour l'exception. Si c'est le cas, la propriété AsyncPostBackErrorMessage prend la valeur de la chaîne. Sinon, un message d'erreur par défaut est créé.

  8. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

  9. Ajoutez un nombre supérieur à zéro dans chaque zone de texte puis cliquez sur le bouton Calculer pour obtenir une publication (postback) réussie.

  10. Remplacez la seconde valeur de la zone de texte par 0, puis cliquez sur le bouton Calculer pour créer une condition d'erreur.

    Le navigateur affiche un message contenant le message défini dans le code serveur.

    Remarque :

    Le style du message dépend du navigateur que vous utilisez, mais le contenu du message est le même dans tous les navigateurs.

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

Utilisation de script client pour personnaliser la gestion des erreurs

La procédure précédente a montré comment personnaliser des erreurs lors d'un rendu de page partielle en définissant les propriétés du contrôle ScriptManager. La procédure suivante repose sur la personnalisation en utilisant la classe PageRequestManager cliente pour afficher le message d'erreur dans un élément <div> au lieu d'un message de navigateur.

Pour personnaliser la gestion des erreurs dans un script client

  1. Dans la page vous avez créé précédemment, basculez en mode Source.

  2. Ajoutez le balisage suivant à la page :

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

    Le balisage comprend des éléments que vous pouvez utiliser pour afficher des erreurs de rendu de page partielle. Il définit un élément <div> nommé AlertDiv qui contient deux autres éléments <div>. L'un des éléments <div> imbriqués contient un contrôle <input> qui permettra aux utilisateurs de masquer l'élément <div>.

  3. Ajoutez le balisage de style suivant dans l'élément <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>

    Les styles font ressortir visuellement les informations d'erreur par rapport au reste du contenu de la page.

  4. Basculez en mode Design et vérifiez que votre page ressemble à ceci :

  5. Dans la liste déroulante en haut de la fenêtre Propriétés, sélectionnez l'élément DOCUMENT (lequel représente l'élément <body> dans la page) et affectez à sa propriété Id la valeur bodytag.

  6. Basculez en mode Source.

  7. Ajoutez le bloc <script> suivant n'importe où après l'élément <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>

    Ce script effectue les actions suivantes.

    • Définit un gestionnaire pour l'événement endRequest de la classe PageRequestManager. Dans le gestionnaire, le code affiche l'élément AlertDiv si<div> en cas de condition d'erreur.

    • Définit la fonction ToggleAlertDiv, qui masque ou affiche l'élément AlertDiv et modifie la couleur de la page selon la condition d'erreur.

    • Définit la fonction ClearErrorState qui masque l'interface utilisateur du message d'erreur.

  8. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

  9. Ajoutez un nombre supérieur à zéro dans chaque zone de texte puis cliquez sur le bouton Calculer pour obtenir une publication (postback) réussie.

  10. Remplacez la seconde valeur de la zone de texte par 0, puis cliquez sur le bouton Calculer pour illustrer une condition d'erreur.

    L'élément AlertDiv personnalisé s'affiche à la place du message de navigateur. L'illustration suivante montre un exemple de condition d'erreur.

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

Récapitulatif

Ce didacticiel vous a montré différentes façon d'étendre la gestion des erreurs pendant le rendu de page partielle. Dans le code serveur vous pouvez personnaliser la gestion des erreurs en définissant la propriété AsyncPostBackErrorMessage et en gérant l'événement AsyncPostBackError du contrôle ScriptManager. Dans le code client, vous pouvez personnaliser la gestion d'erreur en gérant l'événement endRequest de la classe PageRequestManager.

Voir aussi

Concepts

Utilisation d'événements PageRequestManager

Référence

Sys.WebForms.PageRequestManager, classe

endRequest, événement de Sys.WebForms.PageRequestManager