天天看點

js觸發asp.net的Button的Onclick事件

在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腳本

如果要輸入框和button控件是在web控件裡的,就需要特别注意:

控件中的button控件生成的html代碼:

__doPostBack中用到的是input按鈕的name屬性,web控件中button,在生成的html代碼裡會加上控件的ID,是以傳遞的 button名稱不要寫錯了。

這是我測試的時候用到的代碼:

繼續閱讀