Création dynamique d'un gestionnaire d'évènement pour appel asynchrone Ajax

Version imprimable

Tout d'abord bonjour à tous !
Après plusieurs jours de recherches infructueuses je m'en vais vous demandez votre aide...

Je développe un module pour l'intranet de ma société qui utilise des appels asynchrones grâce à ajax.
Je génère dans ce module des formulaires de manières dynamique ainsi que des boutons et les gestionnaires d'évènements qui vont avec.
Mon problème est situé exactement en ce moment... un peu de code :
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 foreach(DataRow RowZ in _DT_FDRL) { //++ pour l'incrément i++; //Création de la nouvelle ligne avec ses cellules TableRow NewRow = new TableRow(); TableCell cell_Numero = new TableCell(); TableCell cell_NCB = new TableCell(); TableCell cell_TypeLigne = new TableCell(); TableCell cell_NumFeuilleReparation = new TableCell(); TableCell cell_Vide = new TableCell(); // Deux imageButton //Création et param des ImgesButton dynamiques ImageButton Modif = new ImageButton(); Modif.ID = "ModifLine" + i; Modif.Click += new ImageClickEventHandler(ModifLine); //(this.ModifLine, (EventArgs)RowZ["Id"].ToString()) UpdatePanel1.ContentTemplateContainer.Controls.Add(Modif); AsyncPostBackTrigger _APBT = new AsyncPostBackTrigger(); _APBT.ControlID = Modif.ID; _APBT.EventName = "Click"; UpdatePanel1.Triggers.Add(_APBT);
Le contexte, le morceau de code ci-dessus se trouve dans une fonction qui génère dynamiquement des lignes de tableaux avec en bout de ligne des boutons permettant de modifier ou supprimer la ou les lignes. Merdant déjà sur le premier bouton je n'ai pas encore créer le deuxième, ne le cherchez donc pas dans le code...

Ce code compile mais en mettant un point d'arrêt sur la fonction ModifLine(), jamais je n'y passe j'en déduit donc que ca ne fonctionne pas ...
Ma méthode de déclaration d'évènement vous semble-elle correcte ?
Est-il possible dans la déclaration de l'évènement d'insérer des arguments pour la fonction appelée ( la ligne est commentée dans le code ci-dessus )

Merci déjà de votre aide ! Je m'en vais continuer à chercher ...

12/02/2010, 21h40
gdkenny

La déclaration est bonne, et non, tu ne peux pas passer des arguments comme ça!

déjà, essaie de faire marcher l'abonnement à ton évènement.
Es-tu bien sur que le gestionnaire est accroché à chaque postback?
Si oui, a quel moment du cycle de vie de la page affectes tu les gestionnaires?
16/02/2010, 17h06
bor1s

Salut, merci de ta réponse mais j'ai abandonné cette méthode qui n'ai en fait pas compatible avec une page Full ajax. (sans postBack)
Pour feinter j'ai utilisé les CallbackEventHandler, qui finalement fonctionne plutôt pas mal, un peu chiant à mettre en oeuvre mais efficace.

Par contre un truc me dépasse encore... je peux modifier le contenu des mes cellules sans postBack et pourtant tout le contenu créer dynamiquement disparait après le OnClick.... ce que je ne voulais justement po ...
Si vous avez une ptite idée... peut-etre un problème connu...

En tout cas merci !

Je poste quelques précisions sur problème, donc je précise que mon souhait est d'avoir une page entièrement gérer par des appels asynchrones.

Je créer donc au fur et à mesure du cycle de vie de ma page du contenu et des controls mais le gestionnaire d'évenement n'arrive pas à attraper les events des boutons créer dynamiquement.

Comme je n'ai pas trouver de solution pour reconstruire l'arbre des controles coté serveur et j'ai décider d'utiliser des scripts clients référencer coté serveur via "ICallbackEventHandler".

Ainsi je peux mettre à jour des données coté serveur sans "normalement" provoquer des postback.

Un peu de code :
Dans pageLoad je référence le script client :

Code:

1
2
3
4
5
6
7
8
 protected void Page_Load(object sender, EventArgs e)
    {
 
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");        
        String callbackScript;
        callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + ";}";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
    }

Ceci est la fonction appelé par mon script client :

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
    public void RaiseCallbackEvent(String eventArgument)
    {
        string value = "";
        string IdLigneFeuilleRetour = "";
        string valeurAmodif = "";
        int premier_sep, deuxieme_sep, troisieme_sep = 0;        
 
        if (eventArgument == null)
        {
            returnValue = "-1";
        }
        else
        {
            //Traitement des rappels clients
            //j'établi la valeur d'index des separateurs
            premier_sep = eventArgument.IndexOf("&", 0, eventArgument.Length);
            deuxieme_sep = eventArgument.IndexOf("_", 0, eventArgument.Length);
            troisieme_sep = eventArgument.IndexOf("_", deuxieme_sep+1);
            //Décompose l'arg pour connaitre la valeur a mettre à jour
            value = eventArgument.Substring(0, premier_sep);
            IdLigneFeuilleRetour = eventArgument.Substring(deuxieme_sep + 1, (troisieme_sep - deuxieme_sep)-1);
            valeurAmodif = eventArgument.Substring(troisieme_sep + 1, 1);
            //Modif des lignes retours
            //Préparation du tableAdapteur pour update de ligne
            Gestion2005.Dal.DsFeuillesRetourTableAdapters.FeuillesRetourLignesTableAdapter _FRTTA = new Gestion2005.Dal.DsFeuillesRetourTableAdapters.FeuillesRetourLignesTableAdapter();
            //Je défini quelle valeur doit-être mis à jour
            switch (valeurAmodif)
            {
                case "1":
                    _FRTTA.UpdateNUMERO(value, Convert.ToInt32(IdLigneFeuilleRetour));
                    break;
                case "2":
                    _FRTTA.UpdateNoCodeBarre(value, Convert.ToInt32(IdLigneFeuilleRetour));
                    break;
                case "3":
                    _FRTTA.UpdateTypeRetourLigne(value, Convert.ToInt32(IdLigneFeuilleRetour));
                    break;
                case "4":
                    _FRTTA.UpdateCodeFeuilleReparation(value, Convert.ToInt32(IdLigneFeuilleRetour));
                    break;
            }
        }
    }

Et celle qui peut éventuellement renvoyer des données :

Code:

1
2
3
4
5
 
    public String GetCallbackResult()
    {
        return returnValue;
    }

Coté aspx j'ai le bloc JS qui chapotte la modif des lignes de mon tableau

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
 
    <script type="text/ecmascript">
    function ModifyLine(idligne)
    {        
        //Création du input pour saisie de modif    
        var input_modify = document.createElement("input"); 
        //Récupère le contenu avant modif
        var valueOfCell = document.getElementById(idligne.id).innerHTML;
        //Vide la cell du text
        document.getElementById(idligne.id).innerHTML= "";
        //On renseigne l'input 
        input_modify.setAttribute("Value",valueOfCell , "false");
        input_modify.setAttribute("Id",idligne.id + "_Valid" , "false");
        input_modify.setAttribute("Style","width:50px; vertical-align:Middle" , "false");
        //On le place dans la cell
        document.getElementById(idligne.id).appendChild(input_modify);
        //On créer le bouton de validation
        var input_modify_valid = document.createElement("input")
        input_modify_valid.setAttribute("Type", "Image" , "false");
        input_modify_valid.setAttribute("Src", "../Images/Valid.GIF" , "false");
        input_modify_valid.setAttribute("OnClick", "ApplyModifyLine(document.getElementById('" +idligne.id + "_Valid'))" , "false");
        //On le place dans la cell
        document.getElementById(idligne.id).appendChild(input_modify_valid);
    }
 
     function ApplyModifyLine(idinputmodify)
    {        
        var argCallServ = document.getElementById(idinputmodify.id).value + "&" +idinputmodify.id;
        CallServer(argCallServ, "");
    }
 
    function ReceiveServerData(rValue)
    {   
 
    }
 
  </script>
//un peu plus bas le tableau
  <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
   <ContentTemplate>
    <asp:Table runat=server id="dynamical_content_table"style="width:800px"> 
    </asp:Table>               
    <table id="dynamicalcontenttable" style="width:800px" runat=server></table>
   </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="NewLine" />
      </Triggers>
      </asp:UpdatePanel>

Le fonctionnement maintenant, mon désir est de pouvoir modifier le contenu des cellules de mon tableau, en doubleClickant dessus un textbox avec la valeur d'origine de la cellule apparait ainsi qu'un input type image me permettant de valider la saisie. C'est lors du clic sur ce bouton que j'effectue un update de ma base de donnée ( sa fonctionne super) mais le clic sur ce bouton me fait perdre tout le contenu générer de manière dynamique.

Alors question, est-ce qu'un bouton HTML génère un PostBack ?
Comment éviter de perdre le contenu créer dynamiquement ?

Vla ... chuz

17/02/2010, 10h09
bor1s

Bon Pb résolu, les HTML input type="image" me posais problème, remplacer par un simple button qui lui ne me fais pas perdre le contenu généré dynamiquement.vla