ASP.NET 和 C#：当按钮完成处理时隐藏旋转轮

Question

在我的 Web 表单中，我有一个按钮，当用户单击它时，我会显示一个旋转轮以表示正在处理请求：

<td class="auto-style1"><asp:LinkButton ID="lblButton" runat="server" OnClick="doSomething">Button</asp:LinkButton></td> 
<td id="load" style="display:none"> <img src="Images/usethiswheel.gif" height="30" width="30" /> </td>

为了调节纺车的外观，我使用了以下代码片段：

<script>
$(document).ready(function () {
  $('#lblButton').click(function () {
    $('#load').show();
    setTimeout(function () { $('#load').hide() }, 40000);
  });
 });
</script>

但是，我使用的是 40 秒后过期的超时功能。如何让旋转轮在按钮完成处理的那一刻消失？

Answer 1

使用 ajax 调用来等待服务器的响应，你可能需要这样的东西（取决于你对服务器端调用的类型）因为它的 c#：

       <script>
    $(document).ready(function () {
        $('#lblButton').click(function () {
            $('#load').show();

            $.ajax({
                url: '@Url.Action("SomeMethod", "Somecontroller")',
                type: 'GET',
                cache: false,
                success: function (data) {
                    $('#load').hide();
                }
            });
        });
</script>

Answer 2

正如 Davit Mikuchadze 所说，您可以尝试在使用 ajax 制作

时显示加载 gif

对代码隐藏的请求（例如 webmethod），然后您可以将 gif 隐藏在 ajax

成功函数。

但是，您也可以尝试使用 ajaxtoolkit updatepanel 和 UpdateProgress 控件来

达到你的要求。

关于如何安装ajaxtookit控件，可以参考这篇文章 https://github.com/DevExpress/AjaxControlToolkit/wiki/Step-by-Step-Installation-Guide.

代码示例：

ASPX:

<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div align="center">
        <h1>
            Click the button to see the UpdateProgress!</h1>
        <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
    </div>
</ContentTemplate>
</asp:UpdatePanel>

代码隐藏：

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}

Answer 3

为此，您应该在完成 ajax 调用后尝试如下操作，您应该隐藏纺车。

<script>
    $(document).ready(function () {
        $('#lblButton').click(function () {
            $('#load').show();

            $.ajax({
                url: '@Url.Action("SomeMethod", "Somecontroller")',
                type: 'GET',
                cache: false,
                success: function (data) {
                    $('#load').hide();
                },
                failure: function(response){
                    $('#load').hide();
                },
                error: function(response){
                    $('#load').hide();
                }
            });
        });
</script>

ASP.NET 和 C#：当按钮完成处理时隐藏旋转轮

ASP.NET and C#: hide spinning wheel when button has finished processing

c#

asp.net

jquery

progress-bar

visual-studio-2019