maSu maSu -3 years ago 68
ASP.NET (C#) Question

Animations/Transitions canceled by "onserverclick"

first the good news:


I'm using normal HTML buttons in this example instead of asp:buttons just for jsfiddle. Normally i have to use asp elements to read their values in the c# code behind.

As you can see, i got a button which is changing it's color and size after the click event. It is exactly what i want to have.

Now the bad news:

As you can see, i defined

for my button and i got some code behind:

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

And now the main problem:

After the
event finished, the whole website will be refreshed, my animations/transitions are canceled and the button's css class is reset.

Im looking for a good method, to perform my
to do some background stuff without interfering my client, the clientside animations/transitions and other stuff.

Thanks :)

Answer Source

One solution i think is to use Ajax Update panel. Using it's attribute updatemode="conditional" and triggers to the button (put outside the update panel) in question you can achieve the animation along with calling your server side code and also not have all the page to refresh in the process. Below is a test code i ran that you can check out for your solution.


<html xmlns="">
<head runat="server">
    .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);

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            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;
        <fieldset style="padding:100px;">
           <legend>This is update panel boundary</legend>
           <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                   <label id="lbl1" runat="server">This is default Text</label>
                   <asp:AsyncPostBackTrigger ControlID="btnStatus" />
        <asp:Button runat="server" type="button" ID="btnStatus" class="button" OnClientClick="JavaScript:toogleClass(this, 'active');" Text="Status" OnClick="btnStatus_Click"></asp:Button>


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. Happy Coding.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download