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

即使使用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. 2019/12/21(六)~2019/12/22(日):演化式設計:測試驅動開發與持續重構 第七梯次(台北)
  2. 2020/1/4(六)~2020/1/5(日):Clean Coder:DI 與 AOP 進階實戰 第三梯次(台北)
  3. 2020/02/08(六):【針對遺留代碼加入單元測試的藝術】 第八梯次(台北)
  4. 2020/02/09(日):【極速開發+】 第九梯次(台北)
  5. 2020/02/28(五)~2020/3/1(日) C#進階設計-從重構學會高易用性與高彈性API設計 第三梯次(台北)

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