Faire un bloc accordéon

Bonjour

Je suis confronté à un souci un peu empirique. Je dois faire un bloc accordéon, un truc avec un petite image en forme de croix sur laquelle on clique pour afficher un bloc en dessous et si on reclique, le bloc se referme.

Si j'étais en ASP 3.0, je le ferais avec du JScript sans souci. Mais là, en .NET je ne sais pas trop par où commencer et encore moins comment mettre une fonction JScript sur le click d'une image.

Voici le code de ma page côté HTML :

Code:

---

1 2 3 4 5 6 7 8 9 10

<asp:Image ID="imgCroix" runat="server" /> <asp:Label ID="lblTitre" runat="server"></asp:Label> <asp:Table ID="tblGolbale" runat="server"> <asp:TableRow> <asp:TableCell> <asp:Label ID="lblTexteBase" runat="server" Text="j'affiche pour le test"></asp:Label> </asp:TableCell> </asp:TableRow> </asp:Table>

---

L'idée est de cliquer sur l'image pour afficher la Table ou pas. Le label titre doit toujours rester visible. Tout cela est dans un Composant Utilisateur.

Pouvez vous m'aiguiller sur le bon chemin ?

Il est possible de faire dans ton code:

Code:

---

1 2	imgCroix.Attributes.add("onclick","functionJs()")

---

Ensuite on peut admettre que tu as script soit dans ta page soit dans un .js

Il est aussi possible d'écrire ton script et de l'enregistrer sur ta page de cette manière:

Code:

---

1 2	Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "monScript", "<script type='text/javascript'>" & str & "</script>")

---

str étant ta fonction, ton script ce que tu veux ...

Merci pour ton aide.

J'ai choisi la première option, qui me parait plus simple.

Je butte sur une conséquence que je n'avais pas envisagée au départ. Vu que je vais avoir plusieurs blocs sur ma page, je n'arrive pas à les identifier séparément parce que je ne vois pas comment je peut intervenir sur mon DIV à la construction de la page.

Voici le code modifié :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<script type="text/javascript"> function ouvrir() { if (document.getElementById("accordeon").style.display == "none") { document.getElementById("accordeon").style.display = "block"; } else { document.getElementById("accordeon").style.display = "none"; } } </script> <asp:Image ID="imgCroix" runat="server" /> <asp:Label ID="lblTitre" runat="server"></asp:Label> <div id="accordeon" style="display:none;"> <asp:Table ID="tblGlobale" runat="server"> <asp:TableRow> <asp:TableCell> <asp:Label ID="lblTexteBase" runat="server" Text="j'affiche pour le test"></asp:Label> </asp:TableCell> </asp:TableRow> </asp:Table> </div>

---

J'ai encadré la Table avec le DIV pour le piloter.

Mais peut être qu'il y a une autre solution

Bon, j'ai avancé un poil. J'ai viré mon DIV et j'agis directement sur la table

Mais je rencontre toujours ce souci de l'identifiant unique. Je ne comprends pas comment deux contrôles peuvent avoir le mêm identifiant dans la page.

J'ai fait un truc comme ça dans mon CodeBehind :

Code:

---

1 2	imgCroix.Attributes.Add("onclick", "ouvrir('" & tblGlobale.ClientID & "');")

---

Mais vu que mes deux tables ont le même identifiant, ben ça merdouille sévère.

Une idée ?

tblGlobal.UniqueID peut être

Pas mieu, j'ai essayé aussi, mais ça marche pas non plus.
et en plus, le clienId et le Unique Id sont ReadOnly, donc même pas possible de les affecter.

Puique tu t'es mis à l'AJAXCONTROLTOOLKIT, pourquoi ne pas faire ca avec le control ACCORDION qui existe précisément pour réaliser ce que tu veux faire ;)

Pourquoi n'as tu pas des ID différents pour tes tableaux, ca serait plus simple.

Ainsi quand tu accèdes au ClientID, tu seras sur d'avoir un id différent

Merci CALAGAN99, tu me sauve la vie. J'avasi complètement zappé ce genre de chose. En fait, vu que je ne veux que jouer sur l'afichage, j'avais pas imaginer faire de l'AJAX, parce que je n'ai rien à faire sur le serveur. Mais ouais, bonne idée.

@ Promesses (en espérant que tu les tiennes :lol: ) : parce que mon tableau est unique dans le composant utilisateur, mais le composant utilisateur est rèpété plusieurs fois dans la pages.

Bon, je vasi test l'AJAX et je reviens boucler lorsque ça marchera

Bon, ok, ça roule comme ça.
Mais attention : si vous devez mettre un Accordion dans un coposant utilisteur, il ne faut pas répéter le Composant aprce sinon, le deuxime acordion ne fonctionne pas du tout.

Maintenant, faut vriament en avoir besoin pour en metre deux, mais faut rester vigilant.

Encore merci calagna99, ta présence d'esprit me sort d'un mauvais pas.

Merci aussi aux autres qui se sont penché sur mon cas.

Si ma faible expérience peut aider, c'est avec plaisir :)

salut zoofy,

je te propose de modifier ta fonction jscript en lui passant par exemple un argument qui sera l'id de ton contrôle. Cet ID tu le récupères avec l'attribut clientID.

Bien sûr l'attribut ClientID se voit attribuer une valeur autre que id dès lors que le composant server est crée.

Merci PredAlpha, je sais pas pourquoi, mais tout est rentré dans l'ordre. Je devais certainement faire des trucs pas bien et quand j'ai remis u peu d'ordre dans mon code, tout c'est mieux passé.

Les aléas du visual studio :D

++Zoofy

ps: je suis enfin passé sous vs2005 lol