自定义Button防止重复提交

由于网速问题，用户总是迫不及待的多次点击提交按钮，从而造成多次提交。以下通过自定义Button控件，来解决此问题。

原理：点击按钮后，通过设置其disabled属性为true来达到目的。

自定义Button控件核心代码：

01
protected override void AddAttributesToRender(HtmlTextWriter writer) 

02
{ 

03
    System.Text.StringBuilder ClientSideEventReference = new System.Text.StringBuilder(); 

04
  
05
    //是否实现页面验证 

06
    if (((this.Page != null) && this.CausesValidation) && (this.Page.Validators.Count > 0)) 

07
    { 

08
        ClientSideEventReference.Append("if (typeof(Page_ClientValidate) == 'function'){if (Page_ClientValidate() == false){return false;}}"); 

09
    } 

10
  
11
    //是否提示提交 

12
    if (this.ShowMessageBox) 

13
    { 

14
        ClientSideEventReference.Append("if (!confirm('" + this.WarningText + "')){return false}"); 

15
    } 

16
  
17
    //是否使用Button的OnClientClick属性进行js验证 

18
    if (this.OnClientClick != "") 

19
    { 

20
        ClientSideEventReference.Append("if(!"+ OnClientClick +") { return false;}"); 

21
    } 

22
  
23
    ClientSideEventReference.AppendFormat("this.value = '{0}';", (string)this.ViewState["afterSubmitText"]); 

24
    ClientSideEventReference.Append("this.disabled = true;"); 

25
     
26
      
27
    ClientSideEventReference.Append(this.Page.ClientScript.GetPostBackEventReference(this, string.Empty)); 

28
  
29
    writer.AddAttribute(HtmlTextWriterAttribute.Onclick, ClientSideEventReference.ToString(), true);             

30
    base.AddAttributesToRender(writer); 

31
}

使用自定义Button范例核心代码：

01
<PRE class=brush:csharp><script type="text/javascript"> 

02
        function Validate() 

03
        { 

04
            var txt = document.getElementById('<%=txtContext.ClientID %>'); 

05
            if(txt.value == "") 

06
            { 

07
                alert('文本框不能为空!'); 

08
                txt.focus(); 

09
                return false; 

10
            } 

11
              
12
            return true; 

13
        } 

14
</script> 

15
<cc1:ClickOnceButton ID="btnAdd" runat="server" Text="提交" OnClick="btnAdd_Click" OnClientClick="Validate()" /> 

16
</PRE> 

17
<STRONG>注意事项</STRONG>：如果通过设置OnClientClick属性来进行验证时，OnClientClick属性所对应的属性值即：js函数不能带符号“；”<BR> Example：错误写法： OnClientClick="Validate();"  正确写法： OnClientClick="Validate()"

　美中不足：查看页面源码是发现有两个onclick事件（如下），OnClientClick属性对应的onclick事件没有起到作用。望路过高手提出解决意见！

`1`	`<input onclick="if(!Validate()) { return false;}this.value = '正在提交，请稍候...';this.disabled = true;__doPostBack('btnAdd','')"` `type="submit"` `name="btnAdd"` `value="提交"` `onclick="Validate();"` `id="btnAdd"` `/>`

源码下载

posted on 2010-07-06 09:04 代岳强阅读(248) 评论(0) 编辑收藏举报