Discussion :

[jarboo]

Bonjour,

je développe un site ASP .NET avec utilisation d'AJAX (via la bibliothèque de Microsoft) et d'une master page.

J'utilise un UpdatePanel qui englobe plusieurs ContentPlaceHolders.

Dans une page de contenu, un des <asp:Content> contient 2 <asp:ListBox> qui sont remplies dans le Page_Init grâce à un Bind sur la base de données.
Jusque là tout marche bien.

Les deux listes doivent interagir entre elles : celle de gauche liste tous les éléments dispos, celle de droite liste les éléments sélectionnés (elle est donc vide la première fois).

A chaque fois qu'un élément est selectionné (et validé via un bouton) dans la liste de gauche, il doit être inséré dans celle de droite et enlevé de celle de gauche.

La solution la plus simple serait de faire un appel serveur à chaque ajout d'élément : INSERT en base + rafraîchissement du UpdatePanel qui listerait donc les nouveaux contenus des 2 listes. Seulement cette solution génère beaucoup de trafic serveur et pourrait être un peu lente côté client si une personne veut sélectionner beaucoup d'éléments, j'ai donc voulu essayer une autre solution : gérer toutes les interactions entre les listes côté client (en JavaScript) puis valider une fois pour toutes les modifications et les enregistrer en base (DELETE de tous les anciens éléments sélectionnés et INSERT de chaque élément contenus dans la liste de droite).

Toutes les modifications côté client en Javascript fonctionnent bien mais lorsque je fais mon appel serveur, ma ListBox est désespérément vide, même si des éléments ont été ajoutés en javascript.
Pour info, voici le code des fonctions d'ajout et de retrait d'éléments dans une liste :

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
 
//ajoute l'élément 'item' à la fin de la liste 'list'
        function ListAdd(list,item)
        {
            var option = new Option(item.text,item.value);
            list.options[list.length] = option;   
        }
 
        //supprime l'élément 'item' de la liste 'list'
        function ListRemove(list,item)
        {
            var original_length = list.length;
 
            for( i=list.length-1; i>=0; i--) 
            {	
                if(list.options[i].text == item.text) 
                {            
                    for(j=i;j<list.length-1;j++) 
                    {
                        list.options[j].text=list.options[j+1].text;
                    }
                    //si on a enlevé le dernier élément, il faut sélectionner le précédent
                    //(comportement par défaut : sélectionne l'élément suivant)
                    if( (i == original_length - 1) && (list.length > 1) )
                    {
                        list.selectedIndex = i - 1;
                    }
                    list.length--;
                }
            }  
        }

Je sais que la fonction ListRemove "corrompt" les values des items de la liste mais seul le texte de chaque élément m'intéresse.

Quelque chose m'échappe mais je n'arrive pas à voir quoi. Quelqu'un a t-il une idée ?
Merci d'avance

Nicolas

[Pongten]

J'ai déjà traité ce genre de contrôle, et je sais que ASP.NET n'apprécie pas trop. La solution utilisée pour y parvenir a été de passer par des champs cachés dans lesquels étaient stockés les id des éléments, les deux listes servant uniquement de "visuel".