Ajout dynamique de composant Ajax

**Ecosmose** · 18/03/2010, 11h32

Bonjour à tous,

Je reviens depuis des années sur ce forum avec l'apprentissage d'un nouveau domaine pour moi qui est le monde du développement Web. Ma nouvelle activité est de travailler sur la technologie Ajax, et j'ai à charge de construire des composants Ajax réutilisables, c'est à dire isolés dans une bibliothèque indépendante de composants qui pourra être injecter dans plusieurs solutions.

Et voila que je découvre quelques problématiques propres au web, pardonnez donc mes quelques interrogations qui vous paraitront peut être un peu triviales.

Je souhaite ajouter dynamiquement dans une page un contenu qui peut inclure plusieurs ensembles de composants Ajax (CollapsibleExtender, Accordeon ou autres outils graphiques), des boutons (et donc les fonctions associées), des labels etc...

Ma démarche a donc été de créé un projet 'WebSite ASP.NEt' avec une page default.aspx. je crée un autre projet dans lequel se situera mes composants. Et là j'ai essayé plusieurs moyens en employant plusieurs types de composants sont des UserControls, des WebParts, des UpdatePanel, mais l'utilisation ou l'ajout dynamique reste synchrone, c'est à dire que la page se rafraichit à chaque fois que j'agis sur les boutons ou sur chauqe interaction des éléments du composant. Les évenements des composants AJAX ne sont pas capturés (en mode debug, je ne rentre pas dans les fonctions).

J'ai essayé l'ajout à des updatePanels contenus dans la page default.aspx en instanciant les controls dynamiquement. J'ai essayé l'ajout d'un updatepanel à la volée au scriptmanager.

Je vous laisse une solution VS 2008 pour illustrer mon problème.

**Ecosmose** · 18/03/2010, 11h37

Les sources VS 2008.

Elles consiste juste à expérimenter les ajouts dynamique en créeant les controls à la volée (ajout de Pane, des boutons, des panels, etc...) , et en settant la valeur des labels avec la date courante pour constater l'asynchonité (néologie ?) avec la page master.

**E.Bzz** · 18/03/2010, 11h51

Bonjour et bienvenue côté web, donc

Plusieurs remarques :

