Animationen/Transitions abgesagt von "OnServerClick"

Die gute Nachricht zuerst:Animationen/Transitions abgesagt von "OnServerClick"

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

ich anstelle von asp in diesem Beispiel normale HTML-Tasten: Tasten nur für jsfiddle. Normalerweise muss ich asp-Elemente verwenden, um ihre Werte in dem C# -Code dahinter zu lesen.

Wie Sie sehen können, habe ich eine Schaltfläche, die die Farbe und Größe nach dem Klick-Ereignis ändert. Es ist genau das, was ich haben möchte.

Jetzt die schlechte Nachricht:

Wie Sie sehen können, definiert i onserverclick="testfunc" für meine Taste und ich habe einige Code hinter:

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

Und jetzt das Hauptproblem:

Nachdem das onserverclick Event beendet ist, wird die gesamte Webseite aktualisiert, meine Animationen/Übergänge werden abgebrochen und die CSS-Klasse des Buttons i s zurückgesetzt.

Ich bin auf der Suche nach einer guten Methode, um meine onserverclick zu tun, einige Hintergrund-Sachen zu tun, ohne meinen Client, die Clientside Animationen/Übergänge und andere Sachen zu stören.

Thanks :)

Quelle

2017-08-15 maSu

Haben Sie versucht, mit Ajax Update Panel. Platzieren Sie Ihre Objekte, die Sie aktualisieren möchten, im Aktualisierungsfenster und lassen Sie die Schaltfläche nicht mehr gedrückt. Dann lösen Sie das Update-Update mit dem Button von außen aus. Überprüfen Sie dieses Detail im auslösenden Bedienfeld. Http://www.markerstudio.com/uncategorized/2008/03/ajaxnet-update-panel-different-ways-of-triggering-updates/. Eine andere Möglichkeit besteht darin, den jQuery-Ajax-Aufruf beim Klicken auf die Schaltfläche zu verwenden, um die Arbeit am serverseitigen Code auszuführen. –

Ja ich habe updatepanels bereits versucht. Aber der Button war immer in meinem Updatepanel. Ich möchte eine Art Animation für den Button als Feedback für den Benutzer haben. Also habe ich den Scriptmanager, ein Updatepanel, ein contenttemplate und zwei Buttons in das contenttemplate eingefügt. Vielleicht fehlt mir etwas anderes ?! – maSu

Ich habe Code als Antwort hinzugefügt. Bitte überprüfen Sie es auf einer Test-ASPX-Seite, um Ihnen eine Idee zu geben, wie Sie das Update-Panel dafür verwenden. –

Eine Lösung, die ich denke, ist Ajax-Update-Panel zu verwenden. Mit seinem Attribut updatemode="conditional" und Triggern auf die betreffende Schaltfläche (außerhalb des Aktualisierungsfensters platzieren) können Sie die Animation zusammen mit dem Aufruf Ihres serverseitigen Codes aufrufen und haben nicht die gesamte Seite, die dabei aktualisiert werden muss. Im Folgenden finden Sie einen Testcode, den Sie für Ihre Lösung ausprobieren können.

HTML-Code

<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"); 
}

Hoffnung, das hilft. Glückliche Kodierung.

Quelle

2017-08-15 15:45:09

Danke. Es funktioniert. Ich versuche seit 2 Tagen meine eigene Website zu erstellen, daher fehlen einige "Grundlagen". Ihr Beispiel war genau das, was ich brauchte! – maSu

Animationen/Transitions abgesagt von "OnServerClick"

Antwort

Verwandte Themen