動畫/轉換由「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」

回答

相關問題

動畫/轉換由「onserverclick」