C# ASP.NET中页面间的“请稍候”屏幕。最佳实践是什么？

Question

C# ASP.NET中页面间的“请稍候”屏幕。最佳实践是什么？

3

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

a）将我的图像按钮链接到一个中间页面，该页面显示“请稍候”，然后从那里引用到报告页面。看起来有点笨重。 b）调查使用jquery或类似工具。我有telerik控件，它们有一些东西，但不清楚是否适用。 c）定义一些具有"请稍候"警告的CSS层，并在按钮的onclick事件中将其显示出来 d）研究jquery或类似工具

有什么想法吗？

谢谢！

- Glinkot

4个回答

1

我之前也遇到过完全相同的问题，但我发现 AJAX 服务器控件 UpdateProgress 非常有用。这里是一个链接到 UpdateProgress 控件的链接。

- The Little One

谢谢你 - 这似乎是针对部分页面更新的？在当前情况下，我正在从一个页面移动到另一个完整的页面。不确定它是否适用于这种情况？ - Glinkot

0

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

- AceMark

0

请等待页面加载，JS 可以用于任何语言，请尝试

在 body 中放置这段代码

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

js

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

- satish e

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alejandrobog · Accepted Answer

我使用带有透明度的 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';