Ajout dynamique de composant Ajax

Version imprimable

18/03/2010, 11h32
Ecosmose

Ajout dynamique de composant Ajax

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.
18/03/2010, 11h37
Ecosmose

1 pièce(s) jointe(s)

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.
18/03/2010, 11h51
E.Bzz
Bonjour et bienvenue côté web, donc :ccool:

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 :aie: ). Par contre, je crains que ça soit du pur ASP.NET et donc de ne pouvoir t'aider :calim2:
A+

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:

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:

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

18/03/2010, 13h57
E.Bzz

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" :aie: ).

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+

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:

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:

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:

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

18/03/2010, 14h05
Ecosmose

Citation:

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:

_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.
18/03/2010, 14h15
E.Bzz

Citation:

Envoyé par Ecosmose

Code:

_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+
19/03/2010, 12h10
Nicolas Esprit

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é.
19/03/2010, 16h06
Ecosmose

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..
19/03/2010, 16h10
Ecosmose

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 ?
19/03/2010, 20h09
Nicolas Esprit

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 :mrgreen:
22/03/2010, 10h11
Ecosmose

Citation:

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.