Animations/Transitions annulé par "onserverclick"

D'abord les bonnes nouvelles:Animations/Transitions annulé par "onserverclick"

sourcecode: http://jsfiddle.net/VWBN4/680/

Je suis en utilisant les boutons normaux HTML dans cet exemple au lieu de asp: boutons juste pour jsFiddle. Normalement, je dois utiliser des éléments ASP pour lire leurs valeurs dans le code C# derrière.

Comme vous pouvez le voir, j'ai un bouton qui change de couleur et de taille après l'événement click. C'est exactement ce que je veux avoir.

Maintenant les mauvaises nouvelles:

Comme vous pouvez le voir, je définis onserverclick="testfunc" pour mon bouton et j'ai obtenu un code derrière:

protected void btnStatus_Click(object sender, EventArgs e) 
{ 
    //some functions like getting parameters from input, saving inputs anywhere, .... 
}

Et maintenant, le problème principal:

Après la fin de l'événement onserverclick, l'ensemble du site sera rafraîchi, mes animations/transitions sont annulées et le bouton css classe i s réinitialiser.

Je suis à la recherche d'une bonne méthode, pour effectuer mon onserverclick pour faire des choses de fond sans interférer mon client, les animations/transitions côté client et d'autres choses.

Merci de

Source

2017-08-15 maSu

Avez-vous essayé d'utiliser le panneau de mise à jour ajax. Mettez les choses que vous voulez mettre à jour dans le panneau de mise à jour et laissez le bouton à l'extérieur. Puis déclenchez la mise à jour du panneau de mise à jour en utilisant le bouton de l'extérieur. Vérifiez ce détail sur le panneau de mise à jour en déclenchant http://www.markerstudio.com/uncategorized/2008/03/ajaxnet-update-panel-different-ways-of-triggering-updates/. Une autre façon est d'utiliser jquery ajax appel sur le client cliquez sur le bouton pour faire du travail sur le code côté serveur. –

Oui, j'ai déjà essayé des panneaux de mise à jour. Mais le bouton était toujours dans mon updatepanel. Je veux avoir une sorte d'animation pour le bouton comme un feedback pour l'utilisateur. J'ai donc ajouté le scriptmanager, un updatepanel, un contenttemplate et deux boutons dans le contenttemplate. Peut-être que je manque quelque chose d'autre ?! – maSu

J'ai ajouté le code comme réponse. Veuillez le vérifier sur une page de test aspx car c'est pour vous donner une idée de comment utiliser le panneau de mise à jour pour cela. –

Une solution je pense est d'utiliser le panneau de mise à jour Ajax. En utilisant son attribut updatemode="conditional" et déclenche le bouton (mis à l'extérieur du panneau de mise à jour) en question, vous pouvez réaliser l'animation avec l'appel de votre code côté serveur et ne pas avoir toute la page à actualiser dans le processus. Vous trouverez ci-dessous un code de test que vous pouvez consulter pour votre solution.

Code HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style> 
    .button { 
     margin: 20px; 
     font-family: inherit; 
     border-style: solid; 
     border-color: #bebebe; 
     border-width: 2px; 
     cursor: auto; 
     font-family: arial; 
     font-size: 17px; 
     text-decoration: none; 
     text-shadow: 0px 1px 0px #2f6627; 
     text-align: center; 
     padding: 15px 30px; 
     height: inherit; 
     width: 220px; 
     display: inline-block; 
     position: relative; 
     background-color: #e9e9e9; 
     color: #252525; 
     border-radius: 0px; 
     user-select: none; 
     transition: 0.7s; 
    } 

    .active { 
     background-color: #00b2e2; 
     color: white; 
     border-style: solid; 
     border-color: #008fb6; 
     border-width: 2px; 
     transform: scale3d(1.1,1.1,1); 
    } 
</style> 
</head> 
<body> 

<form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
    <div> 
     <script> 
      function toogleClass(ele, class1) { 
       var classes = ele.className; 
       var regex = new RegExp('\\b' + class1 + '\\b'); 
       var hasOne = classes.match(regex); 
       if (hasOne) { 
        ele.className = classes.replace(class1, ''); 
       } 
       else { 
        ele.className = classes + ' ' + class1; 
       } 
      } 
     </script> 
     <fieldset style="padding:100px;"> 
      <legend>This is update panel boundary</legend> 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
       <ContentTemplate> 
        <label id="lbl1" runat="server">This is default Text</label> 
       </ContentTemplate> 
       <Triggers> 
        <asp:AsyncPostBackTrigger ControlID="btnStatus" /> 
       </Triggers> 
      </asp:UpdatePanel> 
     </fieldset> 
     <asp:Button runat="server" type="button" ID="btnStatus" class="button" OnClientClick="JavaScript:toogleClass(this, 'active');" Text="Status" OnClick="btnStatus_Click"></asp:Button> 
    </div> 
</form> 
</body> 
</html>

code-behind

protected void btnStatus_Click(object sender, EventArgs e) 
{ 
    lbl1.InnerText = "This is altered Text after postback in update panel"; 
    lbl1.Style.Add("background-color", "red"); 
}

Hope this helps. Codage heureux.

Source

2017-08-15 15:45:09

Merci. Ça marche. J'essaye de créer mon propre site Web depuis ... 2 jours maintenant, donc quelques "bases" manquent. Votre exemple était exactement ce dont j'avais besoin! – maSu

Animations/Transitions annulé par "onserverclick"

Répondre

Questions connexes