关于Asp.Net中避免用户连续屡次点击按钮，重复提交表单的处理

时间 2019-11-19

标签关于 asp.net asp 避免用户连续屡次点击按钮重复提交表单处理栏目 ASP 繁體版

原文原文链接

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

客户就是上帝,他们也不是有意要给你的系统形成破坏,这么作的缘由很大一部分是由于网络慢,点击一个操做以后,系统响应慢,因而点击屡次.若是咱们遇到这种状况,css

也许是同样的操做方法,因此解决问题才是王道.html

废话很少说,直接切入正题.java

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

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

这样遮罩层下面的内容被屏蔽,用户就没法进行鼠标的屡次点击操做.网络

优势:一个好的遮罩层具备很美观的UI感觉,而且相对下降一点用户等待服务器响应的枯燥度.测试

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

遮罩层代码再也不给出,能够在网上搜索使用.spa

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

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<script type="text/javascript">
    //记录是否重复提交表单数据
    var repeatFlag = false;
    function CheckRepeatClick() {
        if (repeatFlag == false) {
            repeatFlag = true;
            return true;
        }
        else {
            alert("数据处理中,请稍候...");
            return false
        }
    }
</script>
<body>
    <form id="form1" runat="server">
    <div>
         这只是个测试网页
        <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" OnClientClick="return CheckRepeatClick();"/>

<asp:LinkButton ID="lkbtnOK" runat="server" onclick="lkbtnOK_Click" OnClientClick="return CheckRepeatClick();" >测试LinkButton按钮</asp:LinkButton>
    </div>
    </form>
</body>
</html>
后台代码:
 
        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" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<script type="text/javascript">
    //记录是否重复提交表单数据
    var repeatFlag = false;
    function CheckRepeatClick() {
        if (repeatFlag == false) {
            repeatFlag = true;
            return true;
        }
        else {
            alert("数据处理中,请稍候...");
            return false
        }
    }
</script>
<body>
    <form id="form1" runat="server">
    <div>
         这只是个测试网页
        <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" />
        <asp:LinkButton ID="lkbtnOK" runat="server" onclick="lkbtnOK_Click" >测试LinkButton按钮</asp:LinkButton>
    </div>
    </form>
</body>
</html>
后台代码:

        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生成的客户端页面中，是<a>标签，尝试使用diplay等进行修饰，都没有成功。若是有哪位大大有好的方法，不妨告知。
注意:前台页面的Page中要加上这句话 EnableEventValidation="false" 缘由你懂得