[C#] Variable javascript accessible

Version imprimable

Bonjour,

alors voila une question un peu naive, qui je pense sera r�solu par quelque chose de plus complexe :

je suis en train de programmer un controle serveur CollapsePanel... Donc pour l'instant le Panel c'est bon, le Collapse/expand aussi... MAIS
si l'utilisateur rafraichit la page, les panel ne se souviennent pas si ils sont collaps�s ou non. Voila ma fonction Javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function Affich(table_id, coll) { if (coll) { document.getElementById(table_id).style.display="none"; coll = false; } else { document.getElementById(table_id).style.display="block"; coll = true; } }
Comment faire, pour garder en m�moire cette variable coll ? ou du moins comment la passer comment argument � l'url ?

Je pense que je vais pas pouvoir aller au bout de cette id�e, ca me parait un peu trop facile tout �a, mais je vous pose la question quand m�me :wink:

A+

30/03/2005, 14h30
Pete

Je ferais comme cela moi :
J'ajoutrerais un input hidden pour chaque CollapsePanel. Dans ta fonction JS Affiche, tu positionne la valeur de ton imput hidden � true ou a false. Ensuite lors d'un postback, tu peux r�cup�rer cette valeur dans ton composant CollapsePanel et la rendre persistente.
Et moi, ce composant il m'interesse bien aussi :wink: Est possible que tu donnes le code ??? :D

Bon courrage

Bon, apr�s un peu de boulot voila, mon code javascript pour �tendre ou refermer mon panel (enfin pour rendre une table invisible � l'int�rieur en fait) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function Affich(table_id, coll) { if (document.Form1[coll].value == "true") { document.getElementById(table_id).style.display="none"; document.Form1[coll].value = "false"; } else { document.getElementById(table_id).style.display="block"; document.Form1[coll].value = "true"; } document.Form1.submit(); }
Et voila mon code asp.net pour cr�er autant de panel que je veux et que tout fonctionne correctement :

Donc le Input que tu m'as conseill� :
Code:

1 2 3 4 5 6 7 private HtmlInputHidden hidden_panel = new HtmlInputHidden(); ... hidden_panel.ID = this.ID+"_coll"; hidden_panel.Value="true"; this.Controls.Add(hidden_panel);
et le code pour la lancer la fonction javascript :
Code:

1 2 build.Append("<a onclick=\" Affich('"+this.ID+"', '"+this.ID+"_coll' ) \" class='titlebar'>"+this.Titre+"</a>");
Alors voila, par d�faut la j'ai mis � true, donc si on valide la page ou qu'on rafraichit la page, ben ca se remet � true... Comment garder cette valeur en m�moire ? Avec Page.Request.Params ?

31/03/2005, 08h40
jab

Je ne suis pas sp�cialiste en aspx mais est-ce que tu ne dois pas initialiser ta variable dans if avec IsPostBack ?

Salut !
On bosse tard on dirait ! :wink:

Est ce que tu connais l'interface IPostBackDataHandler ? Elle te permet de r�cup�rer la valeur d'un Input apr�s un postback. Tu devrais peut �tre l'impl�menter dans ton objet CollapsePanel. Ci-dessous un exemple de son implementation pour un DateTimePicker que j'ai cod� et qui utilise l'histoire du InputHidden.
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 #region IPostBackDataHandler Members public void RaisePostDataChangedEvent() { OnDateChanged(EventArgs.Empty); } protected virtual void OnDateChanged(EventArgs e) { if (DateChanged != null) DateChanged(this,e); } public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection) { string postedValue = postCollection[postDataKey]; _Date = DateTime.Parse(postedValue); if(postedValue != Text) { Text =postedValue; return true; } else return false; } #endregion
Je pense que tu devrais r�cup�rer ansi la valeur de ton Hidden pour pouvoir la conserver au cours des postback. Donc l'initialisation � true du Hidden, tu l'as fait dans le Constructeur de ton CollapsePanel et ensuite elle est �cras�e dans la fonction LoadPostData.

Voil�, en esp�rant ne pas dire trop d'�neries et que �a te serve :wink:

Bon.... euh... Ben j'y comprends rien :oops: .
J'ai des livres sur asp.net et tout �a, mais j'ai aucun tutorial sur une utilisation pouss�e du ViewState. A chaque fois c'est des exemples tout con.
Alors voila TOUT le code mon controle serveur, peut-�tre que tu pourras m'en dire un peu plus ?

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
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
 
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
using System.Text;
using System.Web;
 
namespace CollapsePanel
{
	[DefaultProperty("Text"),ToolboxData("<{0}:CollapsePanel1 runat=server></{0}:CollapsePanel1>")]
	public class CollapsePanel1 : System.Web.UI.WebControls.Panel
	{
		private StringBuilder build = new StringBuilder();
		private HtmlInputHidden hidden_panel = new HtmlInputHidden(); 
 
		#region propriétés
		private string titre;
		[Bindable(true),Category("Appearance"),DefaultValue("CollapsePanel")]
		public string Titre
		{
			get
			{ return titre; }
			set
			{ titre = value; }
		}
		#endregion
 
		#region Header du panel
		private void HeaderPanel()
		{
			build.Append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td width=\"27\">");
			build.Append("<img src=\"images_panel/conspiracy_34.jpg\" width=\"20\" height=\"25\" alt=\"\"/><img src=\"images_panel/conspiracy_35.jpg\" width=\"7\" height=\"25\" alt=\"\"/>");
			build.Append("</td><td class=\"consp_36\">");
			build.Append("<img src=\"images_panel/conspiracy_36.jpg\" width=\"1\" height=\"25\" align=\"middle\" alt=\"\"/>");
 
			hidden_panel.ID = this.ID+"_coll";
			hidden_panel.Value="true";
			this.Controls.Add(hidden_panel); 
			build.Append("<a onclick=\"  Affich('"+this.ID+"', '"+this.ID+"_coll'  )  \" class='titlebar'>"+this.Titre+"</a>");
 
			build.Append("</td><td width=\"27\">");
			build.Append("<img src=\"images_panel/conspiracy_39.jpg\" width=\"7\" height=\"25\" alt=\"\"/><img src=\"images_panel/conspiracy_40.jpg\" width=\"20\" height=\"25\" alt=\"\"/>");
			build.Append("</td></tr></table><table id='"+this.ID+"' width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
			build.Append("<tr><td width=\"11\" class=\"consp_42\">");
			build.Append("<img src=\"images_panel/conspiracy_42.jpg\" width=\"11\" height=\"1\" alt=\"\"/>");
			build.Append("</td><td width=\"100%\" bgcolor=\"#FFFFFF\">");
		}
		#endregion
 
		#region footer du panel
		private void FooterPanel()
		{
			build.Remove(0,build.Length);
			build.Append("</td><td width=\"11\" class=\"consp_45\">");
			build.Append("<img src=\"images_panel/conspiracy_45.jpg\" width=\"11\" height=\"1\" alt=\"\"/></td></tr></table>");
			build.Append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>");
			build.Append("<td width=\"17\"><img src=\"images_panel/conspiracy_48.jpg\" width=\"17\" height=\"12\" alt=\"\"/></td>");
			build.Append("<td class=\"consp_49\"><img src=\"images_panel/conspiracy_49.jpg\" width=\"1\" height=\"12\" alt=\"\"/></td>");
			build.Append("<td width=\"17\"><img src=\"images_panel/conspiracy_52.jpg\" width=\"17\" height=\"12\" alt=\"\"/></td>");
			build.Append("</tr></table>");
		}
		#endregion
 
		#region rendu
		protected override void Render(HtmlTextWriter output)
		{
			this.HeaderPanel();	
			output.Write(build);
 
			this.RenderChildren(output);
 
			this.FooterPanel();	
			output.Write(build);
 
			build = null;
		}
		#endregion	
 
 
	}// fin de classe
} // fin de namespace

Esseyons ceci ... :

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 class CollapsePanel1 : System.Web.UI.WebControls.Panel, IPostBackDataHandler
{
//...
 
 
 #region IPostBackDataHandler Members 
 
      public void RaisePostDataChangedEvent() 
      { 
         OnDateChanged(EventArgs.Empty);      
      } 
 
 
      public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection) 
      { 
         string postedValue = postCollection[this.Name+"_coll"]; 
         bool newVal = Convert.ToBoolean(postedValue); 
 
         if(newVal  != (bool)ViewState[this.Name+"_coll"]) 
         { 
            //ici tu sais que l'état du panel est modifié par l'utilisateur.
            //la nouvelle valeur est newVal
            hidden_panel.Value=newVal ; 
            return true; 
         } 
         else 
            return false; 
      } 
   #endregion 
 
//et dans le constructeur :
privade void CollapsePanel1()
{
//...
          hidden_panel.ID = this.ID+"_coll"; 
          hidden_panel.Name = this.Name+"_coll"; 
         hidden_panel.Value="true"; 
         this.Controls.Add(hidden_panel); 
//enlève l'init de 'hidden_panel' dans 'HeaderPanel()'
}
 
  }

Voil� :wink:
Je suis pas sur de moi � 100%, mais �a devrait aller, � toi d'ajuster....
Bon courrage. Renseigne toi un peu sur IPostBackDataHandler, c'est tr�s utile !

Ca y est ca roule !!!

en fait j'ai fait autrement.. On peut r�cup�rer les variables d'un post avec Request.Form.Get(nomduchamp)

Alors voici de nouveau mon code complet. Donc le javascript :
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 function Affich(coll) { if (document.Form1[coll].value == "true") { document.Form1[coll].value = "false"; } else { document.Form1[coll].value = "true"; } document.Form1.submit(); } function Affich2(table_id, coll) { if (document.Form1[coll].value == "true") { document.getElementById(table_id).style.display="none"; } else { document.getElementById(table_id).style.display="block"; } }
Affich = si c'est collapse on expand sinon on l'inverse, la valeur est donc stock�e dans le input, puis je valide le formulaire
Affich2 = j'ex�cute l'action

et donc mon code asp.net qui change est principalement ma fonction HeaderPanel(). Donc d�j� la fonction qui r�cup�re la valeur :
Code:

1 2 3 4 5 6 7 8 9 10 #region obtient la valeur text d'un champ passé par POST private string ResInput(string champ) { if (Page.Request.Form.Get(champ)!=null) return Page.Request.Form.Get(champ).ToString(); else return ""; } #endregion
puis dans HeaderPanel j'ai fait �a :
Code:

1 2 3 4 5 6 7 8 9 10 11 hidden_panel.ID = this.ID+"_coll"; if (this.ResInput(hidden_panel.ID)=="") hidden_panel.Value = "true"; else hidden_panel.Value = this.ResInput(hidden_panel.ID); this.Controls.Add(hidden_panel); build.Append("<a onclick=\"Affich( '"+this.ID+"_coll' )\" class='titlebar'>"+this.Titre+"</a>");
Et � la fin de l'affichage, dans FooterPanel() , je lance le javascript. C'est la que tout se joue :
Code:

1 2 build.Append("<script type='text/javascript'>Affich2('"+this.ID+"', '"+this.ID+"_coll' )</script>");
Donc, tu auras compris le d�faut de la chose, on fait un post � chaque Collapse ou Expand... Mais enfin bon, ca marche bien quand m�me.
Je mets tout �a de c�t�.

Je vais quand m�me potasser IPostBackDataHandler... Et essayer de trouver 1 livre qui d�passe le cadre de l'initiation : )

Merci encore pour ton aide, A++

31/03/2005, 15h19
stailer

Si tu veux tu peux me laisser ton mail en MP et je t'enverrai tout le zip du composant, avec la css et les images notamment.

Pourquoi autant de gentillesse ? Ben parce que j'ai encore une question :D

En fait je voudrais r�soudre un dernier souci. Mais c'est pas de l'ASP.NET c'est du Javascript :

Dans mes fonctions j'utilise Form1... Or, ce ne sera pas forc�ment Form1 dans ma WebForm. Alors comment dire : utiliser le formulaire parent ?

Vala... ceci dit, m�me si tu sais pas, je peux quand m�me t'envoyer le zip... Mais ca me ferait chier.. Non non je d�cone :D
31/03/2005, 16h23
Pete

Je ne sais pas si tu peux lui dire d'utiliser le formulaire parent... En fait j'ai horeur du JS, �a me donne des boutons parce que �a marche jamais. Mais n'oublie pas qu'il y a un forum sp�cialis� dans �a !
Mais du c�t� asp.net, tu pourras toujours modifier dynamiquement le script JS pour mettre le nom de ta form � la place de form1.
Dommage que tu fasses un CallBack, il me semble parfaitement inutile dans ton code !? Mais faut le voir fonctionner savoir....
Je t'envoie mon email par MP, en �sp�rant avoir m�riter le composant :wink: .
31/03/2005, 20h24
stailer

sur www.dotnetnuke.com il n'y a pas de callback effectivement...
En attendant mieux je laisse comme ca.
01/04/2005, 10h21
Ditch

Citation:

Envoy� par stailer

Si tu veux tu peux me laisser ton mail en MP et je t'enverrai tout le zip du composant, avec la css et les images notamment.

Pourquoi autant de gentillesse ? Ben parce que j'ai encore une question :D

En fait je voudrais r�soudre un dernier souci. Mais c'est pas de l'ASP.NET c'est du Javascript :

Dans mes fonctions j'utilise Form1... Or, ce ne sera pas forc�ment Form1 dans ma WebForm. Alors comment dire : utiliser le formulaire parent ?

Vala... ceci dit, m�me si tu sais pas, je peux quand m�me t'envoyer le zip... Mais ca me ferait chier.. Non non je d�cone :D

Tu sais TOUT faire en javascript. Tu peux acc�der au parent. Tu peux tout faire ;)
01/04/2005, 12h18
stailer

Ok, super, je PEUX le faire alors.
Bon ben t'as plus qu'� me dire comment alors Ditch : ))