如何從ASP按鈕調用JQuery？

我一直試圖從Button1調用JQuery代碼，但每當我點擊按鈕什麼都沒有發生。我懷疑這裏缺少一些東西。如何從ASP按鈕調用JQuery？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"/> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"/> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#Button1").click(function() { 
      alert("Hello"); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div runat="server"> 
<asp:Button ID="Button1" runat="server" Text="Button" />  
    </div> 
    </form> 
</body> 
</html>

請幫助我，因爲我是新來的Jquery與ASP

更新！渲染HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 

</title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"/> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#B1").click(function() { 
       alert("Hello"); 
      }); 
     }); 
    </script> 
</head> 
<body> 

    <form name="form1" method="post" action="Default.aspx" id="form1" enctype="multipart/form-data"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNzQxODc4NzgPZBYCAgMPFgIeB2VuY3R5cGUFE211bHRpcGFydC9mb3JtLWRhdGEWAgITDzwrAA0AZBgBBQlHcmlkVmlldzEPZ2S859s2HXOd3dMN1a3AFBBA24YTWA==" /> 
</div> 

<div> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLCh8GMCAKl1bK4CQK1qbSRCwKM54rGBgK7q7GGCALWlM+bAgLe7+btDB1tn9tYIpN00SJIvx3i3VxCTOP7" /> 
</div> 


    <input type="submit" name="B1" value="Button" id="B1" /> 

    </form> 

</body> 
</html>

來源

2012-09-08 Ahmed S. Durrani

你爲什麼要包括的jQuery的開發人員和產品版本？ –

你可以嘗試添加類按鈕元素，並找到這DIV方面：

的Javascript：

$(document).ready(function(){ 

    var $context = $('#containerForm').find('form'); 
    $context.find('.mybutton').bind('click', function (event) { 
     alert("Hello"); 
    }); 
});

HTML：

<body> 
    <div id="containerForm"> 
     <form id="form1" runat="server"> 
     <div runat="server"> 
      <asp:Button ID="Button1" runat="server" Text="Button" class="mybutton" />  
     </div> 
     </form> 
    </div> 
</body>

編輯：

，或者找到這個選擇$context.find('input[name*="Button1"]')按鈕元素，使用環境是有更好的表現。

編輯II：

你的代碼工作做好（see this）。您應驗證文件「Scripts/jquery-1.4.1.min.js」是否加載正常，您可能位於與文件夾「Scripts」不在同一級別的路徑中，具體取決於級別或設置項目，是否可以將「Scripts/jquery-1.4.1.min.js」「，但如果您有」/MyProyect/Scripts/jquery-1.4.1.min.js「，則必須小心。

爲了驗證這一點，您可以使用「fiddler」，並找到HTTP狀態代碼400

來源

2012-09-08 19:58:16

還是一樣的，沒有任何事情發生，我檢查了腳本文件夾並在那裏找到了所有'jquery'文件。我正在使用VS 2010. –

你可以把呈現的HTML –

我該怎麼做？我是noob。 –

您已經包括jQuery的每日兩次的標準，精縮版。你不需要兩次包含相同的js庫。另外<script>標籤不能自行關閉。

這裏是正確的做法：

<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      alert("Hello"); 
     }); 
    }); 
    </script> 
</head>

而且由於控制名稱重整ASP.NET，建議使用服務器端的結構，以確保該ID是正確的：

$("#<%= Button1.ClientID %>").click(function() { 
    alert("Hello"); 
});

或使用class selector。

來源

2012-09-08 18:44:00

什麼都沒發生:( –

試試[FireBug]（http://getfirebug.com/） –

可能是您<asp:Button />渲染ID不是Button1但類似ctl00_Button1

試試這個

$(document).ready(function(){ 
    $("#<%=Button1.ClientID %>").click(function() { 
     alert("Hello"); 
    }); 
});

也似乎你正在加載的jQuery兩次，其中的一個已經過壓縮帶寬速度

取出這第一個

<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

離開這個

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

來源

2012-09-08 18:45:57 MikeM

還是一樣... :( –

如何從ASP按鈕調用JQuery？

回答

相關問題