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

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

Ajout dynamique de composant Ajax

ASP.NET Ajax

Vue hybride

Discussions similaires

Partager

Partager