利用模态DIV结合UpdateProgress防止页面重复提交

原文：刘武|利用模态DIV结合UpdateProgress防止页面重复提交  

页面在提交的时候可能因为服务器处理慢而导致用户多次重复的点击某个按钮，因此我们需要防止用户这么做，常见的方法是在客户端把该按钮 disable掉，但页面处理完或出现错误的时候又需要恢复按钮的状态，这样操作起来往往比较复杂，在atlas页面中，我们可以利用模态DIV和 UpdateProgress来实现同样的效果，实现起来也比较简单 。看下面的页面

XML-Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
    #modalDiv
    {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index:1001;
        background-color: black;
        opacity:.60;
        filter: alpha(opacity=10);
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
            <ProgressTemplate>
                <div id="modalDiv">
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Submit" runat="server"
                    OnClick="Submit_Click" Text="Submit" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

posted on 2009-09-29 22:48  刘武  阅读(467)  评论(1)    收藏  举报

导航