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 id="form1" runat="server">

但在訪問頁面的原始碼中可以看到： 複製代碼 代碼如下:<form name="form1" method="post" action="Default.aspx" id="form1">

所以在輸入框預設直接按斷行符號，其實就是把表單提交到了form的action對應的頁面，而並沒有觸發任何事件。
奇怪的地方：當一個aspx頁面上沒有使用web控制項的時候，在輸入框裡按斷行符號，預設是不會觸發任何一個button按鈕的onclick事件；但當頁面上有使用web控制項的時候，在輸入框裡按斷行符號，預設會觸發第一個button的onclick事件。【這裡的第一指頁面代碼中最先出現的button控制項，包括web控制項內的button控制項】
下面說說如何通過js來觸發button按鈕的onclick事件。
預設的button控制項，在html中的代碼是這樣的： 複製代碼 代碼如下:<input type="submit" name="Button1" value="Button" id="Button1" />

實際上點擊這個button觸發的onclick事件調用了一個js指令碼：__doPostBack(eventTarget, eventArgument)
button 控制項有個屬性：UseSubmitBehavior，預設是true，當你修改為false的時候，再去看html的原始碼，就能清楚的看到調用的js指令碼函數。 複製代碼 代碼如下:<input type="button" name="Button1" value="Button" onclick="javascript:__doPostBack('Button1','')" id="Button1" />

產生的js指令碼： 複製代碼 代碼如下:<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1; function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit(); }
//]]>
</script>

瞭解了這塊內容，要處理輸入框按斷行符號觸發button的onclick事件就簡單的多了，就是截獲輸入框按斷行符號的這個動作，然後通過js調用__doPostBack這個函數就OK了輸入框： 複製代碼 代碼如下:<input name="TextBox1" type="text" id="TextBox1" onkeydown="return KeyDown('Button1');" />
<input type="submit" name="Button1" value="Button" id="Button1" />

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代碼： 複製代碼 代碼如下:<input type="submit" name="WUC11$Button2" value="Button" id="WUC11_Button2" />

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