本篇博文結合問題背景,介紹了筆者曾經嘗試過的阻止按鈕重覆提交的三種不可行方案,並詳細介紹了一種可行方案。有需要的可以參考下,希望對大家有所幫助。 ...
問題背景:
手頭上的KPI分類評級考核系統,頁面的提交按鈕是用LinkButton或者Button做的。當大量用戶同時線上訪問該站點時,應用程式伺服器出現CPU占用100%的糟糕狀況,頁面會卡住不動,用戶不明情況連續點擊提交按鈕重覆提交,造成資料庫中出現大量的重覆數據。
其實,即便伺服器沒有崩掉,快速頻繁點擊提交按鈕,也會出現重覆提交的問題。
嘗試過:1)在提交按鈕的點擊事件里設置提交按鈕的Enabled屬性 Enabled = false; ,這個屬性設置在未拿到新頁面前是無效的,問題依然存在;
2)在客戶端事件里js設置提交按鈕的disabled disabled = true; ,此時提交按鈕的服務端事件將不再執行;
3)也試過點擊提交按鈕後馬上彈出div遮罩層,效果也不理想,問題依然存在;
4)加個HTML按鈕,並將提交按鈕隱藏,點擊HTML按鈕提交,在HTML按鈕的客戶端事件里使HTML按鈕不可用(阻止重覆提交),再觸發提交按鈕的伺服器事件,頁面回發後HTML按鈕自動變得可用。此法可行,如有不足或有更好的方法,還望大家不吝賜教。
解決思路:
1)除了提交按鈕LinkButton(ID為lbtSave)外,添加一個HTML按鈕
<input type="button" id="htmlSave" value="提交" onclick="SingleSubmit()" />
2)隱藏lbtSave,註意不能通過設置lbtSave的Visible屬性為False來實現隱藏,否則lbtSave的伺服器事件lbtSave_Click將不能觸發;可行辦法:用 <div style="display:none;"></div> 包含lbtSave來實現隱藏或者直接用 #lbtSave{display:none;} 來實現隱藏
3)<head></head>標簽中新增js代碼,如下:
1 <script type="text/javascript"> 2 function SingleSubmit() 3 { 4 document.getElementById("htmlSave").disabled = true; 5 document.getElementById("lbtSave").click(); 6 } 7 </script>
4)點擊htmlSave,執行SingleSubmit()方法,使htmlSave不可用(阻止重覆提交),觸發lbtSave_Click事件
5)頁面回發後,也就是lbtSave_Click事件執行完後,htmlSave自動變得可用。
為了模擬真實情景,在lbtSave_Click事件中增加5s的線程休眠 Thread.Sleep(5000); 。