[ASP.Net] 用 Javascript 防止表單被重複 Submit 送出

相信很多人都看過這種畫面:

要防止使用者重覆送出資料，「HTML 前端」常見的處理方式是在使用者按下「送出 (submit)」鍵時，直接把按鈕 disabled 設為 true。

當然這邊說的 disabled 是指 HTML 畫面的按鈕 disabled 屬性 ，而非 .Net 按鈕元件的 diabled。

絕大部份的 Web Scripts 做這件事易如反掌，但是在 ASP.Net 就似乎不是那麼簡單了，因為 ASP.Net 的架構是透過層層的 submit 來傳遞參數，如果 disabled 設為 true，也代表著程式會被中斷掉。

因此如果要達到某個按鈕按下去，而且立刻在畫面上呈現 disabled 狀態，可以在 Page_Load 時，設定按鈕的事件:

btnSubmit.Attributes("onclick") =
"javascript:this.disabled=true;" +
GetPostBackEventReference(btnSubmit).ToString()

重點在於 GetPostBackEventReference(btnSubmit).ToString() 會在畫面端轉為對應的 Javascript PostBack 函式，如:

__doPostBack(btnSubmit,'')

這樣就能達到使用者 submit 時，按鈕無法再按第二次的功能了。

了解這個原理之後，也可以把這些動作寫在畫面端 (.aspx) 裡面，讓畫面端跟程式端的邏輯更為清楚。