单击按钮后加载指示器

Question

我想在用户点击执行多个SQL查询的按钮后显示加载指示符。我尝试在点击按钮时取消隐藏div，但直到按钮后面的所有工作都完成后才会显示。我也试过这个解决方案但没有成功 - http://forums.asp.net/t/1608046.aspx/1

有什么建议吗？

code

<asp:Button ID="loadButton" OnClientClick="ShowDiv()" runat="server" 
onclick="loadButton_Click" Text="Go" />


<script type="text/javascript">
    function ShowDiv()
    {setTimeout('document.getElementById("updatediv").style.display = "inline";', 500);}}
</script>


<div ID="updatediv" runat="server" >
<img src="Images/ajax-loader.gif"  /> Updating ....
</div>

code

使用上面的链接解决方案时出现以下错误：

**这似乎可以解决问题

code

<script type="text/javascript" language="javascript">
function ShowDiv()
   $('#updatediv').show() }
</script>

code

Answer 1

您需要在客户端而不是服务器端使用show div。除服务器端OnClientClick事件外，ASP按钮还有一个方便的Click。

这当然是您展示的链接。如果你跟着它，那么它不应该等待完成回发来执行。

Answer 2

CSS：

<style type="text/css"> 
        #UpdateProgress1 { 
            top:450px; left: 450px; 
            position: absolute; 
            background-color: #C3E1FF; 
           background-repeat: repeat-x; } 
</style>

添加scriptMananger，UpdatePanel，如下所示：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <ContentTemplate>
                <table runat="server" border="1" width="98%" align="center">
                <tr><td></td></tr>
                </table>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                            <ProgressTemplate>
                                <img src="Images/Loading.gif" /><br /><center><font color=red>Processing Data...</font></center>
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnprocess" />
            </Triggers>
        </asp:UpdatePanel> 

然后给出一些计时器

System.Threading.Thread.Sleep(3000);

如果你正在使用Simple JQuery，你需要做ajax方式，这是你应该如何处理ajax：

$('#ShowDiv')
    .hide()  // hide
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
});