Partager via

Procédure pas à pas : animation des contrôles UpdatePanel ASP.NET

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas décrit comment animer un contrôle UpdatePanel qui a été mis à jour à la suite d'une publication (postback) asynchrone.

Microsoft AJAX Library vous permet de gérer des événements durant le cycle de vie de la page client. Pour cela, il faut gérer les événements de la classe cliente PageRequestManager. Dans cette procédure pas à pas, vous verrez comment utiliser les événements beginRequest et pageLoaded pour animer un contrôle UpdatePanel lorsqu'un contrôle de la page provoque une publication asynchrone. L'événement beginRequest est déclenché avant qu'une publication asynchrone ne démarre et avant que la publication ne soit envoyée au serveur. L'événement pageLoaded est déclenché pendant les publications et les publications asynchrones. Lors de cet événement, vous pouvez accéder à des informations sur les panneaux créés et mis à jour à la suite de la dernière publication. (Pour les publications, seuls des panneaux sont créés, mais pour les publications asynchrones, les panneaux peuvent être à la fois créés et mis à jour.)

Composants requis

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

  • Visual Studio 2008 ou Visual Web Developer 2008 Express

  • Un site Web ASP.NET AJAX

Création d'un script client qui anime un contrôle UpdatePanel

Dans cette procédure vous créerez un fichier ECMAScript (JavaScript ou JScript) qui définit une classe d'animation. La classe contient une méthode qui anime un élément DOM HTML. Dans le navigateur, le contrôle UpdatePanel que vous souhaitez animer est représenté comme un élément div.

Pour créer un script client qui anime un contrôle UpdatePanel

  1. Dans le site Web ASP.NET AJAX, ajoutez un fichier JScript et nommez-le UpdatePanelAnimation.js.

  2. Ajoutez le code JavaScript suivant au fichier :

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Le code exécute les tâches suivantes :

    • Enregistre l'espace de noms ScriptLibrary en appelant la méthode registerNamespace.

    • Utilise le modèle de design prototype pour définir la classe BorderAnimation dans l'espace de noms ScriptLibrary. Une méthode nommée animatePanel de la classe BorderAnimation définit la logique d'animation.

    • Enregistre la classe BorderAnimation en appelant la méthode registerClass.

    • Crée une instance de la classe BorderAnimation. Le code passe trois valeurs au constructeur de classe : une couleur d'animation, une couleur par défaut et le nombre de millisecondes pour afficher la couleur d'animation.

    • Définit un gestionnaire pour l'événement load de la classe Sys.Application. Cette classe définit ensuite des gestionnaires pour les événements beginRequest et pageLoaded de la classe PageRequestManager.

    • Dans le gestionnaire d'événements beginRequest, le code enregistre le nom de l'élément qui a provoqué la publication.

    • Si l'ID de l'élément publication contient le mot « animate », le code exécute l'animation dans le gestionnaire d'événements pageLoaded.

Utilisation du Script client avec un contrôle UpdatePanel

Dans cette procédure vous utiliserez le script d'animation dans une page contenant un contrôle UpdatePanel. Le script anime le panneau lorsque son contenu est actualisé.

Pour animer un contrôle UpdatePanel

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

  2. Si la page ne contient pas déjà de contrôle ScriptManager, ajoutez-en un en le faisant glisser depuis l'onglet Extensions AJAX de la boîte à outils.

  3. Dans la Boîte à outils, double-cliquez sur le contrôle UpdatePanel pour ajouter un contrôle UpdatePanel à la page.

  4. Cliquez à l'intérieur du contrôle UpdatePanel puis sous l'onglet Standard de la boîte à outils, double-cliquez sur le contrôle Button deux fois pour ajouter deux boutons au contrôle UpdatePanel.

  5. Affectez Actualiser avec animation à la propriété Text du premier bouton et AnimateButton1 à son ID.

  6. Affectez Actualiser sans animation à la propriété Text du second bouton. Laissez son ID à la valeur par défaut Button2.

  7. Basculez en mode Source et ajoutez les règles de style suivantes dans un bloc style dans l'élément head de la page.

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    Les règles de style définissent la hauteur, la largeur et la bordure de l'élément div restitué pour le contrôle UpdatePanel.

  8. Ajoutez le code suivant dans l'élément ContentTemplate de l'élément asp:UpdatePanel :

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

    Le code affiche l'heure de la dernière restitution de la balise.

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

  10. Dans la fenêtre Propriétés, sélectionnez la propriété Scripts et cliquez sur le bouton de sélection (…) pour afficher la boîte de dialogue Éditeur de collections ScriptReference.

  11. Cliquez sur Ajouter pour ajouter une référence de script.

  12. Affectez la valeur UpdatePanelAnimation.js à la propriété Path de la référence de script, c'est le fichier JavaScript que vous avez créé précédemment.

    Vous ajoutez une référence de script à l'aide de la collection Scripts de ScriptManager pour vous assurer que le script est chargé après le chargement du code de Microsoft AJAX Library.

  13. Cliquez sur OK pour fermer la boîte de dialogue Éditeur de collections ScriptReference.

  14. Enregistrez les modifications, puis appuyez sur CTRL+F5 pour afficher la page dans un navigateur.

  15. Cliquez sur le bouton Actualiser pour actualiser le panneau.

    Notez que la bordure du panneau change brièvement de couleur.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

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

Récapitulatif

Cette procédure pas à pas vous a montré comment appliquer une animation simple sur un contrôle UpdatePanel lorsque le contenu du panneau est actualisé. Le code contenu dans un fichier JavaScript anime l'élément HTML div restitué par le contrôle UpdatePanel. Le fichier JavaScript est ajouté à la collection Scripts du contrôle ScriptManager. La logique principale du fichier de script est définie dans les gestionnaires des événements beginRequest et pageLoaded de la classe PageRequestManager.

Voir aussi

Concepts

Utilisation d'événements PageRequestManager

Référence

Sys.WebForms.PageRequestManager, classe

Sys.WebForms.PageLoadedEventArgs, classe