Contrôles html, viewstate et runat=server

Version imprimable

Bonsoir,

J'ai une petite page web qui doit afficher plusieurs choses, et notamment un tableau. Au vu de sa grande taille, je veux que l'utilisateur puisse le cacher ou le montrer à volonté. Vu le peu de choses à faire, je décide d'utiliser des contrôles html classiques, avec des fonctions javascript qui changent le style css (la propriété display notamment). Jusque là, facile.

Le problème, c'est que si un Postback est généré sur cette page, les modifications de style effectuées sur mes contrôles sont perdues. Zut. Après quelques recherches, je me rends compte que forcément, vu que mes contrôles html ne sont pas enregistrés dans le viewstate, leur état n'est pas mémorisé et est réinitialisé à chaque postback. Je rajoute donc runat="server" et enableviewstate="true" dans mes balises, mais rien n'y fait. J'ai beau avoir cherché pendant un bout de temps, je n'ai pas trouvé de solution à mon problème.

Voici le code de ma page 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Tournoi - statistiques</title> <script type="text/javascript" language="javascript"> function montrer_tableau() { document.getElementById('tableau').style.display='inline-table'; document.getElementById('montrer').style.display='none'; document.getElementById('cacher').style.display='inline'; } function cacher_tableau() { document.getElementById('tableau').style.display='none'; document.getElementById('montrer').style.display='inline'; document.getElementById('cacher').style.display='none'; } </script> </head> <body> <form id="form1" runat="server"> <div> <a href="#" id="montrer" onclick="montrer_tableau()" style="display:none" runat="server" enableviewstate="true">Montrer le tableau</a> <a href="#" id="cacher" onclick="cacher_tableau()" style="display:inline" runat="server" enableviewstate="true">Cacher le tableau</a> <div id="tableau" style="display:inline-table" runat="server" enableviewstate="true"> [Mon gros tableau ici] </div> <hr /> Détails : <asp:DropDownList ID="ddlClassts" runat="server" /> et <asp:DropDownList ID="ddlEpreuves" runat="server" /> <asp:Button ID="btnDetails" runat="server" Text="Voir" onclick="btnDetails_Click" /><br /> [Des trucs d affichage pas importants] </div> </form> </body> </html>
Je pourrais faire mon bourrin : utiliser des contrôles asp et les bidouiller, mais bon, pour le peu que j'ai à faire avec, ça ferait un peu dégueu... Bon, si je n'ai pas d'autre solution, je le fais, mais bon.

Donc, quelqu'un a-t-il une idée de pourquoi est-ce que mes contrôles html 'montrer' (<a>), 'cacher' (<a>) et 'tableau' (<div>) ne gardent pas leur état lors du Postback ?

Merci beaucoup !

Salut
Argh malheureux !!! :)

Enleve le "runat=server" car tu veux un comportement sur le client, et surtout pas un appel serveur...

Ensuite, essaie de rajouter un "return false;" à la fin des appels de fonctions JS, ca devrait te donner un truc du genre suivant:
Code:

1 2 <a href="#" id="montrer" onclick="montrer_tableau();return false;" style="display:none">Montrer le tableau</a> <a href="#" id="cacher" onclick="cacher_tableau();return false;" style="display:inline" >Cacher le tableau</a>
le "return false" va permettre d'inhiber le fonctionnement du lien, et donc va seulement executer le JS sans recharger la page.

Il me semble même que tu pourrais mettre un truc dans ce genre:
Code:

1 2 <a id="montrer" href="javascript:montrer_tableau();" style="display:none">Montrer le tableau</a> <a id="cacher" href="javascript:cacher_tableau();" style="display:inline" >Cacher le tableau</a>
mais je n'en suis pas sur... à vérifier...:roll:

Bye
Nico ;)

20/04/2010, 09h29
Gunny

Merci de ta réponse ! Cependant j'ai dû mal m'exprimer, parce que mon problème n'est pas que la page se recharge après clic sur mes ancres html. Ce n'est pas le cas, et même avec un runat=server, le comportement reste localisé sur le client et ça ne provoque pas de postback.
Par contre, mettons que je clique sur "cacher le tableau". Ça cache mon tableau. Ensuite, je clique sur le bouton "voir" (qui lui cause bien un postback, normal). Le postback se fait, ainsi que les traitements pour afficher "[Des trucs d affichage pas importants]". Cependant ma table est à nouveau visible, de même que le lien "cacher le tableau". Leur état a été réinitialisé après le postback. C'est un comportement a priori normal puisqu'ils ne sont pas mémorisés dans le viewstate.
Ma question est : comment faire pour conserver l'état d'un contrôle html classique après un postback ?

