Programmation de contrôles UpdateProgress dans un script client

Article
10/22/2014

Mise à jour : novembre 2007

Dans ce didacticiel vous étendrez le contrôle UpdateProgress avec un comportement client en écrivant un code ECMAScript (JavaScript). Votre code utilisera la classe PageRequestManager qui fait partie de Microsoft AJAX Library. Dans le contrôle UpdateProgress, vous ajouterez un bouton qui permet aux utilisateurs d'annuler une publication (postback) asynchrone. Dans le cadre de cette tâche, vous afficherez ou masquerez le message de progression à l'aide d'un script client.

Cette rubrique suppose que vous êtes familiarisé avec le contrôle UpdateProgress. Si ce n'est pas le cas, consultez la rubrique Introduction au contrôle UpdateProgress.

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 Visual Web Developer Express
Un site Web ASP.NET AJAX

Pour annuler une publication asynchrone dans le script client

Créez une page Web ASP.NET et basculez en mode Design.
Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur les contrôles ScriptManager, UpdatePanel et UpdateProgress pour ajouter une instance de chacun d'eux à la page.
Depuis l'onglet Standard de la boîte à outils, ajoutez un contrôle Label au contrôle UpdatePanel et définissez la propriété Text de l'étiquette sur Panneau rendu.
Ajoutez un contrôle Button au contrôle UpdatePanel et affectez la valeur Actualiser à sa propriété Text.
Dans le contrôle UpdateProgress, ajoutez le texte Traitement en cours….
Depuis l'onglet HTML de la boîte à outils, ajoutez un contrôle HtmlButton au contrôle UpdateProgress et définissez son attribut Value à Annuler.
Double-cliquez sur le bouton Actualiser pour ajouter un gestionnaire d'événements pour son événement Click.

Ajoutez le code suivant au gestionnaire Click, ce code ajoute un délai artificiel de trois secondes puis affecte l'heure courante du serveur à l'étiquette.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString();
}

Remarque :
Le gestionnaire de l'événement Click introduit volontairement un délai pour ce didacticiel. Dans la pratique, vous n'introduiriez pas de délai. Au lieu de cela, le délai aurait pour cause le trafic sur le serveur ou le temps de traitement d'un code serveur plus long que d'habitude, pour une requête de base de données par exemple.

Sous l'élément <asp:ScriptManager>, ajoutez le script suivant :

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

Le script obtient l'instance actuelle de la classe PageRequestManager. Il crée alors une fonction qui appelle la méthode abortPostBack pour arrêter une publication asynchrone.

Affectez la valeur CancelAsyncPostBack à l'attribut onclick du contrôle HtmlButton, le nom du gestionnaire que vous avez créé lors de l'étape précédente.

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

Ajoutez le bloc de style suivant à l'élément <head> :

<style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

<style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

Les paramètres de style font s'afficher le contrôle UpdateProgress dans le coin inférieur gauche de la fenêtre du navigateur.

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

Le message de progression s'affiche après un délai court. Laissez la mise à jour de page partielle se terminer afin que le message indiqué dans le contrôle UpdatePanel soit modifié pour afficher l'heure.

Remarque :

Vous pouvez configurer le délai en modifiant la propriété DisplayAfter. La valeur par défaut est 500 millisecondes.

Remarque :
Vous pouvez configurer le délai en modifiant la propriété DisplayAfter. La valeur par défaut est 500 millisecondes.

Cliquez à nouveau sur Actualiser puis cliquez immédiatement sur Annuler pour arrêter la mise à jour de page partielle.

Remarquez que l'heure dans UpdatePanel n'est pas actualisée.

<%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Affichage de la progression de mise à jour à l'aide d'un script client

Dans les scénarios suivants, le contrôle UpdateProgress ne s'affichera pas automatiquement.

