Angezeigte Laden Text, während ein WebRequest tun

Question

Ich habe eine Taste auf meinem Web-Formular. Durch Anklicken dieser Schaltfläche wird eine HttpWebRequest während des Onclick-Ereignishandler tun. Nach der Anfrage kopieren wir die Antwort der Anfrage in HttpContext.Current.Response und dass an den Client senden.

Diese Web-Anfrage kann eine Weile dauern (bis zu 5 Sekunden, da er einen Bericht der Erzeugung). Während dieser Zeit hat der Benutzer keine Anzeichen dafür, dass etwas vor sich geht, außer für den Browser Fortschrittsbalken und der Spinn IE-Symbol (wenn sie IE verwenden). Also brauche ich eine Ladeanzeige, während dies geschieht.

Ich habe versucht, mit Hilfe von Javascript, das Feuer während der Onclick-Ereignisses der Schaltfläche (mit OnClientClick) und während das funktioniert, weiß ich nicht, wie Sie herausfinden, wenn die Web-Anfrage beendet ist. Da wir die Antwort an den Client nur senden, eine vollständige Postbacks nicht geschieht.

Ich habe versucht, den Knopf in einem Update Einwickeln und die Update verwenden, aber wenn wir die Antwort auf HttpContext.Current.Response und rufen Response.End (mit), so erhalten wir einen Fehler in der JavaScript aktivieren, da die Antwort isn ‚t gut ausgebildet (wir das Senden einer Excel-Tabelle für den Benutzer zum Download zurück).

Da wir das Senden einer Datei für die Nutzer zurück zum Download, ich möchte nicht ein separates Fenster, da dann in IE Pop-up würden sie die Informationsleiste erhalten den Download blockieren.

Irgendwelche Ideen hier?

Answer 1

Als Alternative zu der Professional AJAX.NET Bibliothek hat jQuery eine wirklich schöne Art und Weise, dies zu tun.

Werfen Sie einen Blick auf dieses Beispiel eine .NET Pagemethod verwenden (wenn möglich in Ihrem Szenario).

Sie einen Seite Methodenaufruf in jQuery definieren, können Sie auf Ihrem Laden tack ... Nachricht in einer versteckten div.

Sagen Sie, was Sie Rückruf auf Erfolg zurückkehren möchten (dh wenn Ihr 5 Sekunden Bericht erzeugt wird) dann das Laden verstecken und die Daten verarbeiten.

Werfen Sie einen Blick auf die Javascript auf meiner Kontaktseite für ein Beispiel (die Quelle anzeigen).

1. Ich habe eine eine Schaltfläche auf der Seite, die jQuery onClick hinzuzufügen.
2. Wenn Sie darauf klicken, die einen versteckten Laden div zeigt, macht einen Ajax-Aufruf zu einer Seite-Methode, die die Parameter der Form annimmt.
3. Die Seite Methode etc hat eine E-Mail kehrt dann in der Form, in der onSuccess javascript Methode, die ich dort haben.
4. Die onSuccess versteckt den Laden div.

Answer 2

Ein einfacher Trick, den ich in der Vergangenheit verwendet habe, ist auf eine Zwischenseite mit einem animierten Fortschrittsbalken (gif) und dann hat die Seite tut den realen Beitrag der Daten zu umleiten. (Oder auch eine Schicht mit der Animation auf das Pop-up und eine höfliche Nachricht den Benutzer auffordert, eine Minute zu warten oder zwei)

Die einfache Rückmeldung des animierten GIF erzeugt die Illusion, an den Endverbraucher, dass der App nicht zum Stillstand gekommen ist, und sie werden mehr Patienten sein.

Ein weiterer Ansatz ist es, die Daten aus, um einen Arbeitsthread Hand und sofort mit einer Meldung zurückgeben besagt, dass der Bericht geschickt wird oder in den „Berichten“ auf der Website zur Verfügung gestellt, wenn es fertig ist. Dieser Ansatz fehlt den Vorteil der sofortigen Benachrichtigung, wenn der Bericht jedoch abgeschlossen ist.

Answer 3

Hier ist meine Lösung:

