[C#] Variable javascript accessible

**stailer** · 30/03/2005, 13h10

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

A+

**Pete** · 30/03/2005, 14h30

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

Est possible que tu donnes le code ???

Bon courrage

**stailer** · 31/03/2005, 02h47

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 :

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
 
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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 ?

**jab** · 31/03/2005, 08h40

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

**Pete** · 31/03/2005, 09h24

Salut !
On bosse tard on dirait !

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 :

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
 
	#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

**stailer** · 31/03/2005, 13h09

Bon.... euh... Ben j'y comprends rien

.
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 :

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
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

**Pete** · 31/03/2005, 14h53

Esseyons ceci ... :

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
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�

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 !

**stailer** · 31/03/2005, 15h04

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 :

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
 
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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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++

**stailer** · 31/03/2005, 15h19

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

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

**Pete** · 31/03/2005, 16h23

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

.

**stailer** · 31/03/2005, 20h24

sur www.dotnetnuke.com il n'y a pas de callback effectivement...
En attendant mieux je laisse comme ca.

**Ditch** · 01/04/2005, 10h21

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

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

Tu sais TOUT faire en javascript. Tu peux acc�der au parent. Tu peux tout faire

**stailer** · 01/04/2005, 12h18

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

[C#] Variable javascript accessible

ASP.NET

Discussions similaires

Partager

Partager