[JavaScript]如何避免頁面重複submit的動作

  • 16313
  • 0
  • 2008-12-16

即使使用AJAX的ModalUpdateProgress,仍無法避免keyboard click按鈕的動作,
透過javascript攔截頁面事件,檢查Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()是否為true,
取消多餘的postback。

在有AJAX control toolkit的輔助後,

為了避免user 在 submit的過程中,重複點選按鈕重複送出click指令,

通常會直接使用ModalUpdateProgress來作page blocker的動作。

可是經過測試之後發現,即使是AJAX的ModalUpdateProgress,仍然有兩個問題。

1.無法block keyboard的動作。

2.在ModalUpdateProgress的ProgressTemplate 浮現之前,仍然可以重複submit。

重複submit很常會影響到資料存取的部分,導致重複新增或新增失敗。

針對這個問題,用了很多奇奇怪怪的手法與網路上的參考,但終於有點不夠完美。

也有參考過ASP.NET魔法學院jeff377大大的在今年3月的文章,

頁面 submit 時鎖定整個頁面的控制項

但面對畫面上有許多局部postback的updatepanel,不太會修改成我需要的結果。

(原始的code會導致form上物件disable沒有還原,我有使用ScriptManager註冊js)

 

後來有同事幫忙找到,根本解決重複AsyncPostBack的方法,只需要註冊一段javascript,在FormLoad,呼叫pageLoad()即可。

function pageLoad()
{           Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(cancelPostBack);
}


function cancelPostBack(sender, args)
{
    if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack())        
    {
        //alert('One postback at a time please');
        args.set_cancel(true);
    }

}

 

 


或許您會對下列培訓課程感興趣:

  1. 2020/09/26(六)~2020/09/27(日):演化式設計:測試驅動開發與持續重構(台北)
  2. 2020/11/07(六):【針對遺留代碼加入單元測試的藝術】(台北)
  3. 2020/11/08(日):【極速開發+】(台北)

想收到第一手公開培訓課程資訊,或想詢問企業內訓、顧問、教練、諮詢服務的,請洽 Facebook 粉絲專頁:91敏捷開發之路