动画/转换由 “onserverclick”

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

谢谢:)

来源

2017-08-15 maSu

已尝试使用ajax更新面板。把你想要更新的东西放在更新面板中，并将按钮离开它。然后使用外部按钮触发更新面板更新。检查更新面板触发的详细信息http://www.markerstudio.com/uncategorized/2008/03/ajaxnet-update-panel-different-ways-of-triggering-updates/。另一种方法是在客户端使用jquery ajax调用单击按钮在服务器端代码上执行工作。 –

是的，我已经尝试过updatepanels。但按钮总是在我的更新面板。我想为按钮提供某种动画作为用户的反馈。所以我在contenttemplate中添加了scriptmanager，updatepanel，contenttemplate和两个按钮。也许我错过了别的？！ – maSu

我已添加代码作为答案。请在测试aspx页面上查看它，因为它可以让您了解如何使用更新面板。 –

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

希望这有助于。快乐编码。

来源

2017-08-15 15:45:09

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

动画/转换由 “onserverclick”

回答

相关问题