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名稱不要寫錯了。

 

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

 $(function () {
            $("#txtVerificationCode").keydown(function (e) {
                var kCode = e.keyCode || e.charCode;
                if (kCode == 13) {
                    try {
                        window.__doPostBack('btnLogin', '');
                        return false;
                    }
                    catch (e) {
                        alert(e);
                        return false;
                    }
                }
            });
        });