使用SubmitButton控件实现进度条功能-优快云博客

本文介绍了如何利用公司封装的SubmitButton控件，该控件基于Bootstrap并解决了兼容性问题，实现进度条功能。控件支持通过RelativeControlID与其他按钮关联，并通过客户端脚本控制进度条的显示与关闭。主要功能包括：动态禁用相关按钮、页面滚动时保持居中、UpdatePanel中的使用，以及两种进度模式（ByTimeInterval和BySteps）。作者计划进一步对比分析与Bootstrap样式以深化理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作中平台提供了兼容现代浏览器的SubmitButton，这个控件基于Bootstrap的样式重新调整了界面，以及调整了兼容性问题，以便支持最新版浏览器。如下：

一、代码分享

由于这是公司封装的控件，所以这里就简单的说一下：

（一）前台页面

<headrunat="server">
    <title>SubmitButtonTest</title>
    <scripttype="text/javascript">
        function test() {
            alert();
        }
 
        function fefefefe() {
           document.getElementById("submitBtn").click();
        }
    </script>
</head>
<body>
    <form id="serverForm"runat="server">
    <asp:ScriptManagerID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h1>
        标题</h1>
    <div>
        <a runat="server"href="#" id="relSubmit" onclick="event.returnValue =!event.srcElement.disabled;">
            提交按钮的相关控件</a>
        <input id="fefefe"value="我做测试" onclick="fefefefe()" type="button"/>
        <HB:SubmitButtonrunat="server" ID="submitBtn" Text="SubmitButton" PopupCaption="正在提交..."
            OnClick="submitBtn_Click"OnClientClick="test()" />
        <HB:SubmitButtonrunat="server" ID="saveBtn" Text="Save Button"PopupCaption="正在保存..."
            OnClick="submitBtn_Click"/>
        <HB:SubmitButtonrunat="server" ID="SubmitButton1" Text="Long Term SaveButton" ProgressInterval="00:00:00.400"PopupCaption="这个等候时间比较长..."
           OnClick="SubmitButton1_Click" />
    </div>
    <br />
    <div>
        <scripttype="text/javascript">
           //在UpdatePanel更新完毕后执行指定的方法，重置SubmitButton的状态
           Sys.WebForms.PageRequestManager.getInstance().add_endRequest(blah);
            function blah() {
                SubmitButton.resetAllStates();
            }
        </script>
        <HB:SubmitButtonrunat="server" ID="SubmitButton2" Text="查询"PopupCaption="查询中。。。"
           OnClick="SubmitButton2_Click" />
        <asp:UpdatePanelID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div>
                    <asp:TextBoxrunat="server" ID="tbx_msg"></asp:TextBox>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTriggerControlID="SubmitButton2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

（二）后台代码

publicpartial class SubmitButtonTestForm : System.Web.UI.Page
{
protectedvoid submitBtn_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
 
        protected voidSubmitButton2_Click(object sender, EventArgs e)
        {
            Thread.Sleep(2000);
            tbx_msg.Text = "查询结果";
            this.SubmitButton2.PopupCaption ="";
        }
 
protectedvoid SubmitButton1_Click(object sender, EventArgs e)
{
Thread.Sleep(10000);
}
}

二、功能

那么接下来就和大家分享一下它有什么强大的功能吧！

这个控件分为客户端和服务器端两部分。服务器端通过RelativeControlID可以和一个Button或LinkButton挂接。再通过客户端的脚本控制，一旦点击一个Button，其它相关的SubmitButton都是disable的。

我们需要实现的功能集合和原来的没有什么差别，主要功能点包括：