“onserverclick”取消的动画/过渡答案

【问题标题】：Animations/Transitions canceled by "onserverclick"“onserverclick”取消的动画/过渡
【发布时间】：2018-01-23 13:35:48
【问题描述】：

首先是好消息：

源代码： http://jsfiddle.net/VWBN4/680/

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

如您所见，我有一个按钮，在单击事件后会更改其颜色和大小。这正是我想要的。

现在是个坏消息：

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

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

现在主要问题是：

onserverclick事件结束后，整个网站会被刷新，我的动画/过渡被取消，按钮的css类被重置。

我正在寻找一种好方法，执行我的onserverclick 来做一些背景工作，而不会干扰我的客户端、客户端动画/过渡和其他内容。

谢谢:)

【问题讨论】：

您是否尝试过使用 ajax 更新面板。将您要更新的内容放在更新面板中，然后将按钮留在其中。然后使用外部按钮触发更新面板更新。检查更新面板触发 markerstudio.com/uncategorized/2008/03/… 的详细信息。另一种方法是在客户端单击按钮时使用 jquery ajax 调用来处理服务器端代码。
是的，我已经尝试过更新面板。但是该按钮始终在我的更新面板中。我想为按钮制作某种动画作为用户的反馈。所以我在内容模板中添加了脚本管理器、更新面板、内容模板和两个按钮。也许我错过了其他东西？！
我已添加代码作为答案。请在测试 aspx 页面上查看它，因为它可以让您了解如何为此使用更新面板。
谢谢你的代码示例:)

标签： javascript css asp.net code-behind

【解决方案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");
}

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

【讨论】：

谢谢。它正在工作。我正在尝试创建自己的网站，因为... 2 天了，所以缺少一些“基础知识”。你的例子正是我所需要的！