asp.net - asp.net 的加载屏幕

Question

我意识到已经发布了很多线程来处理这个问题，我已经看过很多线程并尝试了很多不同的方法来解决我的问题。不幸的是，我无法让他们中的任何一个为我的具体情况工作。就这样吧，

我在 visual studio 2010 中使用 c# 和 asp.net 工作。我已经开发了一个网站作为我部门跟踪员工指标的内部工具。该程序的工作原理是通过存储过程访问中型 SQL 数据库，然后进行一些小的计算并以多种方式显示数据，包括 asp:charts、repeaters 和其他表格。该程序允许用户选择他们希望查看指标的日期范围。显然，随着范围的增加，用户体验的挂起时间也会增加。我一直在尝试创建一个加载屏幕，该屏幕将在页面回发到服务器的任何时候显示。我最初的想法是使用 css 和一个带有加载 gif 的 div，当页面加载事件被触发时显示，但是我似乎无法让它正常工作。我读过/看过很多 jquery 和 ajax 的例子，但对这两者都没有经验。我试过了

 $(document).ready(function () {
 $('#loadGif').hide();
 });

<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" />

和

 document.getElementById("loading").className = "loading-visible";
 var hideDiv = function () { document.getElementById("loading").className = "loading- invisible"; };
 var oldLoad = window.onload;
 var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
 window.onload = newLoad;    

<div id="loading" class="loading-invisible">
<img id="loadGif" runat="server" src="img/loading.gif" alt="Please wait while the site information is updated" />
</div>

和其他一些技术。显然我不明白如何正确使用这些技术。我想要的只是在页面加载数据时显示加载屏幕，以便用户知道他们的请求正在处理中。任何帮助将不胜感激谢谢

抱歉，这里是 css:

      /*--------------------==================LOADING SCREEN=================----------------  -*/
  /*this is what we want the div to look like
   when it is not showing*/

  div.loading-invisible
  {
   /*make invisible*/
    display:none;
  }

/*this is what we want the div to look like
  when it IS showing*/
div.loading-visible
{
/*make visible*/
display:block;

/*position it 200px down the screen*/
position:absolute;
top:200px;
left:0;
width:100%;
text-align:center;

  /*in supporting browsers, make it
    a little transparent*/
  background:#fff;
  filter: alpha(opacity=75); /* internet explorer */
  -khtml-opacity: 0.75;      /* khtml, old safari */
 -moz-opacity: 0.75;       /* mozilla, netscape */
   opacity: 0.75;           /* fx, safari, opera */
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
}

 /*---------------- Another loading screen attempt with ajax---------*/
 #updateProgress
{
 background-color:#CF4342;
 color:#fff;
 top:0px;
 right:0px;
 width:100%;
 position:fixed;
}

#updateProgress img 
{
  vertical-align:middle;
  margin:2px;
}
   /*---------------- Another loading screen attempt with jquery---------*/
   div#spinner
  {
    display: none;
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(loading.gif) no-repeat center #fff;
    text-align:center;
    padding:10px;
    font:normal 16px Tahoma, Geneva, sans-serif;
    border:1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index:2;
    overflow: auto;
}

Answer 1

您应该能够为此使用 UpdateProgress 控件。像这样的事情应该为您指明正确的方向:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

以下是您可以根据需要调整不透明度的样式:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}