Discussion :

[stailer]

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]

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]

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]

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

[Pete]

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]

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]

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]

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]

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]

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]

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

[Ditch]

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]

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