gpt4 book ai didi

javascript - 动画/过渡被 "onserverclick"取消

转载 作者:行者123 更新时间:2023-11-28 03:11:21 25 4
gpt4 key购买 nike

首先是个好消息:

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

我在这个例子中使用普通的 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 事件完成后,整个网站将被刷新,我的动画/过渡被取消,按钮的 css 类被重置。

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

谢谢:)

最佳答案

我认为一种解决方案是使用 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");
}

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

关于javascript - 动画/过渡被 "onserverclick"取消,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45696106/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com