首頁 > web前端 > js教程 > js觸發asp.net的Button的Onclick事件應用_javascript技巧

js觸發asp.net的Button的Onclick事件應用_javascript技巧

WBOY
發布: 2016-05-16 17:42:22
原創
1554 人瀏覽過

在asp.net引入事件驅動之後,在一個頁面上很容易解決多個按鈕觸發不同事件的問題,避免了在asp中需要多個form或透過js腳本來控制的麻煩。

asp.net帶來便利的同時,也帶來一個問題。在實際應用程式中一個頁面存在多個按鈕的情況並不多。使用者習慣在輸入框輸入內容之後,直接按回車就提交表單了。由於asp.net採用的是事件驅動模式,所以預設使用者按回車並沒有觸發按鈕的onclick事件。使用者按回車也不是沒有提交表單,透過httpwath可以看到,實際上頁面表單是提交到了form下的action頁面,只不過沒有觸發onclick事件而已。

在asp.net事件驅動模式下面,要實作透過回車來觸發事件,必須要藉助js腳本來實作。
在asp.net的aspx頁面中,form的代碼:

複製代碼 代碼如下:



但在訪問頁面的源代碼中可以看到:
複製程式碼 程式碼如下:



所以在輸入框預設直接按回車,其實就是把表單提交到了form的action對應的頁面,而並沒有觸發任何事件。
奇怪的地方:當一個aspx頁面上沒有使用web控件的時候,在輸入框裡按回車,預設是不會觸發任何一個button按鈕的onclick事件;但當頁面上有使用web控件的時候,在輸入框裡按回車,預設會觸發第一個button的onclick事件。 【這裡的第一指頁面程式碼中最先出現的button控件,包括web控件內的button控件】
下面說如何透過js觸發button按鈕的onclick事件。
預設的button控件,在html中的程式碼是這樣的:
複製程式碼 程式碼如下:



實際上點擊這個button觸發的onclick事件調用了一個js腳本:__doPostBack(eventTarget, eventArgument)
button 控制項有個屬性:UseSubmitBehavior,預設是true,當你修改為false的時候,再去看html的源代碼,就能清楚的看到調用的js腳本函數。
複製程式碼 代碼如下:



產生的js腳本:
複製程式碼 程式碼如下:



了解了這塊內容,要處理輸入框按回車觸發button的onclick事件就簡單的多了,就是截獲輸入框按回車的這個動作,然後透過js呼叫__doPostBack這個函數就OK了輸入框:
複製程式碼 程式碼如下:




js腳本
複製代碼 程式碼如下:

function KeyDown(btn) {
if (event.keyCode != 13) //按鍵不是enter鍵return; else //按鍵是enter鍵try {
__doPostBack(btn, '');
return false; catch (e) {
alert(e);
return; }
}

如果要輸入框和button控制項是在web控制項裡的,就需要特別注意:
控制項中的button控制項產生的html代碼:
複製代碼 代碼如下:



__doPostBack中用到的是input按鈕的name屬性,web控制項中button,在產生的html程式碼裡會加上控制項的ID,所以傳遞的button名稱不要寫錯了。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板