C# ASP.NET 中页面之间的“请稍候”屏幕。最佳实践？答案

【问题标题】：'Please wait' screen between pages in C# ASP.NET. Best practice?C# ASP.NET 中页面之间的“请稍候”屏幕。最佳实践？
【发布时间】：2020-07-04 11:58:29
【问题描述】：

我有一个带有一些图像按钮的网格视图，每个按钮都会启动该项目的报告页面。报告需要 10-15 秒才能运行，所以我想要一个弹出“生成报告，请稍候”类型的东西。我可以想到一些方法，但希望那些比我更有经验的人的意见。我正在考虑的选项：

a) 将我的图像按钮链接到显示“请稍候”的中间页面，然后从那里将其引用到报告页面。似乎有点笨重 b) 使用 jquery 或类似工具进行调查。我有 Telerik 控件，它们有一些东西，但不清楚是否有合适的。 c) 定义某种带有请稍候警告的 CSS 层，并使其作为按钮的 onclick 事件的一部分可见 d）查看 jquery 或类似的

有什么想法吗？

谢谢！

【问题讨论】：

标签： c# asp.net

【解决方案1】：

我使用具有透明度的 Div，它非常酷且简单。试试看吧。

 <div id="ModalPopup" style="visibility: hidden;">
  <div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: Gray;
    filter: alpha(opacity=70); opacity: 0.7;">
    &nbsp;
  </div>
  <table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
    <tr>
      <td align="center" valign="middle">
        <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
          width: 200px;">
          <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
          Procesando....
        </div>
      </td>
    </tr>
  </table>
  </div>

要显示 div，请使用以下 JavaScript：

document.getElementById('ModalPopup').style.visibility = 'visible';

【讨论】：

谢谢伙计。我将它放在按钮所在的“第一个”表单上，但从一开始就可见。您如何使其不可见，然后在用户单击按钮后使其出现？我不是 JS 人... :)
将这个样式添加到主 div Style="display: none" 然后在你的按钮上添加 onClientClick="document.getElementById['ModalPopup'].style.visibility='visible'"
嗨 Alej，我已经尝试了很多变种，但到目前为止都没有运气！不幸的是，没有空间粘贴代码。我已经用那个 onclientclick 事件放置了一个按钮，但它只是回发而不使 div 可见。如果你碰巧有一个 .aspx 文件来显示它的运行情况，如果你可以将它轻弹到 foley.mark@gmail.com 那就太好了。干杯队友
这个解决方案是我找到的最简单的解决方案，非常感谢！需要注意的一点是，如果您使用 ASP.NET 来隐藏和显示 div，请务必将 runat="server" 添加到主 ModualPopup 标记中。

【解决方案2】：

我之前也遇到过同样的问题，但我发现 AJAX 服务器控件 UpdateProgress 非常有用。这是UpdateProgress Control 的链接。

【讨论】：

谢谢您 - 这似乎是为了部分页面更新？在本例中，我正在从一页移动到另一页。不确定它在这种情况下是否有效？

【解决方案3】：

您可以在页面上有一个<iframe>，其中的style 设置为display:none。一个按钮（您将使用它来执行一个操作）将执行一个 JavaScript 函数，该函数将在单击时将 <iframe> 的样式设置为 display:block。

【讨论】：

【解决方案4】：

请等待页面加载 js 可以用任何语言试试

在正文中放置此代码

  <body>
    <div id='loadingmsg' style='display: none;'></div>
    <div id='loadingover' style='display: none;'></div>
  </body>

在 CSS 中

          #loadingmsg {
    width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("assets/img/loaders/load10.gif") no-repeat center center rgba(255,255,255,0);
      }
      #loadingover {
      background: #23351f;
      z-index: 99;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }

   <script>
       document.onreadystatechange = function () {
           var state = document.readyState
           if (state == 'interactive') {
               showLoading();
           }
           else if (state == 'complete') {
              
                   hideLoading();
              
           }
       }

      
        function showLoading() {
            document.getElementById('loadingmsg').style.display = 'block';
            document.getElementById('loadingover').style.display = 'block';
        }
        function hideLoading() {
            document.getElementById('loadingmsg').style.display = 'none';
            document.getElementById('loadingover').style.display = 'none';
        }
    </script>

【讨论】：