• 设置按钮不可用避免重复提交


     设置按钮不可用,避免重复提交

    编写人:CC阿爸

     

    2015-1-29

     

    今天在这里,我想与大家一起分享如何处理项目中经常出现用户重复提交的情况,为了防止这种情况,最常用的方法就是在用户点击按钮后将该按钮设为不可用,笔者在实际开发当中遇到了多种不同的情况,在此做个小结,以供参考。有兴趣的同学,可以一同探讨与学习一下,否则就略过吧。

    由于刚开始进行的web开发,很多时候使用的为html控件,因此处理起来相当简单

    如:先前开发的报销系统,在提交单据审批时,时常会出现重复审批下一流程的bug

    Aspx前台
    <td align="left" colspan="7">
    <button class="button" id="btnSubmit" onmouseover="this.style.backgroundColor='#ffffff'"
    onfocus="blur();" onclick="btnSubmit2_onclick();" onmouseout="this.style.backgroundColor='#eeeeee'" type="button" runat="server"></button>
    </td>

    function btnSubmit2_onclick()
     {
        document.getElementById("btnSubmit").disabled = true//使不可用
      }    
    C#
    this.btnSubmit.ServerClick += new System.EventHandler(this.btnSubmit_ServerClick);

    今天在开发另一个项目中,用到的是webcontrol ,本想也使得这种方式来处理,

     <asp:Button ID="btnSubmit" runat="server" OnClientClick="btnSubmit2_onclick();"  OnClick="btnSubmit_Click">  </asp:Button>

    但发现在客户端利用js处理为不可用后,按钮是为不可用状态,但按钮事件不会执行了。这是什么问题?

    碰到问题,当然要搞清楚原因。经过在网上查询资料发现原来是:

     

    按钮的服务端事件其实是.net框架利用按钮的客户端事件onclick来实现的,所以你在服务端重置onclick属性,会覆盖框架处理服务端事件的过程。
    上面已经提供了客户端脚本,你在button上加btnSubmit2_onclick()就可以,

    注意只可用HtmlInputButton控件来实现,不可用WebControlsButton

     

    以下是其它网友总结的文章,写得很全面,现摘抄下来供大家参考,我本次也是采用了第二种方法解决了我碰到的问题。

     

    欢迎加入技术分享群

     

    (转)原文地址如下:

    http://blog.itpub.net/28699126/viewspace-775581/

    第一种情况是非submit类型的按钮 

    这种情况比较简单,只要在客户端添加事件,将按钮设为不可用就可以了。看下面的代码: 
    ASP.NET-Code: 
    <form. id="form1" runat="server"> <asp:Label ID="lbl" runat="server"></asp:Label> <asp:Button ID="btn" runat="server" Text="Test" nClick="btn_Click" nClientClick="this.disabled=true" UseSubmitBehavior="false" /></form> 

    C#-Code: 
    protected void btn_Click(object sender, EventArgs e){ System.Threading.Thread.Sleep(1000); lbl.Text = DateTime.Now.ToString();} 

     第二种情况是submit类型的按钮 


    此时第一种方法就不行了,按钮被设为DISABLED之后就无法完成提交,我们可以适当修改代码: 

     ASP.NET-Code: 

    <form. id="form1" runat="server"> <asp:Label ID="lbl" runat="server"></asp:Label> <asp:Button ID="btn" runat="server" Text="Test" nClick="btn_Click"/></form> 

    C#-Code: 
    protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { btn.OnClientClick = "this.disabled=true;" + GetPostBackEventReference(btn); }} 

     与第一种方法不同的是我们在Page_Load中给按钮添加客户端事件,并附加了GetPostBackEventReference。但这样做还有个缺 陷,在第一提交回发完成以后,再点击按钮就会失败,因此我们需要去掉if (!Page.IsPostBack)这句,也就是每次回发都要重复绑定客户端事件。 


    第三种情况跟第一种类似,只是多了个UpdatePanel 
    ASP.NET-Code: 
    <asp:UpdatePanel ID="up1" runat="server" > <ContentTemplate> <asp:Label ID="lbl" runat="server"></asp:Label> <asp:Button ID="btn" runat="server" Text="Test" nClick="btn_Click" nClientClick="this.disabled=true;" UseSubmitBehavior="false" /> </ContentTemplate></asp:UpdatePanel> 
    第四种情况也是在UpdatePanel里面,不过和第二种情况一样,也是Submit类型的按钮 

    和第二种情况不同的是,我们只需要在第一次加载的时候绑定客户端事件就可以了,即在 if (!Page.IsPostBack){}中绑定事件。 

    第五种和第四种不同的是,按钮在UpdatePanel外面,通过触发器来刷新指定的UpdatePanel 

    如果按第四种的方法,可以在点击按钮后设为不可用,但回发完成以后该按钮不会恢复可用状态: 

     ASP.NET-Code: 

    <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Label ID="lbl" runat="server"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" /> </Triggers></asp:UpdatePanel><asp:Button ID="btn" runat="server" Text="Test" nClick="btn_Click" /> 

    C#-Code: 
    protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { btn.OnClientClick = "this.disabled=true;" + GetPostBackEventReference(btn); }}protected void btn_Click(object sender, EventArgs e){ System.Threading.Thread.Sleep(1000); lbl.Text = DateTime.Now.ToString();} 


    为了解决这个问题,最简单的方法就是将该按钮放在另一个UpdatePanel里面,这样每次都可以恢复原状态了。另外还可以根据Atlas的页面周期,在提交完成以后显式将该按钮设为可用。

    注:在Asp.Net中所有默认的按钮都是Submit类型,如果要是有button类型则,需要设置 UseSubmitBehavior="false"

    Submit是专门用于提交表单的Button,与Button的区别主要有两点:
      type=button 就单纯是按钮功能 
      type=submit 是发送表单
       (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此
       (2)表单提交时,所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交,除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。
      但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
      使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一. 
      用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。
      
      执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。 
      执行完onClick,跳转文件在 js文件里控制。提交需要onClick。 
      比如: 
      onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。 
      讲白一些,就是submit会有一个跳转,页面会刷新;而button不会刷新,就是一个button;可以用<button type="submit/button/reset"></button>来生成按钮,更加灵活,样式更好控制。 (如果客户端禁用JS,则使用Submit时,前台验证就会失效,后台就可能获取到非法的数据)

  • 相关阅读:
    LeetCode分类专题(五)——动态规划1-子序列
    LeetCode分类专题(四)——双指针和滑动窗口1
    LeetCode分类专题(三)——二分查找1
    消息队列(一)——Kafka概述
    Java多线程(五)——synchronized关键字原理
    Java多线程(四)——volatile关键字原理
    Redis(五)——主从复制、哨兵
    Redis(四)——过期、持久化、事件
    Redis(三)——底层数据结构
    MySQL知识点
  • 原文地址:https://www.cnblogs.com/bribe/p/4261460.html
Copyright © 2020-2023  润新知