Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦.

客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后,系统响应慢,于是点击多次.如果我们遇到这种情况,

也许是一样的操作方法,所以解决问题才是王道.

废话不多说,直接切入正题.

方法一:在客户端制作一个遮罩层.

即用js和css制作一个纯白色或者黑色的遮罩的div,当客户端点击按钮时,弹出这个div并覆盖在当前用户界面之上,

这样遮罩层下面的内容被屏蔽,用户就无法进行鼠标的多次点击操作.

优点:一个好的遮罩层具有很美观的UI感受,并且相对降低一点用户等待服务器响应的枯燥度.

缺点:遮罩下面的内容,如果用键盘操作,比如Enter键,还是可以操作的哦.(亲,这也是后来测试中才发现的,也许还有更好的遮罩层的代码,能够做到这些吧,我是没有用过).

遮罩层代码不再给出,可以在网上搜索使用.

方法二:用js代码判断重复提交,给出提示并拒绝提交至服务器.

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>  
    
     
          
      
      
           //记录是否重复提交表单数据    var repeatFlag = false;    function CheckRepeatClick() {        if (repeatFlag == false) {            repeatFlag = true;            return true;        }        else {            alert("数据处理中,请稍候...");            return false        }    }    
       
            
        
                  这只是个测试网页        
         
        
       
      
     
    

    
     测试LinkButton按钮          后台代码:          protected void btnOK_Click(object sender, EventArgs e)        {        
    

System.Threading.Thread.Sleep(5000); //这里只是为了模拟后台相应慢的一个动作,替换成你自己的处理逻辑就OK了

        } 效果:当单击OK按钮后,提交请求至服务器，再次单击按钮，则弹出消息"数据处理中，请稍候..."。 对于LinkButton按钮的测试也是同样道理. 代码很简单，不过多说明。 优点：方法一中的缺点在这里得到了弥补。 缺点：方法一的优点这里没有了。 所以，将方法一和方法二同时使用，则相对完美一些啦，哈哈，我就是这么使用的。 方法三：单击按钮后,用js将按钮置为不可用状态,避免用户多次单击. 前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" EnableEventValidation="false" %>  
    
     
          
      
      
           //记录是否重复提交表单数据    var repeatFlag = false;    function CheckRepeatClick() {        if (repeatFlag == false) {            repeatFlag = true;            return true;        }        else {            alert("数据处理中,请稍候...");            return false        }    }    
       
            
        
                  这只是个测试网页        
                 
         
          测试LinkButton按钮    
         
        
    后台代码:
       
      
     
    

        protected void Page_Load(object sender, EventArgs e)        {            this.btnOK.Attributes.Add(" onclick ", ClientScript.GetPostBackEventReference                (btnOK, " Click ") + " ;this.disabled=true; this.value='提交中...'; ");             this.lkbtnOK.Attributes.Add(" onclick ", ClientScript.GetPostBackEventReference                 (lkbtnOK, " Click ") + " ;this.disabled=true; ");        }         protected void btnOK_Click(object sender, EventArgs e)        {            System.Threading.Thread.Sleep(5000); //这里只是为了模拟后台相应慢的一个动作,替换成你自己的处理逻辑就OK了        }         protected void lkbtnOK_Click(object sender, EventArgs e)        {            System.Threading.Thread.Sleep(5000);        }

效果:当单击按钮OK后,按钮本身更改为灰色不可用,并更改文本为"提交中..."，这时候再次单击按钮，无法向服务器发送请求，从而屏蔽了重复提交， 当服务器响应第一次请求完毕后，按钮恢复为可用状态和自己的文本。(对于LinkButton呢，我想说的是，一样可以变成灰色，但是它是可用的，再次 单击，仍然会向服务器发送请求) 优点：直接变成灰色不可用，比起再次单击一下然后给你个提示信息，要友好一些吧。 缺点：对于LinkButton该方法不凑效。 因为在项目中还要使用较多的LinkButton，所以果断放弃了该方法。 因为LinkButton生成的客户端页面中，是标签，尝试使用diplay等进行修饰，都没有成功。如果有哪位大大有好的方法，不妨告知。 注意:前台页面的Page中要加上这句话 EnableEventValidation="false" 原因你懂得