1. Download und untersuchen die Proben kostenlos Professionelle AJAX.NET Bibliothek.
2. eine AjaxMethod schreiben, dass Ihre Datei erstellt und zurückgibt Speicherort der Datei als Parameter.
3. Schreiben Sie eine clientseitige Funktion Methode bei Schritt 2. aufrufen Wenn diese aufgerufene Methode einen Indikator zeigen.
4. Schreiben Sie eine clientseitige Callback-Methode Indikatoren und show / Download-Datei zu verstecken, dass Benutzer angefordert.
5. Fügen Sie Ihre clientseitige Funktion aufruft yo Ihr Button-Element.

Wenn Ihre Methode bei serverseitigen Ihrem Rückruf endet aufgerufen wird.

Hope, das hilft!

Answer 4

Die Lösung Ich stelle hier sollte eine Methode zeigen, eine „Loading ...“ Box lassen erscheinen, während Sie die serverseitige Verarbeitung sind und verschwinden, wenn die serverseitige Verarbeitung abgeschlossen ist.

Ich werde dies mit den sehr einfachen AJAX Maschinen (auf FF getestet, aber IE sollte ok entweder), also nicht ein Frameworks wie Prototype oder jQuery oder Dojo verwenden, da Sie nicht Ihr Wissen über sie angegeben haben.

Damit Sie besser den Trick verstehen, ist die folgende nur ein kleines Beispiel und erhebt keinen Anspruch auf eine Out-of-the-box-Lösung. Ich neige dazu, nicht oberflächlich zu sein, aber ich denke, ein deutlicheres Beispiel besser als viele Worte erklären kann.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>First Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .hidden {
                display: none;
            }
            .loadingInProgress {
                color: #FFFFFF;
                width: 75px;
                background-color: #FF0000;
            }
        </style>
    <script type="text/javascript">
        var httpRequest;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            httpRequest = new XMLHttpRequest();
            httpRequest.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) { // IE
            try {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {}
            }
        }

        if (!httpRequest) {
            alert('Giving up :( Cannot create an XMLHTTP instance');
        }

        httpRequest.onreadystatechange = function(){
            switch (httpRequest.readyState) {
            case 1: // Loading
                document.getElementById('loading').className = "loadingInProgress";
                break;
            case 4: // Complete
                document.getElementById('loading').className = "hidden";
                if (httpRequest.status == 200) {
                    // perfect!
                } else {
                    // there was a problem with the request,
                    // for example the response may be a 404 (Not Found)
                    // or 500 (Internal Server Error) response codes
                }
                break;
            }
        };

        function go() {
            httpRequest.open('GET', document.getElementById('form1').action, true);
            httpRequest.send('');
        }
    </script>

  </head>
  <body>
      <div id="loading" class="hidden">Loading...</div>
      <form id="form1" name="form1" action="doSomething.php">
          <input type="button" value="Click to submit:" onclick="go()" />
      </form>
  </body>
</html>

Wie Sie sehen können, gibt es eine <div>, die die "Loading ..." hält Nachricht.

Das Prinzip ist zum Anzeigen / die <div> verstecken je nach XMLHttpRequest des readyState Objekts.

Ich habe die onreadystatechange Handler des XMLHttpRequest verwendet, um die readyState Veränderung auslösen.

Der Back-End-PHP-Skript I (deklarierte als die Form der action) verwenden tut nur ein Schlaf (5), lassen die "Loading ..." Nachricht für 5 Sekunden angezeigt werden.

<?php
sleep(5);
header('Cache-Control: no-cache');
echo "OK";
?>

Der Cache-control: no-cache Header ist notwendig, da in der Regel, wenn Sie es nicht, dass der Browser die Antwort den Antrag erneut einreichen zu vermeiden gesetzt zwischenzuspeichern, wenn Sie benötigen sollten.

Eine gute Quelle für "getting started" AJAX-Dokumentation ist Mozilla MDC .

Das Ganze viel sanfter durch eine Javascript Frameworks wie Prototype behandelt werden könnte, unter Ausnutzung seines Browsers sicheren Ansatzes, Ihnen Stunden des Debug zu speichern.

---

Edit:

Ich entschied mich für PHP, weil ich weiß nicht, ASP.NET oder ASP, leid.

---