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

[lionel0068]

voici le code HTML généré en pièce jointe.

[Dokho1000]

voici le code HTML généré en pièce jointe.

Quel est le bouton sur lequel tu as appuyé pour avoir cette génération de code ?

[lionel0068]

C'était le code sans avoir cliqué sur aucun bouton.
Voici, en pièce jointe, le code après avoir cliqué sur le bouton 2 qui est le bouton ASP qui pose problème.

[Dokho1000]

C'était le code sans avoir cliqué sur aucun bouton.
Voici, en pièce jointe, le code après avoir cliqué sur le bouton 2 qui est le bouton ASP qui pose problème.

Le code html généré est correct, c'est donc ton css qui ne l'est pas...
Dans ton code behind tu mets les 2 class directement (donc pos2 gagne normalement...) alors que dans ton js tu mets la class pos1 et puis après le settimeout la class pos2.

[lionel0068]

je comprends, mais au départ mon code behind était le suivant et cela ne fonctionne pas :

Code :

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

1
2
3
Button1.CssClass = "pos1";
Thread.Sleep(1000);
Button1.CssClass = "pos2";

[Dokho1000]

je comprends, mais au départ mon code behind était le suivant et cela ne fonctionne pas :

Code :

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

1
2
3
Button1.CssClass = "pos1";
Thread.Sleep(1000);
Button1.CssClass = "pos2";

Pour rappel le code-behind est exécuté uniquement coté serveur donc bien avant que la page html généré ne soit envoyé au client. Dans le cas ci-dessus tu n'avais probablement dans ton bouton que la class "pos2".

Si tu veux réaliser un déplacement visible à l’écran tu devras le faire en JavaScript.
Je te conseil donc d'utiliser cette méthode ci "this.Page.RegisterStartupScript(...)" qui te permettra d'ajouter et/ou executer un JavaScript en bas de page. (ta méthode "deplacer" par exemple)

A+

[lionel0068]

Merci Dokho1000 c’est exactement ce dont j’avais besoin, cela fonctionne maintenant.

Néanmoins, pour finaliser je bloque sur le problème suivant : en réalité il a plusieurs boutons 1 et lorsque je clique sur bouton 2 les boutons 1 doivent se déplacer pour simuler le fait qu’ils quittent la page, ensuite dans le code behind un traitement modifie les propriétés des boutons 1, y compris leur nombre (Button1.Visible=false) et les nouveaux boutons 1 sont affichés.
Le problème est que si le postback a supprimé des boutons 1, le javascript ne peut pas s’exécuter sur des boutons invisibles, il y a plantage. Il faudrait donc que mon javascript s’exécute avant le postback.
Une solution pourrait être de lancer « OnClientClick » avant « OnClick », mais comme indiqué au 1er message de cette discussion (voir 2e solution) il ne fonctionne pas.

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