zoukankan      html  css  js  c++  java
  • 只能点击一次的按钮

    今天在一个ASP.NET项目中,有个页面提交时,因为数据量比较大,页面刷新比较慢,有的用户多次点击提交按钮。导致有多条记录插入到数据。

    就想把按钮做成只能点击一次,不能再次点击的效果。在网上查找按钮的onclientclick 和验证控件的冲突的问题(唉~~,以前看过没有记住o(╯□╰)o)时,无意看到有人写过这样的只能点击一次的按钮。

    有两个假设前提:

    • Button必须是button类型,不能使submit类型
    • 如果我们使用验证,javascript可以使用。

    .aspx 页面:

             <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="SubgurimTest"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                ErrorMessage="*" ControlToValidate="TextBox1" ValidationGroup="SubgurimTest">
            </asp:RequiredFieldValidator>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="OnceClickMe" ValidationGroup="SubgurimTest"
                UseSubmitBehavior="false" OnClientClick="clickOnce(this, 'Cargando...')" />
            <br />
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

    注意黑体字噢

    .aspx.cs

         protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(1000);
            Label1.Text = DateTime.Now.ToString();
        }

    .js
             function clickOnce(btn, msg)
            {
                // Test if we are doing a validation
                if (typeof(Page_ClientValidate) == 'function')
                {
                    // if we are doing a validation, return if it's false
                    if (Page_ClientValidate() == false) { return false; }
                }  
                // Ensure that the button is not of type "submit"
                if (btn.getAttribute('type') == 'button')
                {
                    // The msg attibute is absolutely optional
                    // msg will be the text of the button while it's disabled
                    if (!msg || (msg='undefined')) { msg = 'Loading...'; }   
                    btn.value = msg;
                    // The magic :D
                    btn.disabled = true;
                }
                return true;
            }


    代码中的注释都是比较简单的英文,就没有翻译(*^__^*) ……

    代码引用自:http://weblogs.asp.net/javinavarro/archive/2007/11/15/clickonce-button.aspx

  • 相关阅读:
    阿里云如何打破Oracle迁移上云的壁垒
    第三代DRDS分布式SQL引擎全新发布
    玩转MaxCompute studio SQL编辑器
    如何在阿里云上安全的存放您的配置
    阿里云E-HPC联合安世亚太、联科集团共建云超算生态
    阿里云弹性裸金属服务器-神龙架构(X-Dragon)揭秘
    从保障淘宝到全球市场“第一阵营”,阿里云的DDoS防护之路走了多远?
    飞天技术汇“2018云栖大会·上海峰会”专场,等你加入
    Yeoman:Web 应用开发流程与工具—AngularJS—Bootstrap—js
    【codeforces 550A】Two Substrings
  • 原文地址:https://www.cnblogs.com/qishichang/p/1510494.html
Copyright © 2011-2022 走看看