单击按钮后加载指示器[关闭]答案

【问题标题】：Loading indicator after clicking button [closed]单击按钮后加载指示器[关闭]
【发布时间】：2012-04-24 21:55:14
【问题描述】：

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

【问题讨论】：

您需要显示代码才能在此处获得帮助。否则它是在黑暗中拍摄，并不能表明您实际上已经尝试过任何事情。
@Blake-对于更新需要使用ajax。
我没有使用 ajax 调用...没有它我不能提供 UI 反馈吗？

标签： c# jquery sql web-applications

【解决方案1】：

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();
});

【讨论】：

我喜欢这个解决方案，如果 OP 使用的是 UpdatePanel。目前尚不清楚他是否是。
@Sevy-谢谢。如果他使用或不使用，他可能会清楚地提到它，但从我们的角度来看，我已经给了他这样做的可能性:)
这是一个很棒的解决方案，值得发布，不管 OP 是否可以使用它；我不是在批评你发布它。
@Servy-谢谢你喜欢它:)
我们可以为输出先生获取一个 jsfiddle 吗？

【解决方案2】：

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

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

【讨论】：