tu risques d'être confronté à des problématiques purement ASP.NEt, et donc de ne pas avoir toutes tes réponses (voire aucune) ici.
une confusion sur Ajax : qu'il soit synchrone (dernier paramètre du open() = "FALSE") ou asynchrone (dernier paramètre du open() = "TRUE"), un appel Ajax ne déclenche jamais (en soi) un rechargement de la page. En synchrone le script est bloqué jusqu'à réception de la réponse Ajax, alors qu'en asynchrone le script continue de se dérouler et c'est un "écouteur" (onreadystatechange) qui se charge de la réception de la réponse, pendant l'exécution du reste du code.
Il faudrait isoler et copier/coller ici une partie de ton code représentative du problème (peu d'entre nous ouvrent les .zip joints ). Par contre, je crains que ça soit du pur ASP.NET et donc de ne pouvoir t'aider

A+

**Ecosmose** · 18/03/2010, 13h47

Merci E.Bzz pour ta concision.

Sur tes bons conseils, je poste le code car je pense que sans celui, peu de gens vont me cmprendre : Let's talk Coding :

Code AJAX C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXComposant._Default" %>
 
<%@ Register Src="WebUserControlDependant.ascx" TagName="WebUserControlDependant"
    TagPrefix="uc1" %>
<%@ Register Src="WebUserControlAjax.ascx" TagName="WebUserControlAjax" TagPrefix="uc2" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="asm" runat="server" EnablePartialRendering="True" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <uc1:WebUserControlDependant ID="WebUserControlDependant1" runat="server" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
  <asp:Button ID="Button1" runat="server" OnClick="_dependantAccordeon_Click" 
        Text="Ajout dyn Pane Dependant" />

Code Behind de mon aspx

Code AJAX C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 protected void _dependantAccordeon_Click(object sender, EventArgs e)
        {
            //L'ajout dynamique se déroule correctement mais le composant est déjà embarqué dans le code design.
            this.WebUserControlDependant1.AddPane();
        }

Jusque là pas de problème , l'événement du click Button1 est bien déclenché et le contrôle AJAX qui est ajouté à l'updatePanel est bien mis à jour de manière asynchrone (sans PostBack).

**E.Bzz** · 18/03/2010, 13h57

OK.
Mais comme prévu, ce n'est pas moi qui pourrai t'aider (je pratique pas ASP.NET et jamais rien compris à ce fonctionnement runat="server"

).

Par contre, si tu es censé déclencher un appel Ajax mais que la page se recharge, es-tu sûr d'utiliser le bon élément pour ton appel Ajax ?
Par exemple, en HTML/Javascript "standard", un appel Ajax sur un input type="submit" serait une erreur de ce type (car la page sera de toutes façons rechargée, rendant inopérant l'appel Ajax).

A+

**Ecosmose** · 18/03/2010, 14h01

Voila ce qui ne fonctionne pas comme je le souhaiterais :

J'ajoute cette entrée sur la page aspx (et pas dans les updatePanel)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
    <asp:Button ID="_buttonajaxCollapsible" runat="server" OnClick="_ajaxCollapsible_Click"
        Text="AJAX Collapsible" />

Maintenant un composant issu de ma bibliothèque doit être instancié au moment où je clic sur le bouton _buttonajaxCollapsible , le composant s'ajoute bien sur la page, mais un clic sur un bouton de confirmation de ce composant le fait disparaitre.

Dans default.aspx.cs avec asm qui est le ScriptManager.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   protected void _ajaxCollapsible_Click(object sender, EventArgs e)
        {
            //Instanciation du composant de la bibliothèque.
            _AjaxCollapsible = new WebCustomControlAjaxCollapsiblePanel();
            this.Controls.Add(_AjaxCollapsible);
 
            //Création du Bouton de test de la page
            Button _pageButton = new Button();
            _pageButton.UseSubmitBehavior = false;
            _pageButton.ID = "lPanelButtonID";
            _pageButton.Text = "updatePanelPageButton";
            _pageButton.Click += new EventHandler(_pageButton_Click);
            //Ajout du bouton aux gestionnaires Ajax
this.UpdatePanel4.ContentTemplateContainer.Controls.Add(_pageButton);
            this.asm.RegisterAsyncPostBackControl(_pageButton);
 
            //Création du trigger de lancement
            AsyncPostBackTrigger _trigger = new AsyncPostBackTrigger();
            _trigger.ControlID = _pageButton.ID;
            this.UpdatePanel4.Triggers.Add(_trigger);
           //Ajout du composant de la bibliothèque aux gestionnaires AJAX. this.UpdatePanel4.ContentTemplateContainer.Controls.Add(_AjaxCollapsible);
           //Rafraichissement des ID.
            this.EnsureID();
           //abonne le bouton interne au gestionnaire Ajax
            _AjaxCollapsible.RegisterEvent(this.asm);
            this.UpdatePanel4.Triggers.Add(_AjaxCollapsible._trigButton);
            this.asm.RegisterAsyncPostBackControl(_AjaxCollapsible._confirmButton);
 
        }

La définition de mon composant , une simple classe hérité du composant Ajax CollapsiblePanel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
public class WebCustomControlAjaxCollapsiblePanel : CollapsiblePanelExtender
    {
        Label _hourLabel =new Label();
 
        public Button _confirmButton;
 
            public AsyncPostBackTrigger _trigButton;
 
        public WebCustomControlAjaxCollapsiblePanel()
        {
            //Création du Header du collapsible
            Panel lpanelHead = new Panel();
            lpanelHead.ID = "panelHeadAjaxCollapsible";
            lpanelHead.CssClass = "cpHeader";
 
            Label lLabelHead = new Label();
            lLabelHead.ID = "labelHeadAjaxCollapsible";
            lpanelHead.Controls.Add(lLabelHead);
 
            //Creation du Panel de contenu
            Panel lpanelBody = new Panel();
            lpanelBody.ID = "panelBody";
            lpanelBody.CssClass = "cpBody";
 
            Label lLabelBody = new Label();
            lLabelBody.ID = "labelBody";
            lLabelBody.Text = "Ecrivez un emplacement de fichier";
            lpanelBody.Controls.Add(lLabelBody);
 
            // ajout d'un label pour le suivi des actions AJAX
            _hourLabel.Text = DateTime.Now.TimeOfDay.ToString();
            lpanelBody.Controls.Add(_hourLabel);
 
//CREATION DU BOUTON DE CONFIRMATION QUI DEVRAIT LANCER L'ORDRE ASYNCHRONE, c'est ce bouton que je clicke et qui fait disparaitre le composant.
            _confirmButton = new Button();
            _confirmButton.UseSubmitBehavior = false;
            _confirmButton.Text = "Charger";
            _confirmButton.ID = "lconfirmButtonID";
            _confirmButton.Click += new EventHandler(lconfirmButton_Click);
            this.Controls.Add(_confirmButton);
            lpanelBody.Controls.Add(_confirmButton);
 
//Création du trigger pour l'updatepanel Hote.
            _trigButton = new AsyncPostBackTrigger();
            _trigButton.ControlID = _confirmButton.ID;
            _trigButton.EventName = "Click";
 
            this.Controls.Add(lpanelHead);
            this.Controls.Add(lpanelBody);
            // Initialisation du composant 
 
            this.ID = "WebCustomControlAjaxCollapsiblePanel";
            this.TargetControlID = lpanelBody.ID;
            this.ExpandControlID = lpanelHead.ID;
            this.CollapseControlID = lpanelHead.ID;
            this.ScrollContents = false;
            this.Collapsed = true;
            this.ExpandDirection =
            CollapsiblePanelExpandDirection.Vertical;
            this.SuppressPostBack = true;
            this.TextLabelID = lLabelHead.ID;
            this.CollapsedText = "Cliquer ici pour étendre..";
            this.ExpandedText = "Cliquer ici pour cacher..";
        }
 
        protected override void CreateChildControls()
        {
            this.ApplyStyleSheetSkin(this.Page);
            // Creation du Panel de titre
            base.CreateChildControls();
        }
 
        void lconfirmButton_Click(object sender, EventArgs e)
        {
            LoadPanel();
        }
 
        public void LoadPanel()
        {
            _hourLabel.Text = DateTime.Now.TimeOfDay.ToString();
        }
 
        public void RegisterEvent(ScriptManager lScriptManager)
        {
            lScriptManager.RegisterAsyncPostBackControl(_confirmButton);
        }

**Ecosmose** · 18/03/2010, 14h05

Envoyé par E.Bzz

OK.
Par contre, si tu es censé déclencher un appel Ajax mais que la page se recharge, es-tu sûr d'utiliser le bon élément pour ton appel Ajax ?

Oui en effet, j'ai bien noté cette particularité , comme j'ai posté mon message après je porte ton attention sur ce bout de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 _pageButton.UseSubmitBehavior = false;

qui désigne que le bouton n'envoie pas de demande de rafraichissement de la page tout entière. Or, c'est ce qu'il se passe, et c'est ce que je ne veux pas , j'aimerais juste que le composant Ajax soit rafraichit.

**E.Bzz** · 18/03/2010, 14h15

Envoyé par Ecosmose

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 _pageButton.UseSubmitBehavior = false;

qui désigne que le bouton n'envoie pas de demande de rafraichissement de la page tout entière. Or, c'est le cas.

Oui, j'avais vu ça.
Mais il est possible (

) que pour une raison ou une autre il ne soit pas pris en compte, ou qu'un autre évènement vienne "écraser" ce comportement, non ?

A+

**Nicolas Esprit** · 19/03/2010, 12h10

Bonjour Ecosmose,

Je pense que ton problème ne vient pas d'Ajax, mais d'une simple méconnaissance concernant l'ajout dynamique de contrôle ainsi que le cycle de vie d'une page ASP.NET et ses contrôles (ou on va dire imparfaite car il faut reconnaître que c'est un des sujets les plus emmer**ant à maîtriser sur ASP.NET).

En espérant t'avoir aidé.

**Ecosmose** · 19/03/2010, 16h06

Bonjour Nicolas,

Merci pour tes infos. En effet , c'était bien mon ignorance du fonctionnement du Web tout simplement (j'en ai presque honte d'ailleurs).

Je ne gérais pas la persistance de mes controls au niveau serveur, c'est à dire que mes controles existaient sur le client (puisqu'ils s'affichent) mais lors de mon click (du client) le controle n'existe plus sur le serveur , d'où un postback qui est l'action par défaut.

Merci encore à vous..

**Ecosmose** · 19/03/2010, 16h10

Il est vrai qu'en aillant parcouru de très nombreuses pages sur le sujet, le principal m'a échappé car les sujets débutent très souvent sur un point précis et poussé en considérant que le lecteur a déjà des connaissances .. D'où mon épisode raté ^^

Je profite un peu de ce post afin de connaitre les bonnes pratiques pour gérer la persistance. car cela va être mon prochain sujet d'apprentissage...

Faut il recréer tous les contrôles (et donc tous leurs sous contrôles) précédents ? Comment conserve t on le contexte courant de la persistance d'un client (exemple, le client a ajouté 3 controles AJAX en dynamique et à ajouté du texte ou une image, comment je recharge tout ca ? )... Y a t il des outils du Framework ?

Des liens , des tutos ?

**Nicolas Esprit** · 19/03/2010, 20h09

Ecosmose,

Pour les contrôles ajoutés dynamiquement, tu n'as pas trop le choix en fait => il faut les recréer.

Il te faut également faire attention à quel moment tu les re-créer afin que le ViewState persisté pour ceux-ci leur soit rattaché après la re-création (... si c'est assez clair).

Concernant les tutos, il faut faire une recherche google

**Ecosmose** · 22/03/2010, 10h11

Envoyé par Nicolas Esprit

Ecosmose,
Il te faut également faire attention à quel moment tu les re-créer afin que le ViewState persisté pour ceux-ci leur soit rattaché après la re-création (... si c'est assez clair).

Oui merci , c'est assez clair, c'est ce que j'avais compris lors mon illumination ! A priori il existe plusieurs façons de récupérer ce contexte (ViewState notamment) et en effet je commence à trouver mon bonheur sur le net

Merci Nicolas pour ton aide.

Ajout dynamique de composant Ajax

ASP.NET Ajax

Discussions similaires

Partager

Partager