Animations/Transitions 被 "onserverclick" 取消

Question

第一个好消息：

我在这个例子中使用普通的 HTML 按钮而不是 asp:buttons 只是为了 jsfiddle。通常我必须使用 asp 元素来读取它们在后面的 c# 代码中的值。

如您所见，我有一个按钮，它在点击事件后改变了它的颜色和大小。这正是我想要的。

现在是坏消息：

如您所见，我为我的按钮定义了 onserverclick="testfunc" 并且我得到了一些代码：

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

现在的主要问题是：

onserverclick事件结束后，整个网站会刷新，我的animations/transitions取消，按钮的cssclass重置

我正在寻找一个好的方法来执行我的 onserverclick 做一些后台工作而不干扰我的客户端、客户端 animations/transitions 和其他东西。

谢谢:)

Answer 1

我认为的一个解决方案是使用 Ajax 更新面板。使用它的属性 updatemode="conditional" 并触发有问题的按钮（放在更新面板之外），您可以在调用服务器端代码的同时实现动画，并且在此过程中不需要刷新所有页面。下面是一个测试代码运行，您可以查看您的解决方案。

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>

代码隐藏

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

希望这对您有所帮助。快乐编码。

Animations/Transitions 被 "onserverclick" 取消

Animations/Transitions canceled by "onserverclick"

javascript

css

asp.net

code-behind