Discussion :

[lionel0068]

Bonjour,
Pour mon site réalisé en ASP.Net je souhaite que lorsque le visiteur clique sur un bouton, d'autres boutons se déplacent, mais cela ne fonctionne pas, j'ai donc développé la petite appli de test dont voici le code.

Il y a 2 boutons ASP, le but est que lorsque je clique sur Button2 alors Button1 se déplace vers le bas suivant 2 positions.

Code ASPX :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>        
        #Button1 {
            position: absolute;
            width: 100px;
            left: 0px;
            top: 0px;
        }
 
        #Button2 {
            position: absolute;
            width: 100px;
            left: 100px;
            top: 0px;
        }
</style>

1ere solution en code behind qui ne fonctionne pas (rien ne se passe) et par la suite j'ai essayé d'ajouter des Thread.Sleep(2000) mais ce n'est pas mieux:

Code ASPX :

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
<style> 
        .pos1 {
            position: absolute;
            left: 0px;
            top: 100px;
        }
 
        .pos2 {
            position: absolute;
            left: 0px;
            top: 200px;
        }
</style>
 
<asp:Button ID="Button1" runat="server" Text="Button 1" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_Click" />

Code C# :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
protected void Button2_Click(object sender, EventArgs e)
{
        this.Button1.CssClass = "pos1";
        this.Button1.CssClass = "pos2";
}

2e solution en javascript qui ne fonctionne pas (Button1 se déplace très rapidement et revient en position) :

Code ASPX :

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
<script language="javascript" type="text/javascript">
        function deplacer() {
            go_pos1();
            setTimeout("go_pos2()", 1000);
        }
 
        function go_pos1() {
            document.getElementById("Button1").style.top = "100px";
        }
 
        function go_pos2() {
            document.getElementById("Button1").style.top = "200px";
        }
</script>
 
<asp:Button ID="Button1" runat="server" Text="Button 1" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="deplacer()"/>

3e solution qui fonctionne avec le même javascript que solution 2 et un Button3 qui est un bouton HTML:

Code ASPX :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<style>       
        #Button3 {
            position: absolute;
            width: 100px;
            left: 200px;
            top: 0px;
         }
</style>
 
<input id="Button3" type="button" runat="server" value="Button3" onclick="deplacer()" />

Conclusion:
Cela fonctionne si le bouton qui lance la commande est un bouton HTML, mais pas si c'est un bouton ASP.
Le problème est que l’ensemble de mon site est fait avec des boutons ASP et donc tout refaire avec des boutons HTML représente un travail colossal.
Merci d'avance pour vos conseils.

[Dokho1000]

Salut,

Pour la solution 2&3 c'est normal car ton bouton asp.net est de type submit. Il y a donc en postback vers le serveur. (ce qui n'est pas le cas avec ton bouton html)
Ta première méthode devrait fonctionner mais tu as du te tromper dans le code car tu attribues la class pos1 & pos2 au même bouton...

[lionel0068]

Merci pour cette réponse, mais j'ai du mal à comprendre ton commentaire pour la solution 1, car j'attribue la class pos1 et pos2 au même bouton du fait que c'est ce bouton qui doit se déplacer, donc je lui attribue successivement 2 class avec des positions différentes, mais probablement que je m'y prends mal.

[Dokho1000]

Merci pour cette réponse, mais j'ai du mal à comprendre ton commentaire pour la solution 1, car j'attribue la class pos1 et pos2 au même bouton du fait que c'est ce bouton qui doit se déplacer, donc je lui attribue successivement 2 class avec des positions différentes, mais probablement que je m'y prends mal.

alors ce serait plutot :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8

protected void Button2_Click(object sender, EventArgs e)
{
        this.Button1.CssClass = "pos1 pos2";
}

[lionel0068]

Je viens d'essayer avec cette syntaxe, mais rien ne se passe...

[Dokho1000]

Je viens d'essayer avec cette syntaxe, mais rien ne se passe...

Quel a été le code HTML généré ?

[Dokho1000]

Le plus rapide alors au lieu de mettre ton bouton en invisible est d’utiliser le style "display:none" sur ton bouton de cette façon le contrôle est présent dans le code html mais non visible à l'écran...

[lionel0068]

Entre temps j’avais essayé cette solution qui fonctionne d’un point de vue technique mais du tout pour ce qui est de l’effet voulu, car les nouveaux boutons s’affichent d’abord (nombre et propriétés différentes) et ensuite ils se déplacent alors que le but est que les anciens boutons se déplacent d’abord (comme s’ils sortaient de la page) avant que les nouveaux (modifiés dans le code behind) ne s’affichent.

J’ai essayé de tout faire en javascript en appelant d’abord la fonction « deplacer() » et ensuite une fonction qui change les propriétés des boutons et cela fonctionne. Le problème c’est qu’actuellement tout le traitement est fait en code behind et dans cette discussion je n’ai parlé que de boutons pour simplifier, mais en réalité je vais appliquer cela à tous les composants du site sur lesquels beaucoup de traitements sont faits en code behind, je ne peux donc pas tout refaire en javascript.

La solution est donc soit d’exécuter le javascript avant le postback, soit de lancer du code behind depuis le javascript, mais je n’ai pas trouvé de solution simple sur les forums pour ça.

[Dokho1000]

C'est la qu’interviennent les callback...as-tu déjà utilisé l'updatepanel ?