Le contrôle UpdateProgress est associé à un panneau de mise à jour spécifique mais la publication asynchrone résulte d'un contrôle qui n'est pas à l'intérieur de ce panneau de mise à jour.
Le contrôle UpdateProgress n'est pas associé à un contrôle UpdatePanel et la publication asynchrone ne résulte pas d'un contrôle qui n'est pas à l'intérieur du contrôle UpdatePanel et n'est pas un déclencheur. Par exemple, la mise à jour est effectuée dans du code.

La procédure suivante indique comment afficher un contrôle UpdateProgress lorsque la publication asynchrone ne provient pas du contrôle UpdatePanel associé. Cette procédure suppose que vous ayez complété la première partie de ce didacticiel.

Pour afficher un contrôle UpdateProgress par programme

Dans la page vous avez créé précédemment, basculez en mode Design.
Sélectionnez le contrôle UpdateProgress et, dans la fenêtre Propriétés, affectez UpdatePanel1 à la propriété AssociatedUpdatePanelID.
Ajoutez un contrôle Button n'importe où, en dehors des contrôles UpdatePanel et UpdateProgress.
Affectez la valeur Déclencher à la propriété Text du bouton et son ID à Panel1Trigger.
Sélectionnez le contrôle UpdatePanel et, dans la fenêtre Propriétés, cliquez sur le bouton de sélection (…) pour la propriété Triggers.

La boîte de dialogue Éditeur de collections UpdatePanelTrigger s'affiche.
Créez un objet AsyncPostBackTrigger et affectez la valeur Panel1Trigger à sa propriété ControlID.
Cliquez sur OK pour fermer l'éditeur de collections.
Double-cliquez sur le bouton Déclencher pour ajouter un gestionnaire d'événements pour son événement Click.

Ajoutez le code suivant au gestionnaire Click, ce code ajoute un délai artificiel de trois secondes. Il affiche alors l'heure du serveur et un message indiquant que la publication a été provoquée par un déclencheur.

Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

En mode Source, ajoutez le script client suivant sous le bloc <script> existant déjà dans la page.

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

Le script effectue les actions ci-après.

Il définit un gestionnaire pour l'événement initializeRequest de la classe PageRequestManager. Le code du gestionnaire annule toutes publications asynchrones déjà en cours. Sinon, si la publication provient de l'élément <div>Panel1Trigger, le code affiche le modèle UpdateProgress.
Il définit un gestionnaire pour l'événement endRequest de la classe PageRequestManager. Si la publication provient de l'élément Panel1Trigger<div>, le code du gestionnaire masque le contrôle de progression.

L'exemple suivant montre le bloc de script complet.

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans un navigateur.
Cliquez sur le bouton Actualiser.

Le message de progression s'affiche après un délai court. Laissez la mise à jour de page partielle se terminer afin que le message indiqué dans le contrôle UpdatePanel affiche l'heure.

Cliquez sur le bouton Déclencher.

Remarquez que le message de progression est affiché.

<%@ 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)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        var postBackElement;
        function InitializeRequest(sender, args) {
            if (prm.get_isInAsyncPostBack()) {
                args.set_cancel(true);
            }
            postBackElement = args.get_postBackElement();
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

    </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)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        var postBackElement;
        function InitializeRequest(sender, args) {
            if (prm.get_isInAsyncPostBack()) {
                args.set_cancel(true);
            }
            postBackElement = args.get_postBackElement();
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

Récapitulatif

Ce didacticiel vous a montré les manières d'étendre le comportement du contrôle UpdateProgress en écrivant du code JavaScript. Vous pouvez utiliser événements et les méthodes de la classe PageRequestManager pour annuler une publication asynchrone et afficher et masquer un contrôle UpdateProgress par programme.

Partager via

Programmation de contrôles UpdateProgress dans un script client

Composants requis

Pour annuler une publication asynchrone dans le script client

Affichage de la progression de mise à jour à l'aide d'un script client

Pour afficher un contrôle UpdateProgress par programme

Récapitulatif

Voir aussi

Concepts

Référence

Ressources supplémentaires