Ladebildschirm für asp.net

Question

Ich realisiere, dass es viele Threads bereits gebucht, die sich mit dieser Frage beschäftigen, und ich habe viel von ihnen geschaut und viele verschiedene Ansätze zu meinem Problem versucht. Leider kann ich niemanden dazu bringen, für meine spezielle Situation zu arbeiten. Also hier geht,

Ich arbeite in Visual Studios 2010 mit C# und asp.net. Ich habe bereits eine Website als internes Tool für meine Abteilung entwickelt, um Mitarbeiter-Metriken zu verfolgen. Das Programm arbeitet mit mittelgroßen SQL-Datenbanken über gespeicherte Prozeduren und führt dann einige kleinere Berechnungen durch und zeigt die Daten auf verschiedene Arten an, einschließlich asp: Diagramme, Repeater und andere Tabellen. Das Programm ermöglicht dem Benutzer, den Datumsbereich auszuwählen, für den die Metriken angezeigt werden sollen. Offensichtlich erhöht sich mit zunehmender Reichweite auch die Hangtime des Benutzers. Ich habe versucht, einen Ladebildschirm zu erstellen, der jederzeit anzeigt, dass die Seiten zurück auf den Server posten. Mein erster Gedanke war, css und ein Div mit einem Lade-GIF zu verwenden, das angezeigt wird, wenn das Seitenladeereignis ausgelöst wird, aber ich kann nicht scheinen, dass das Ding richtig funktioniert. Ich habe viele Beispiele von Jquery und Ajax gelesen/gesehen, aber habe keine Erfahrung damit. Ich habe versucht,

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

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

und

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> 

und ein paar andere Techniken. Natürlich verstehe ich nicht, wie man diese Techniken richtig einsetzt. Alles, was ich will, ist ein Ladebildschirm zu zeigen, während die Seite die Daten lädt, so dass der Benutzer weiß, dass ihre Anfrage verarbeitet wird. Jede Hilfe wäre sehr dankbar dank

leider hier ist 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

fand ich weg um mein Problem durch eine Reaktion mit Flush auf meinen Masterseiteninhalt, der eine Nachricht zum Laden eines Plantextes enthält, die beim Laden des Body-Inhalts in die unsichtbare Position verschoben wird. nicht der beste Weg, ich bin sicher, aber es funktioniert für mich.

Answer 2

Sie sollten die UpdateProgress Kontrolle für diese nutzen können. So etwas sollte man in die richtige Richtung:

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

Hier sind die Stile, die Sie Opazität nach Bedarf anpassen können:

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