2

我想在用户单击执行多个 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

在此处输入图像描述

4

2 回答 2

1

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

这当然是您显示的链接的作用。如果您遵循它，那么它不应该等待完成回发来执行。

于 2012-04-12T14:23:38.440 回答
0

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();
});
于 2012-04-12T14:28:48.450 回答