Question

首先是好消息：

我在这个例子中使用普通的HTML按钮而不是仅仅为jsfiddle的asp：按钮。通常我必须使用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来做一些背景资料，而不会干扰我的客户端，客户端动画/转换和其他东西。

谢谢：）

Answer 1

我认为一个解决方案是使用Ajax Update面板。使用它的属性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");
}

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

动画/过渡由＆＃34; onserverclick＆＃34;取消

1 个答案: