Discussion :

[lionel0068]

Bonjour,
Je cherche comment exécuter le code javascript contenu dans la fonction « deplacer() » avant le code behind.

J’ai testé avec le code suivant, mais le javascript ne s’exécute pas :

Code :

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

<asp:Button ID="Button" runat="server" OnClientClick="deplacer()" OnClick="Button_Click" />

Et si je modifie le « OnClientClick » comme ci-dessous, alors le javascript s’exécute très normalement, mais le code behind appelé dans « Button_Click » n’est pas lancé :

Code :

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

<asp:Button ID="Button" runat="server" OnClientClick="deplacer(); return false" OnClick="Button_Click" />

Merci d’avance pour votre aide.

[jopopmk]

Salut,

le passage à l'event server ne se fait que si le JS de OnClientClick retourne "true".

[lionel0068]

C'est bien que ce que je pensais avoir compris, mais alors comment exécuter du code javascript puis du code behind ensuite ?

[jopopmk]

Si ta fonction JS laisse toujours passer (il ne sert pas de confirmation/test) alors à la place du "return false;" après son l'appel tu mets un "return true;".
Sinon tu t'arranges pour que ta fonction renvoie true/false selon tes tests et tu fais un "return mafonction();"
Explication par l'exemple (la fonction de base Confirm() renvoie true/false selon si l'on click sur ok/cancel de la dialogbox) :

Code :

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

<asp:Button id="btnDelete" runat="server" OnClientClient="return Confirm('ar iou chour ?');" OnClick="btnDelete_Click" />

[lionel0068]

Ma fonction laisse toujours passer.
Le problème c’est que sans rien ou avec « return true » le code JS de la fonction ne s’exécute pas ou plus exactement très mal (normalement la fonction doit avoir pour effet de déplacer « Button1 » lentement suivant plusieurs positions, mais on aperçoit simplement un mouvement très rapide).

Voici le code :

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
<style>        
        #Button1 {
            position: absolute;
            width: 100px;
            left: 0px;
            top: 0px;
        }
 
        #Button2 {
            position: absolute;
            width: 100px;
            left: 100px;
            top: 0px;
        }
</style>
 
<script language="javascript" type="text/javascript">
        function deplacer() {
            pos1();
            setTimeout("pos2()", 1000);
        }
 
        function pos1() {
            document.getElementById("Button1").style.top = "100px";
        }
 
        function 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()" OnClick="Button2_Click" />

[jopopmk]

Je suppose que le code que tu me présentes est un "résumé" de ton vrai JS, nop ?
Parce que là tu fais juste 2 sauts de 100px, ça risque pas d'être fluide.
Ce que tu cherches à faire c'est de passer côté server uniquement quand ton Button1 a fini son parcours ?

[lionel0068]

Oui j’ai mis ce petit code pour simplifier, mais en réalité il y aura une dizaine de positions pour lesquelles je réglerai la fluidité à la fin et ce déplacement ne concernera pas qu’un seul bouton mais plusieurs composants du site.
Mais ce petit exemple permet de voir ce qui devrait se produire (si on met « return false ») et ce qui se produit en réalité et qui ne correspond pas du tout à l’effet voulu (si on met « return true »).

Oui exactement je souhaite passer côté serveur uniquement une fois que le Button1 a fini son parcours (donc le JS terminé).

[jopopmk]

Le souci c'est que setTimeout/setInterval va lancer le code dans un nouveau thread, du coup l'appel au server sera fait avant de passer à travers toutes tes fonctions.
Et en Javascript il n'existe pas de wait/sleep qui pourrait te permettre de rester dans le thread principal.
Du coup une solution possible serait de ne pas utiliser directement l'event OnClick d'ASP.NET mais de l'appeler uniquement lorsque ta dernière fonction JS a fini.

NB : tu devrais plutôt faire un setInterval qui incrémente les positions, ça t'éviterait d'écrire x fonctions.

[lionel0068]

OK merci pour cette réponse, j’ai compris d’où vient le problème.

Mais comment appeler une méthode du code behind sans utiliser l’évènement « OnClick » d’ASP.Net ?

[jopopmk]

La solution propre c'est de faire ça avec les ScriptManager/WebMethod (un exemple ici).
Une solution simple, un poil moins propre, consiste à ajouter un autre Button avec display=none (càd invisible) et d'appeler simplement sont event click (demander à google pour plus de précision).

[Arno_94]

Salut,

Effectivement, pour appeler une méthode code behind, tu peux utiliser des webmethod (il suffit de décorer une méthode dans ta page, solution simple mais pas forcément très jolie), un handler dédié (ashx) ou un web service (ASMX, WCF ou Web Api).

Mais si j'interviens, c'est surtout parce que ton code JS me fait mal

Je te recommande d'utiliser jQuery et sa fonction animate. Elle est ultra simple à utiliser et te donnera une fluidité à toute épreuve car très personnalisable. En outre, tu pourras lui coller des effets d'animation, le tout en une seule ligne. http://api.jquery.com/animate/

Bon courage

[lionel0068]

J'ai consulté le lien sur les webmethod et celui sur jquery, les 2 sont intéressants et je vais pouvoir me débrouiller avec ça maintenant.
Merci pour vos réponses.