Traduction : Valens
Heure : 2007-06-11
Texte original : http://ajax.asp.net/docs/overview/AJAXClientEvents.aspx
Tout le monde est invité à faire des commentaires et j'apporterai activement des modifications !
Introduction [Introduction]
Microsoft Ajax propose des événements de cycle de vie côté client similaires aux événements de cycle de vie côté serveur des pages ASP.NET 2.0. Ces événements côté client nous permettent de personnaliser notre interface utilisateur pour les publications traditionnelles et les publications asynchrones (actualisations partielles de page). Ils peuvent également vous aider à gérer et à utiliser des scripts personnalisés tout au long du cycle de vie de la page.
Ces événements côté client sont proposés dans la classe AJAX Libray de Microsoft (on peut les retrouver dans la classe AJAX Libray). Ces classes sont automatiquement instanciées (instanciées ?) lors du chargement d'un contrôle serveur avec AJAX. Ces classes fournissent des API afin que nous puissions lier des événements aux gestionnaires de fournisseurs d'événements. Et la bibliothèque AJAX est indépendante du navigateur, le code que vous écrivez fonctionnera donc dans tous les navigateurs pris en charge.
Les événements clés sont l'événement de chargement de l'instance d'application qui initie la demande et la publication asynchrone. Lorsque le script est exécuté pendant l'événement du gestionnaire de chargement, tous les scripts et composants ont été chargés et sont disponibles. Lorsqu'une partie de la page est actualisée à l'aide du contrôle UpdatePanel, le plus critique de tous les événements client est la classe PageRequestManager. Ces événements côté client vous permettent d'implémenter certains scénarios. Exemples : annuler des publications, définir une priorité plus élevée pour une publication et améliorer l'interaction du UpdatePanel lors de l'actualisation.
Ces événements nous sont très utiles pour créer des pages ou écrire des composants. Si vous êtes un développeur Web, vous pouvez utiliser des scripts personnalisés pour charger et décharger les pages.
Pour en savoir plus sur les événements du cycle de vie côté serveur, vous pouvez vous référer à Présentation du cycle de vie des pages ASP.NET
[Client Classes]
dans la bibliothèque de classes Microsoft AJAX qui propose deux classes principales dans le cycle de vie client des pages Web AJAX. Classe d'application et classe PageRequestManager.
La classe Application est instanciée lorsque le navigateur demande une page contenant un contrôle ScriptManager. La classe Application est similaire au contrôle Page côté serveur. Elle hérite également de la classe Control, mais elle possède des fonctions supplémentaires (par rapport aux événements côté serveur). De même, Application hérite de la classe Sys.COmponent. De plus, elle fournit également de nombreux événements exploitables pendant le cycle de vie du client.
Si une page contient un ScriptManager et un ou plusieurs contrôles UpdatePanel, la page peut obtenir des effets de mise à jour partielle. Dans ce cas, une instance de la classe PageRequestManager est disponible pour le navigateur. Les événements client fournis par PageRequestManager concernent tous la publication asynchrone. Pour plus de détails sur la génération de pages partielles, veuillez vous référer à : Présentation du rendu de pages partielles
Ajout de gestionnaires pour les événements client [Ajouter un gestionnaire pour les événements client]
Ajoutez ou supprimez maintenant des événements à l'aide des méthodes add_eventname et reomve_eventname dans les classes Application et PageRequestManager. L'exemple suivant montre comment ajouter un gestionnaire nommé MyLoad à l'événement init de l'objet Application.
Sys.Application.add_init(MonInit);
fonction MyInit (expéditeur) {
}
Sys.Appplication.remove_init(MyInit);
Commentaire ; Cet exemple montre uniquement la syntaxe d'utilisation des méthodes add_eventname et remove_eventname. Plus de détails sur l’utilisation de cet événement sont fournis dans une rubrique ultérieure.
Gestion des événements de chargement et de déchargement de l'application [Événements de chargement et de déchargement de l'application d'opération]
Pour exploiter les événements de chargement et de déchargement de l'objet Application, il n'est pas nécessaire de se lier explicitement à un événement d'opération. Au lieu de cela, vous pouvez créer une fonction directement en utilisant les mots-clés réservés pageLoad et pageUnload. L'exemple suivant montre comment ajouter une action à l'événement de chargement de l'application.
fonction pageLoad (expéditeur, arguments) {
}
Événements pour d'autres classes client [Autres classes client]
Cette rubrique décrit uniquement les événements fournis par les classes Application et PageRequestManager. La bibliothèque de classes AJAX de Microsoft comprend également les classes suivantes pour ajouter, effacer et supprimer des événements d'éléments DOM. Ces classes incluent :
Il existe la méthode Sys.UI.DomEvent.addHandler ou le raccourci $addHandler.
Il existe la méthode Sys.UI.DomEvent.clearHandlers ou le raccourci $clearHandlers.
Il existe la méthode Sys.UI.DomEvent.removeHandler ou le raccourci $. RemoveHandler.
Les événements fournis par les principes DOM ne sont pas abordés dans cette rubrique.
Événements client des classes Application et PageRequestManager [Événements client des classes Application et PageRequestManager]
Le tableau suivant répertorie les événements client des classes Application et PageRequestManager que vous pouvez utiliser dans les pages AJAX ASP.NET. La séquence des événements sera discutée dans un sujet ultérieur.
Événement
(nom de l'événement)
Description
(décrire)
initÉvénement
[Événement d'initialisation]
Cet événement est déclenché une fois que tous les scripts ont été chargés et avant la création d'objets. Si vous envisagez d'écrire un composant (script), l'événement init fournit un point dans le cycle de vie pour ajouter le composant (script) à la page. Ce composant peut être appelé par d'autres scripts dans le cycle de vie. Si vous êtes un développeur Web, dans la plupart des cas, il est recommandé d'utiliser l'événement load au lieu de l'événement init.
L'événement init n'est créé qu'une seule fois lorsque la page commence à être générée. Les actualisations partielles de page ultérieures ne déclencheront pas l’événement init.
événement de chargement
[événement de chargement]
Cet événement est déclenché une fois que tous les scripts ont été chargés et après que tous les objets de programme initialisés avec $create ont été créés. Cet événement sera déclenché par toutes les publications sur le serveur, y compris les publications asynchrones.
Si vous êtes un développeur Web, vous pouvez créer une fonction appelée pageLoad, qui est fournie par l'événement de chargement lui-même. L'opération pageLoad (gestionnaire) peut être appelée après toute opération ajoutée à l'événement de chargement via la méthode add_load.
L'événement de chargement nécessite un objet Sys.ApplicationLoadEventArgs comme paramètre eventargs. Vous pouvez utiliser ce paramètre pour décider si la page doit afficher une actualisation partielle, et vous pouvez également décider quels composants doivent être créés après le déclenchement du dernier événement de chargement.
décharger l'événement
[Événement de désinstallation]
Déclenché avant que tous les objets ne soient libérés et avant que l'événement window.unload du navigateur ne se produise.
Vous pouvez gérer l'événement de déchargement via une fonction appelée pageUnload fournie par le système lui-même. L'événement pageUnload est appelé lorsque la page est déchargée dans le navigateur. Lors de cet événement, nous devrions libérer toutes les ressources occupées par le code.
Événement propertyChanged
[Événement de changement d'attribut]
Déclenché lorsque les propriétés d'un composant changent. L'objet application hérite de cet événement de la classe Component. Cet événement n'est déclenché que lorsque le développeur appelle la méthode Sys.Component.raisePropertyChange lors de la définition d'une valeur de propriété.
Voir Définition des propriétés des composants personnalisés et Déclenchement d'événements PropertyChanged pour plus d'informations.
Les événements de modification de propriété nécessitent un objet Sys.applicationLoadEventArgs comme paramètre eventargs.
Événement
[événement de sortie]
Cet événement est déclenché lorsque l'instance d'application est publiée. L'objet application hérite de cet événement de la classe Component.
Événement initializeRequest
[Événement de demande d'initialisation]
Cet événement se produit au début d'une requête asynchrone. Vous pouvez utiliser cet événement pour annuler une publication traditionnelle, par exemple pour permettre à une publication asynchrone d'avoir la priorité.
L'événement de demande d'initialisation nécessite un paramètre eventargs fourni par l'objet Sys.WebForms.InitializeRequestEventArgs. Cet objet fournit des éléments utiles d'objets qui provoquent des publications et des requêtes sous-jacentes. Cet événement expose également l'attribut Cancel. Si vous définissez Cancel sur true, une nouvelle publication sera annulée.
Événement startRequest
[Démarrer l'événement de demande]
Cet événement est déclenché avant le début d’une publication asynchrone sur le serveur. Si un processus de publication existe déjà, il sera arrêté (en utilisant la méthode abortPostBack). Vous pouvez utiliser cet événement pour définir des en-têtes de requête ou afficher une invite (animation) intéressante sur la page pour indiquer que la requête est en cours.
Cet événement nécessite un objet Sys.WebForms.BeginRequestEventArgs comme paramètre eventargs. Cet objet fournit des éléments utiles pour provoquer des publications et des objets de requête sous-jacents.
Événement pageLoading
[Événement de chargement de page]
Déclenché avant la mise à jour du contenu de la page lorsqu'une publication asynchrone a été reçue par le serveur. Vous pouvez utiliser cet événement pour fournir un effet de transition personnalisé pour le contenu qui doit être mis à jour.
Cet événement nécessite un objet Sys.WebForms.PageLoadingEventArgs comme paramètre eventargs. Cet objet fournit des informations utiles sur les panneaux qui seront supprimés et mis à jour à la suite de la publication asynchrone la plus récente.
Événement pageLoaded
[Événement de chargement de page terminé]
Déclenché après que tout le contenu de la page a été actualisé par un résultat de publication synchrone ou asynchrone. Lors d'une publication synchrone, les panneaux peuvent uniquement être créés, mais lors d'une publication asynchrone, les panneaux peuvent être créés et mis à jour. Vous pouvez utiliser cet événement pour gérer un effet de modification personnalisé pour le contenu qui doit être mis à jour.
Cet événement nécessite un objet Sys.WebForms.PageLoadedEventArgs comme paramètre eventargs. Cet objet fournit des informations utiles sur les panneaux qui ont été mis à jour et créés lors de la publication la plus récente.
Événement endRequest
[fin de l'événement de demande]
Déclenché après qu'une publication asynchrone a été effectuée en réponse et que la page a été mise à jour, ou après qu'une erreur s'est produite lors de la demande. Si une erreur se produit, la page ne sera pas mise à jour. Utilisez cet événement pour fournir un message d'erreur personnalisé aux visiteurs ou vous connecter au journal des erreurs.
Cet événement nécessite un objet Sys.WebForms.EndRequestEventArgs comme paramètre eventargs. Cet objet fournit des informations utiles sur l'erreur qui a été générée et si l'erreur a été gérée. Il fournit également des informations disponibles sur l'objet correspondant.
Exemple d'ordre d'événement [Exemple d'ordre d'événement]
L'exemple suivant montre comment les événements côté client seront déclenchés sur une page avec deux contrôles UpdatePanel imbriqués. Veuillez noter la différence entre cliquer sur le bouton dans le panneau parent et sur le bouton dans le panneau intégré. Le bouton dans le panneau parent entraînera la mise à jour du panneau parent et le panneau intégré dans celui-ci sera supprimé et recréé. Les boutons avec des panneaux intégrés entraînent uniquement des mises à jour du panneau intégré.
Code de la page :
1<%@ Langage de la page="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
5
6<script runat="serveur">
7
8</script>
9
10<html xmlns=" http://www.w3.org/1999/xhtml " >
11<head runat="serveur">
12 <title>Exemple d'événement client</title>
13 <style type="text/css">
14 #OuterPanel { largeur : 600 px ; hauteur : 200 px ; bordure : 2 px bleu uni } ;
15 #NestedPanel { largeur : 596 px ; hauteur : 60 px ; bordure : 2 px vert uni ;
16 marge gauche : 5 px ; marge droite : 5 px ; marge inférieure : 5 px ;}
17 </style>
18
19<corps>
20 <form id="form1" runat="serveur">
21 <div>
22 <asp:ScriptManager ID="ScriptManager1" runat="server">
23 <Scripts>
24 <asp:ScriptReference Path="ClientEventTest.js" />
25 </Scripts>
26 </asp:ScriptManager>
27 <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" runat="server">
28 <Modèle de contenu>
29 Les publications depuis l'intérieur du panneau extérieur et du panneau intérieur sont
30 publications asynchrones = Sys.WebForms.PageRequestManager APP = Sys.Application.
31
32 <br /><br />
33 <asp:Button ID="OPButton1" Text="Bouton du panneau extérieur" runat="server" />
34 Dernière mise à jour le
35 <%= DateTime.Now.ToString() %>
36 <br /><br />
37
38 <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" runat="server">
39 <Modèle de contenu>
40 <asp:Button ID="NPButton1" Text="Bouton du panneau imbriqué 1" runat="server" />
41 Dernière mise à jour le
42 <%= DateTime.Now.ToString() %>
43 <br />
44 </ContentTemplate>
45 </asp:UpdatePanel>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48
49 <input type="bouton" onclick="Effacer();" valeur="Effacer" />
50
51 <asp:Button ID="FullPostBack" runat="server" Text="Full Postback" />
52 <a href=" http://www.microsoft.com">Déchargement de la fenêtre de test </a>
53 <br />
54 <span id="ClientEvents"></span>
55 </div>
56 </form>
57
58</html>
59
code de script :
1// Connectez les gestionnaires d'événements d'application.
application 2var = Sys.Application ;
3app.add_load(ApplicationLoad);
4app.add_init(ApplicationInit);
5app.add_disposing(ApplicationDisposing);
6app.add_unload(ApplicationUnload);
7
8
9//Gestionnaires d'événements d'application pour les développeurs de composants.
10fonction ApplicationInit(expéditeur) {
11 var prm = Sys.WebForms.PageRequestManager.getInstance();
12 si (!prm.get_isInAsyncPostBack())
13 {
14 prm.add_initializeRequest(InitializeRequest);
15 prm.add_beginRequest(BeginRequest);
16 prm.add_pageLoading(PageLoading);
17 prm.add_pageLoaded(PageLoaded);
18 prm.add_endRequest(EndRequest);
19}
20 $get('ClientEvents').innerHTML += "APP:: Init de l'application. <br/>";
vingt-et-un}
22fonction ApplicationLoad(expéditeur, arguments) {
23 $get('ClientEvents').innerHTML += "APP:: Chargement de l'application. ";
24 $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
25}
26fonction ApplicationUnload(expéditeur) {
27 alert('APP::Déchargement d'application.');
28}
29fonction ApplicationDisposing(expéditeur) {
30 $get('ClientEvents').innerHTML += "APP : Application supprimée. <br/>";
31
32}
33//Gestionnaires d'événements d'application pour les développeurs de pages.
34fonction pageLoad() {
35 $get('ClientEvents').innerHTML += "PAGE:: Load.<br/>";
36}
37
38fonction pageUnload() {
39 alert('Page:: Déchargement de page.');
40}
41
42// Gestionnaires d'événements PageRequestManager.
43fonction InitializeRequest(expéditeur, arguments) {
44 $get('ClientEvents').innerHTML += "<hr/>";
45 $get('ClientEvents').innerHTML += "PRM : Initialisation de la requête asynchrone.<br/>";
46}
47fonction BeginRequest(expéditeur, arguments) {
48 $get('ClientEvents').innerHTML += "PRM : Commencer le traitement de la requête asynchrone.<br/>";
49}
50fonction PageLoading(expéditeur, arguments) {
51 $get('ClientEvents').innerHTML += "PRM : Chargement des résultats de la requête asynchrone.<br/>";
52 var updatePanels = printArray("PanelsUpdating", args.get_panelsUpdating());
53 var deletePanels = printArray("PanelsDeleting", args.get_panelsDeleting());
54
55 var message = "-->" + updatePanels + "<br/>-->" + deletePanels + "<br/>";
56
57 document.getElementById("ClientEvents").innerHTML += message;
58}
59fonction PageLoaded(expéditeur, arguments) {
60 $get('ClientEvents').innerHTML += "PRM : : Fin du chargement des résultats de la requête asynchrone.<br/>";
61 var updatePanels = printArray("PanelsUpdated", args.get_panelsUpdated());
62 var createPanels = printArray("PaneslCreated", args.get_panelsCreated());
63
64 var message = "-->" + updatePanels + "<br/>-->" + createPanels + "<br/>";
65
66 document.getElementById("ClientEvents").innerHTML += message ;
67}
68fonction EndRequest(expéditeur, arguments) {
69 $get('ClientEvents').innerHTML += "PRM: Fin de la requête asynchrone.<br/>";
70}
71
72// Fonctions d'assistance.
73fonctionEffacer()
74{
75 $get('ClientEvents').innerHTML = "";
76}
77fonction printArray(nom, arr)
78{
79 panneaux var = nom + '=' + arr.length;
80 si (longueur arr. > 0)
81 {
82 panneaux += "(";
83 pour (var i = 0; i < arr.length; i++)
84 {
85 panneaux += arr[i].id + ',';
86}
87 panneaux = panels.substring(0, panels.length - 1);
88 panneaux += ")" ;
89 }
90 panneaux de retour ;
91}
92
Effet d'exécution Afficher le code
Ordre des événements pour les scénarios courants [Ordre général des événements]
L'ordre de déclenchement des événements dépend toujours des contrôles utilisés dans la page et du type de requête qui se produit (demande d'initialisation, publication traditionnelle ou publication asynchrone). Cette section décrit la séquence de demande d'événement pour plusieurs scénarios courants.
Requête initiale [Demande d'initialisation]
Lors d'une requête d'initialisation de page, un petit nombre d'événements client sont déclenchés. Supposons que ce qui suit est le scénario de la demande d'initialisation.
· La page inclut un contrôle ScriptManager et les propriétés SupportsPartialRendering et EnablePartialRendering du contrôle sont toutes deux vraies.
· La requête est de type GET ;
· Le serveur peut répondre normalement.
Voici la séquence dans laquelle les événements se produisent côté client :
1. Une demande d'initialisation est adressée au serveur.
2. Le client reçoit la réponse.
3. L'instance Application déclenche l'événement init.
4. L'instance d'application déclenche l'événement de chargement.
L'événement d'initialisation ne se produit qu'une seule fois pendant tout le cycle de vie de la page lorsque l'application est instanciée. Il ne sera pas généré par les publications asynchrones ultérieures. Lors de la demande initiale (notez la demande), aucun événement PageRequestManager n'est déclenché.
Publication asynchrone [Publication asynchrone]
Une publication asynchrone envoie certaines données de page au serveur, reçoit une réponse côté serveur, puis actualise une partie de la page. Supposons le scénario de publication asynchrone suivant :
· La page inclut un contrôle ScriptManager et les propriétés SupportsPartialRendering et EnablePartialRendering du contrôle sont toutes deux vraies.
· Il existe un contrôle UpdatePanel sur la page et la valeur de la propriété ChildrenAsTriggers du contrôle est modifiée en true.
· Il y a un bouton à l'intérieur du UpdatePanel pour déclencher une publication asynchrone.
· Obtenez avec succès la réponse du côté serveur.
Voici la séquence dans laquelle les événements se produisent côté client :
1. Lorsque vous cliquez sur le bouton dans le contrôle UpdatePanel, une publication asynchrone est provoquée.
2. L'instance PageRequestManager a déclenché l'événement initializeRequest.
3. L'instance PageRequestManager a déclenché l'événement BeginRequest.
4. La requête est envoyée au serveur.
5. Le client reçoit la réponse.
6. L'instance PageRequestManager a déclenché l'événement pageLoading.
7. L'instance PageRequestManager a déclenché l'événement pageLoaded.
8. L'instance d'application a déclenché l'événement de chargement.
9. L'instance PageRequestManager a déclenché l'événement endRequest.
Veuillez noter que l'événement de chargement de l'application se situe après l'événement pageLoaded de PageRequestManager et avant l'événement endRequest.
Publications asynchrones multiples [Publications asynchrones multiples]
Lorsqu'une requête précédente est en cours d'exécution sur le serveur ou le navigateur et que l'utilisateur envoie une nouvelle requête, plusieurs publications asynchrones se produisent. Supposons que le scénario suivant décrit le cas de plusieurs publications asynchrones.
· La page inclut un contrôle ScriptManager et les propriétés SupportsPartialRendering et EnablePartialRendering du contrôle sont toutes deux vraies.
· La page contient un contrôle UpdatePanel.
· Dans UpdatePanel, un contrôle de bouton qui provoque une publication asynchrone est cliqué deux fois. Le deuxième clic se produit pendant que le serveur traite la requête initiée par le premier clic.
· Obtention de la réponse à la première requête renvoyée par le serveur.
Voici la séquence dans laquelle les événements se produisent côté client :
1. Cliquer sur le bouton dans UpdatePanel déclenche une publication asynchrone.
2. L'instance PageRequestManager a déclenché l'événement initializeRequest.
3. L'instance PageRequestManager a déclenché l'événement BeginRequest.
4. La requête est envoyée au serveur.
5. Le client reçoit la réponse.
6. Vous cliquez à nouveau sur le bouton, déclenchant une deuxième publication asynchrone.
7. L'instance PageRequestManager déclenche l'événement initializeRequest pour le deuxième clic.
8. L'instance PageRequestManager déclenche l'événement BeginRequest pour le deuxième clic.
9. La deuxième demande de clic de Northern Expedition a analysé le serveur.
10. Le client reçoit la réponse du deuxième clic.
11. L'instance PageRequestManager a déclenché l'événement pageLoading.
12. L'instance PageRequestManager a déclenché l'événement pageLoaded.
13. L'instance d'application a déclenché l'événement de chargement.
14. L'instance PageRequestManager a déclenché l'événement endRequest.
Le comportement de publication asynchrone par défaut est que la publication asynchrone la plus récente est prioritaire. Si deux publications asynchrones se produisent successivement et que la première publication asynchrone est toujours en cours de traitement par le navigateur, la première publication asynchrone est annulée. Si la première publication a été envoyée au serveur, le serveur ne renverra pas la première demande tant que la deuxième demande n'arrivera pas. Pour plus de détails sur la façon de définir la priorité de la publication asynchrone, veuillez vous référer à Donner la priorité à une publication asynchrone spécifique
Navigation hors d'une page [Parcourir d'autres pages]
Lorsque l'utilisateur accède à d'autres pages à partir d'une page, la page actuelle sera affichée à partir de celle-ci. le navigateur Unload, afin que vous puissiez utiliser l'événement unload pour libérer des ressources. Supposons que ce scénario soit simulé ci-dessous.
· La page inclut un contrôle ScriptManager et les propriétés SupportsPartialRendering et EnablePartialRendering du contrôle sont toutes deux vraies.
· La page cible existe.
Voici la séquence dans laquelle les événements se produisent côté client :
1. Lancez une demande pour une nouvelle page.
2. Le navigateur reçoit une réponse demandant une nouvelle page.
3. L'instance d'application déclenche l'événement de déchargement.
4. Une nouvelle page s'affiche.
Si une erreur se produit lors de la demande d'une nouvelle page, l'événement de déchargement sera toujours déclenché, mais la nouvelle page ne sera pas affichée.
【sur】