IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

Animation (déplacement) de boutons ASP


Sujet :

ASP.NET

  1. #1
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut Animation (déplacement) de boutons ASP
    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.

  2. #2
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    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...

  3. #3
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    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.

  4. #4
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    Citation Envoyé par lionel0068 Voir le message
    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"; }

  5. #5
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    Je viens d'essayer avec cette syntaxe, mais rien ne se passe...

  6. #6
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    Citation Envoyé par lionel0068 Voir le message
    Je viens d'essayer avec cette syntaxe, mais rien ne se passe...
    Quel a été le code HTML généré ?

  7. #7
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    voici le code HTML généré en pièce jointe.
    Fichiers attachés Fichiers attachés

  8. #8
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    Citation Envoyé par lionel0068 Voir le message
    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 ?

  9. #9
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    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.
    Fichiers attachés Fichiers attachés

  10. #10
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    Citation Envoyé par lionel0068 Voir le message
    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.

  11. #11
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    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";

  12. #12
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    Citation Envoyé par lionel0068 Voir le message
    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+

  13. #13
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    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.

  14. #14
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    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...

  15. #15
    Membre habitué
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Mars 2015
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Bâtiment

    Informations forums :
    Inscription : Mars 2015
    Messages : 14
    Par défaut
    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.

  16. #16
    Membre émérite
    Profil pro
    Inscrit en
    Novembre 2003
    Messages
    777
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2003
    Messages : 777
    Par défaut
    C'est la qu’interviennent les callback...as-tu déjà utilisé l'updatepanel ?

Discussions similaires

  1. mettre une image dans un bouton Asp net
    Par Jsh dans le forum ASP.NET
    Réponses: 5
    Dernier message: 24/09/2007, 19h22
  2. target dans un bouton asp.net
    Par intissar_g dans le forum ASP.NET
    Réponses: 1
    Dernier message: 20/06/2007, 13h32
  3. Animation d'un bouton
    Par Nadd dans le forum Flash
    Réponses: 1
    Dernier message: 01/10/2006, 17h46
  4. animation curseur sur bouton
    Par Chonko dans le forum Flash
    Réponses: 11
    Dernier message: 24/07/2006, 13h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo