無法使ASP.NET控件按鈕與JQuery淡出

Question

我有一個足夠簡單的問題：我有一個ASP.NET控件按鈕，我想讓它淡出，然後調用一些函數（如警報），使用JQuery的。以下是我迄今爲止：

ASP代碼的按鈕：

<div id="begin"> 
     <span id="startButtonSpan"> 
      <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/> 
     </span> 
    </div> 

的JavaScript：

function startButtonClick() 
{ 
    $("#startButtonSpan > input").fadeOut(500, callAlert()); 
} 

function callAlert() 
{ 
    alert("Made it here..."); 
} 

當我按一下按鈕，警報顯示，但該網頁不甚至似乎嘗試執行淡出。當我關閉警報時，按鈕仍然在那裏，盯着我。

任何人都可以看到任何錯誤或沒有人有任何建議，我可能如何能夠實現預期的目標，淡出我的按鈕？ Fadeout實際上只是我測試是否可以使用jQuery來操作ASP控件的方法，所以不僅僅是簡單的fadeOut，這是我試圖學習如何做到這一點。

我想一個稍微簡單的jQuery呼叫使用下面的代碼，但它似乎並沒有工作之一：

ASP部分：

<div id="begin"> 
     <span id="startButtonSpan"> 
      <asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/> 
     </span> 
    </div> 

    <div id="jQueryTest" style="display:none;"> 
     Block for testing jQuery. 
     <h1 id="testMessage">Child element for the ASP div.</h1> 
    </div> 

的Javascript部分：

function startButtonClick() 
{ 
    $("#jQueryTest").css("display", "block"); 
    $("#jQueryTest").show(); 
} 

對於這個例子，文本顯示，但它立即消失。

任何關於我可能會做錯什麼的幫助或建議將不勝感激。

Answer 1

你的代碼是否正常（儘管這裏應該考慮其他答案），但是你的按鈕正在回發到服務器，並且你的瀏覽器沒有足夠的時間來呈現淡化效果。

要測試此操作，請將return false;添加到OnClientClick屬性中。這當然會取消您操作的服務器上，但你會獲得淡入淡出效果：

<asp: Button ... OnClientClick="startButtonClick();return false;"></asp:Button> 

要解決這一點，還是提交您的要求，您可以嘗試使用ASP.NET __doPostBack方法在JavaScript

ASP.NET：

<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick(this);return false;"/> 

的JavaScript：

function startButtonClick(button) 
{ 
    $("#startButtonSpan > input").fadeOut(500, function(){__doPostBack(button.name, "")}); 
} 

__doPostBack方法有兩個參數：正在執行回發的控件的名稱和可用於在服務器上發送更多信息的回發參數。在asp:Button的情況下，按鈕的名稱應該足以發送請求，而不會出現問題。

使用此技術，您將淡化客戶端上的按鈕並觸發服務器上的操作。我不能保證這個確切的代碼可以工作（我現在無法訪問開發環境），但你應該明白。

Answer 2

使用該類作爲選擇器$('.startButton')而不是ID，因爲ASP.Net控件在通過追加其控制信息進行呈現時動態更改其ID。

$(".startButton").fadeOut(500, callAlert); 

或者，如果你是堅定的關於使用ID，這裏是另一種方式來處理選擇，

$("#<%=startButton.ClientID %>") 

或者，正如雅各his answer建議，你可以ClientIDMode="Static"，但這個作品只有當您的應用程序是.Net 4.0或更高版本。

此外，使用的classCssClass代替

<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" /> 

Answer 3

第一個例子具有2個問題。

你應該寫

$("#startButton").fadeOut(500, callAlert); 

，而不是

$("#startButton").fadeOut(500, callAlert()); 

2.對於ASP.NET必須設置的ClientIDMode = 「靜態」 ortherwise ASP 。網絡會改變你的ID。

<asp:Button ID="startButton" ClientIDMode="Static" ... OnClientClick="startButtonClick()"/> 

Answer 4

如果我能，我想提供另一種答案對於那些使用MasterPages並查找與內容控制工作時，你不能總是用$("#<%= SomeContentControl.ClientID %>")。

我做的是設置在母版ID在我Init()這樣的：

protected void Page_Init(object sender, EventArgs e) 
{ 
    // this must be done in Page_Init or the controls 
    // will still use "ctl00_xxx", instead of "Mstr_xxx" 

    this.ID = "Mstr"; 
} 

然後，你可以做這樣的事情與你的jQuery：

var masterId = "Mstr", 
    $startButton = getContentControl("startButton"), 
    $message = $("#jQueryTest"); 

function getContentControl(ctrlId) 
{ 
    return $("#" + masterId + "_" + ctrlId); 
} 

function hideStartButton() 
{ 
    $startButton 
     .stop(true, true) 
     .fadeOut("slow", showMessage); 
} 

function showMessage() 
{ 
    $message 
     .stop(true, true) 
     .fadeIn("slow"); 
} 

$startButton.on("click", hideStartButton); 

這裏是一個jsFiddle有前綴Mstr_已被插入，就像ASP.NET呈現它一樣。