(et merci pour la syntaxe de mettre le js dans le href, j'avais oublié que l'on pouvait faire ça !)
20/04/2010, 09h44
Nicopilami

Salut
je n'ai pas de réponse exacte à t'apporter pour l'instant, mais ce que tu pourrais faire est d'utiliser la fonction ClientScript.RegisterStartupScript(xxx) de ASP.NET pour changer le style de ton tableau au page_load, en fonction des variables c# que tu veux.

Ainsi, dans ton page_load, tu pourrais tenter un truc du style

Code:

ClientScript.RegisterStartupScript(GetType(),"JSHideTable","cacher_tableau();",true);

mais je pense que ce n'est qu'un "work arround" pour faire ce que tu demandes...

bye
Nico
20/04/2010, 09h49
Arthis

Il faut pour cela que tu fasse persister l'état de ta page client.

Pour cela, il faut que lors du postback ta page renvoie cette information au serveur, afin que celui ci en faisant un nouveau render de ta page, permette a cette page de se ré-afficher selon les informations du départ.

A mon sens, l'utilisation d'un champ hidden declaré en runat=server permettrait ceci. Il faudra donc que ta fonction javascript (montrer/cacher) joue avec ce champ hidden pour modifier sa valeur.

Ensuite afin de restituer l'affichage de ta page lors du rendering, il te faudra ajouter une fonction javascript qui se déclenchera sur le onload du body afin de montrer ou cacher tes éléments.

Dernière petite chose, une fonction toggle, qui regrouperait montrer et cacher) serait peut être plus intéressante.

Dernière dernière petite chose, il existe une fonction toggle en Jquery, regarde un peu de ce coté la..

bon code à toi, a++
20/04/2010, 10h10
Gunny

Hmmm... Je viens de remplacer mes contrôles html a et div par respectivement Hyperlink et Panel, en enregistrant le script dans le code behind.
Le clic pour afficher/cacher fonctionne toujours très bien, mais pourtant le problème reste exactement le même. Je change le style du panel via javascript, ça marche, mais dès que je clique sur mon bouton et que ça fait un postback, pouf, ça revient à l'affichage de départ, et ce même avec le viewstate d'activé. J'ai essayé de provoquer un postback avec un bouton bidon qui ne fait rien, et c'est toujours pareil, donc le problème ne vient pas de ma fonction "btnDetails_Click".

edit : crosspost avec Arthis, je regarde ça, merci !

Ok c'est bon, voici ma solution :

aspx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<asp:HyperLink
        ID="hlkMontrer" 
        NavigateUrl="javascript:montrer_tableau();" 
        runat="server"
        Text="Montrer le tableau"
        />
<asp:HyperLink
        ID="hlkCacher" 
        NavigateUrl="javascript:cacher_tableau();" 
        runat="server"
        Text="Cacher le tableau"
        />
 
<asp:Panel ID="panTableau" runat="server">
[Mon tableau]
</asp:Panel>
 
<asp:HiddenField ID="hidTabVisible" runat="server" Value="True" />

codebehind (c#) :

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
 
protected void Page_Load(object sender, EventArgs e)
{
    string script =
    "<script type=\"text/javascript\" language=\"javascript\">"
    + "function montrer_tableau()"
    + "{"
    + "    document.getElementById('" + panTableau.ClientID + "').style.display='inline-table';"
    + "    document.getElementById('" + hlkMontrer.ClientID + "').style.display='none';"
    + "    document.getElementById('" + hlkCacher.ClientID + "').style.display='inline';"
    + "    document.getElementById('" + hidTabVisible.ClientID + "').value='True';"
    + "}"
    + "function cacher_tableau()"
    + "{"
    + "    document.getElementById('" + panTableau.ClientID + "').style.display='none';"
    + "    document.getElementById('" + hlkMontrer.ClientID + "').style.display='inline';"
    + "    document.getElementById('" + hlkCacher.ClientID + "').style.display='none';"
    + "    document.getElementById('" + hidTabVisible.ClientID + "').value='False';"
    + "}"
    + "</script>";
 
    ClientScript.RegisterClientScriptBlock(this.GetType(), "JSScript", script, false);
 
    if (hidTabVisible.Value == "True")
    {
        panTableau.Style["display"] = "inline-table";
        hlkMontrer.Style["display"] = "none";
        hlkCacher.Style["display"] = "inline";
    }
    else
    {
        panTableau.Style["display"] = "none";
        hlkMontrer.Style["display"] = "inline";
        hlkCacher.Style["display"] = "none";
    }
}

Merci beaucoup !