Question

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

我使用c＃和asp.net在visual studio 2010工作。我已经开发了一个网站作为我部门的内部工具来跟踪员工指标。该程序通过存储过程访问中型sql数据库，然后进行一些小的计算，并以各种方式显示数据，包括asp：图表，转发器和其他表。该程序允许用户选择他们希望查看指标的日期范围。显然，随着范围的增加，用户体验的挂起时间也会增加。我一直在尝试创建一个加载屏幕，可以随时显示回发到服务器的页面。我最初的想法是使用css和一个div加载gif，当页面加载事件被触发时显示，但我似乎无法使事情正常工作。我已经阅读/看过很多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;
}

Answer 2

我通过在主页内容上使用响应刷新找到了我的问题，其中包含计划文本加载消息，在加载正文内容时该消息被移动为不可见。不是我确定的最佳方式，但它对我有用。

加载asp.net的屏幕

2 个答案: