如何在VB.NET的ASP.NET项目中强制更新UI并显示加载图片？

核心问题 #

ASP.NET是服务器端渲染模型，服务器端代码会一次性执行完毕后返回完整页面响应。你之前的写法里，服务器端设置LoadingImg.Visible = True后立刻执行Response.Redirect，导致当前页面的UI更新根本不会发送给客户端；客户端脚本的style.visibility = 'true'是错误的（有效值为visible/hidden），且表单提交太快，浏览器没来得及渲染加载图。

具体修改步骤 #

1. 修正客户端代码
   加载图默认用display: none隐藏，通过客户端脚本控制显示，同时确保ASP.NET控件ID正确映射到客户端：

   <asp:Image runat="server" ID="LoadingImg" src="../Content/Images/wait2.gif" style="height: 75%; width: 75%; display: none;" />
   <asp:Button ID="BtnModSave" runat="server" Text="Update" CssClass="btn btn-success" OnClientClick="showLoadingAndSubmit(); return false;" />
   
   <script type="text/javascript">
       function showLoadingAndSubmit() {
           // 获取控件的客户端真实ID
           var loadingImg = document.getElementById('<%= LoadingImg.ClientID %>');
           // 显示加载图
           loadingImg.style.display = 'block';
   
           // 延迟提交表单，给浏览器足够时间渲染加载图
           setTimeout(function() {
               document.forms[0].submit();
           }, 100);
       }
   </script>
   

2. 简化服务器端代码
   移除无效的LoadingImg.Visible = True，保持原有业务逻辑即可：

   Protected Sub BtnModSave_Click(sender As Object, e As EventArgs)
       BtnDelete_Click()
       BtnSaveSchedule_Click(sender, e, 1)
       Response.Redirect("~/Schedule.aspx")
   End Sub
   

为什么之前的方法无效？ #

• 服务器端的Response.Redirect会直接终止当前页面处理，跳转到新页面，所有未完成的UI更新都不会生效。
• Async/Await在这里无法实现"中途更新UI"，因为服务器端必须完成所有代码执行后才会返回响应给客户端。
• 客户端脚本的visibility属性值错误，且表单无延迟提交导致加载图没来得及渲染。

内容的提问来源于stack exchange，提问作者Alexander The Great