javascript - 在代码隐藏执行期间显示加载动画(div 元素)(c# 和 asp 网络)

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

同时在 updatepanel 中设置你的加载 div，这样它会自动更新回原来的隐藏状态