[Custom control] - Javascript et postback ?

Version imprimable

06/08/2007, 16h51
Pongten

[Custom control] - Javascript et postback ?

Salut à tous,

Est-il possible de faire prendre connaissance à un contrôle serveur d'éléments créés via Javascript ?

Je m'explique, je viens de mettre en place un control ListBox.
Dans cette même page, j'ai un bouton, qui lorsque je clique dessus, appelle une fonction JavaScript qui ajoute un élément à la listBox. Cela fonctionne parfaitement bien.

Comment dois-je faire pour que, lors d'un postback, je puisse tenir compte de ces éléments ajoutés via JS ???

En effet, dans la liste des items, lors d'un postback, je n'ai que ceux créés avant l'envoi et aucun de ceux que j'ai créé via la bouton et la fonction javascript...
06/08/2007, 16h58
LefortLudovic
A mon avis tu dois mettre les élements de ta liste dans ton objet ViewState.
Code:

1 2 ViewState["ItemsList"] = maListe.Items
et ensuite recharger cette liste après le postback en récupérant les objets dans le viewState.

Ludovic,
06/08/2007, 17h06
Pongten

A quel moment dois-je faire ça ? Je sais le faire via Javascript ?

Je ne comprends pas bien ce que tu veux dire :(

Merci en tout cas de m'aider
06/08/2007, 17h07
LefortLudovic

Normalement ta fonction javascript ne doit pas provoquer de postback ...

Quel est l'évenement qui force le postback ? un bouton ? autre chose ?
06/08/2007, 17h08
Pongten

Il s'agit d'un bouton
06/08/2007, 17h10
LefortLudovic

Donc sur le Button.Click tu stockes ce que tu veux conserver dans ta variable ViewState. Ensuite dans le load de ta page tu peux récuperer le contenu de cette variable.

L'objet ViewState fonctionne comme la variable de Session mais son scope est limité à la Page.
06/08/2007, 17h12
Pongten

Ok, mais le problème, c'est que la gestion de la méthode ButtonClick se fait lorsque le postback a été effectué et que les contrôles ont été rechargés, et à ce moment précis, tous les éléments ajoutés via le javascript ont été "zappés".
06/08/2007, 17h14
Bluedeep

Ne fais pas le PostBack automatiquement, mais dans ton javascript.
06/08/2007, 17h16
Pongten

Citation:

Envoyé par Bluedeep

Ne fais pas le PostBack automatiquement, mais dans ton javascript.

J'ai bien peur de ne pas te suivre là :(

En effet, je ne fait pas de postback automatique.

J'ai une listBox, un bouton qui me permet d'ajouter un item à la liste et un autre bouton pour le postback.
Il ne faut pas chercher d'utilité à cette page, c'est juste pour essayer de mettre le mécanisme en place :)
06/08/2007, 17h20
lutecefalco

Tu n'initialiserai pas ta listbox en code behind dans le page load par hasard?
06/08/2007, 17h22
Pongten
J'y ajoute un élément, mais j'ai mis cette initialisation dans un petit bloc du style :
Code:

1 2 3 4 5 if(!IsPostBack) { }
Si c'est ce à quoi tu veux faire référence ;)
06/08/2007, 17h23
Bluedeep

Citation:

Envoyé par Pongten

J'ai bien peur de ne pas te suivre là :(

En effet, je ne fait pas de postback automatique.

J'ai une listBox, un bouton qui me permet d'ajouter un item à la liste et un autre bouton pour le postback.
Il ne faut pas chercher d'utilité à cette page, c'est juste pour essayer de mettre le mécanisme en place :)

Et ton bouton qui rajoute un item, il est pas en AutoPostBack à true ?

Voici le code :

Default.aspx :

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
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Page sans titre</title>
    <script type="text/javascript">
    var already = false;
 
    function AddItem(control)
    {
        var listControl = document.getElementById(control);
        listControl.options[listControl.options.length] = new Option("Test2", "test2");
    }
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
            <asp:Button ID="Button2" runat="server" Text="++" />
        <asp:Button ID="Button1"
            runat="server" Text="Button" OnClick="Button1_Click" />
    </div>
    </form>
</body>
</html>

Default.aspx.cs :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            ListBox1.Items.Add(new ListItem("test", "test"));
            Button2.OnClientClick = "AddItem('" + ListBox1.UniqueID + "');return false;";
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        foreach(ListItem _li in ListBox1.Items)
        {
            Response.Write(_li.Text + "<br/>");
        }
    }
}

Comme je fais return false sur le onClick du button2, cela annule le PostBack.

06/08/2007, 17h28
LefortLudovic

Ton bouton qui ajoute les elements via javascript ne peux pas faire de postback sinon il n'y a plus aucun intéret à utiliser javascript :lol:

En gros pour ton exemple tu dois avoir une liste et deux boutons

Le premier ajoute les élements en javascript SANS postback.
Le deuxième provoque un postback mais dans son .click tu stockes les élements de la liste dans ton Viewstate ensuite dans le load provoqué par le postback tu bouton tu les récupères.
06/08/2007, 17h29
Pongten

Ok, mais comment dois-je faire pour stocker dans le viewstate via JavaScript ?
06/08/2007, 17h36
lutecefalco

Nan mais y a pas besoin de passer par là
Tu peux très bien récupérer des éléments ajoutés en js.
Faut trouver le problème dans le code actuel :)

Ta listbox est vide et tu ajoutes juste l'item (test, test) si !IsPostBack, c'est ça?
06/08/2007, 17h58
Pongten

Oui, c'est ça.

Puis une fois dans la page, chaque fois que je clique sur button2, une fonction JS ajoute un élément à la liste.
07/08/2007, 11h14
Pongten

En fait, après pas mal de recherches, il s'avère que lorsqu'on ajoute des éléments à un listbox via javascript, cela n'est pas transmis lors du postback.

Une façon de contourner ce problème consiste à ajouter un champ caché, et à le remplir avec les éléments que l'on veut ajouter en les séparant avec un séparateur défini, puis récupérer ces items lors du postback.
07/08/2007, 14h13
LefortLudovic

Un champ caché qui contient des données pour récupérer après un postback ------> ViewState

Le viewState fait exactement cela
07/08/2007, 14h53
Pongten

Oui, sauf que je ne connais pas par quel moyen inscrire des données dans le Viewstate via Javascript.. Par contre, dans le champ caché, pas de problème...

Maintenant si tu sais comment accéder au viewstate via javascript, je suis preneur :-)
07/08/2007, 18h07
LefortLudovic

Ouhalalalalalala écris dans le champ caché effectivement 8-)