close

PostBack前讓按鈕失效,防止使用者在PostBack時再去按一次

弟一種方式用__doPostBack的方式:

在Button按下去時呼叫以下的JavaScript
this.disabled=true;
__doPostBack('btn_welkin','myparam');

然後在頁面的Form裡面加入以下
(也可以拉一個LinkButton就會自動出現)
<input type="hidden" name="__EVENTTARGET"
id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT"
id="__EVENTARGUMENT" value="" />

 假設用的Form的id是form1,所以

<script type="text/javascript">
    function __doPostBack(eventTarget, eventArgument) 
{
    if (!document.form1.onsubmit || (document.form1.onsubmit() != false))
    {
        document.form1.__EVENTTARGET.value = eventTarget;
        document.form1.__EVENTARGUMENT.value = eventArgument;
        document.form1.submit();
    }
}
</script>

//如果頁面上有放驗證控制項的話就用這樣判斷,驗證沒通過就不DiableButton
if (Page_IsValid != null && Page_IsValid == true) { 呼叫程式}

弟二種方式是讓Button還是可以按,只是按了也沒效果
//CSS
.disableButton
{
     font-size: x-small;
     color: #8E8E8E;
     font-family: 新細明體;
     cursor:wait;
}
 
//讓按鈕在POSTBACK時,按它的話不會在POSTBACK
function myDisableButton(obj)
{
     obj.className = "DisableButton";
     obj.value = "Wait..";
     obj.onclick = Function("return false;");
     return true;
}

呼叫myDisableButton(this);就可

 

另外是最新的補充們

// 先把按鈕變成不能按再發送要求出去,防止使用者一直按
function DisableAndPostBack(myObject)

 // 檢查頁面上有沒有放驗證控制項
 if ( typeof(Page_ClientValidate) == 'function' )
 {
  // 這邊會再作一次驗證
  if ( ! Page_ClientValidate() )
  {
   return false;
  }
  else
  {
   myObject.disabled=true;__doPostBack(myObject.id,'');
  }
 }
 else
 {
  myObject.disabled=true;__doPostBack(myObject.id,'');
 }
}

除了.Net Framework 1.1以外的asp.net
(我是拿.Net Framework 4.0試以下程式的)

把asp的button的CausesValidation="false"
onclick="cmdInsert_Click"設成呼叫CodeBehine的函式
OnClientClick="alert('哈哈');"
UseSubmitBehavior="False" 這行會讓input的type變成button而不是submit
且會自己加上__doPostBack這個呼叫式

以上這段只要將OnClientClick改成先用Page_ClientValidate()來驗證頁面上的
驗證控制項有沒有過,然後再呼叫this.disabled=true,最後她會自己呼叫他的
__doPostBack函式,最終結果就可達到防止使用者重複按那個按鈕

 

還有這邊有一些JQuery的功能更能達到更酷的效果
http://jquery.malsup.com/block/#demos

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 welkingunther 的頭像
    welkingunther

    式門遁甲

    welkingunther 發表在 痞客邦 留言(0) 人氣()