首页 > 代码库 > 使用ajax后提交事件后禁用按钮，事件执行完毕后，重新启用按钮

使用ajax后提交事件后禁用按钮，事件执行完毕后，重新启用按钮

2024-07-01 21:19:17   227人阅读

一直想做这样的效果，实现的方法虽然不是很好，但效果还是出来了

<script runat="server">
    /// <summary>
    /// 当Button2被点击，实际是Button3触发事件，这样就可以达到提交事件时禁用被提交的按钮效果
    /// </summary>
    protected void Button_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        Page.ClientScript.RegisterStartupScript(this.GetType(), "TorunTrigger", "StartBtn()", false);
    }
</script>
<script type="text/javascript">
    function OffBtn() {
        //当Button2被禁用后，Button2的后台事件就不会被执行了，
        document.getElementById("Button2").disabled = true;
        document.getElementById("Button3").click();
        return true;
    }
    function StartBtn() {
        document.getElementById("Button2").disabled = false;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdateProgress Example</title>
    <style type="text/css">
        #UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
            border-right: gray 1px solid;
            border-top: gray 1px solid;
            border-left: gray 1px solid;
            border-bottom: gray 1px solid;
        }

        #UpdatePanel1, #UpdatePanel2 {
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }

        #UpdateProgress1 {
            width: 400px;
            background-color: #FFC080;
            bottom: 0%;
            left: 0px;
            position: absolute;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                    <br />
                    <asp:Button ID="Button2" runat="server" Text="Refresh Panel" OnClientClick="return OffBtn()" />
                    <div style="display: none;">
                        <asp:Button ID="Button3" runat="server" OnClick="Button_Click" />
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    Update in progress...
                </ProgressTemplate>
            </asp:UpdateProgress>

        </div>
    </form>
</body>
</html>

效果：

 


联系
我们