在代码执行期间显示加载动画（div 元素）（c# 和 asp net）

Question

我在我的代码中使用了以下加载动画。我希望它在我创建的 Excel SQL 导入期间可见。 Excel 导入是使用 c# 和后面的代码完成的。以下按钮正在触发导入脚本：

<asp:ScriptManager ID="ScriptManager1" runat="server" />
   <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Always">
      <ContentTemplate>
         <asp:Button ID="savebutton" ClientIDMode="Static" class="button" runat="server" Text="Submit" Visible="True" OnClick="Savebutton_Click" />
      </ContentTemplate>
   </asp:UpdatePanel> 

这是我的加载动画：

<!-- Loading Element -->
<div runat="server" visible="false" id ="loading" class="loader"></div>

我的问题是，每次我开始导入并且一开始我使用"loading.Visible = true;" 时，元素在导入/代码执行完成之前是不可见的。

我需要从一开始就显示它。我希望在加载过程完成后隐藏它。我尝试了多种通过 javascript 和 C# 显示动画的方法，但到目前为止没有任何效果。

希望你能帮帮我..

非常感谢

亲切的问候

不爽

Answer 1

首先放置visible="false" 将导致完全不呈现控件。因此，您在客户端没有可用的 div，因此您无法显示它。

作为第二个，您可以为此使用UpdateProgress 控件。

但是要回答你的问题。您必须处理按钮单击客户端。因此，与其直接触发服务器端事件，不如先显示您的 div。

在触发按钮之前添加OnClientClick="showDiv()" 处理客户端

<asp:Button ID="savebutton" class="button" runat="server" Text="Submit" OnClientClick="showDiv()" OnClick="Savebutton_Click" />

//the js to remove imHidden from className
function showDiv() {
  document.getElementById('<%=loading.ClientID%>').className = "loader";
}

添加一个类来隐藏 div 而不是使用可见的，这样 div 将呈现给客户端但不会显示

<div id ="loading" runat="server" class="loader imHidden"></div>

css

.imHidden {
  display: none;
}

还要在更新面板中设置你的加载 div，这样它就会将自己更新回原来的隐藏状态