Affichage du texte chargé lors d'une requête Web

Question

J'ai un bouton sur mon formulaire Web. En cliquant sur ce bouton, une requête HttpWebRequest sera créée lors du gestionnaire d'événement onclick. Après la demande, nous copions la réponse de la demande dans HttpContext.Current.Response et l’envoyons au client.

Cette demande Web peut prendre un certain temps (jusqu'à 5 secondes, car elle génère un rapport). Pendant ce temps, l'utilisateur n'a aucune indication de ce qui se passe, à l'exception de la barre de progression du navigateur et de l'icône en rotation IE (s'ils utilisent IE). J'ai donc besoin d'un indicateur de chargement pendant que cela se produit.

J'ai essayé d'utiliser du javascript qui se déclenche pendant l'événement onclick du bouton (à l'aide de OnClientClick) et tant que cela fonctionne, je ne sais pas comment savoir quand la requête Web est terminée. Comme nous envoyons simplement la réponse au client, aucune publication complète n’est possible.

J'ai essayé de placer le bouton dans un UpdatePanel et d'utiliser UpdateProgress, mais lorsque nous envoyons la réponse à HttpContext.Current.Response et que nous appelons Response.End (), nous obtenons une erreur dans le javascript, car la réponse isn pas bien formé (nous vous renvoyons une feuille Excel à télécharger).

Étant donné que nous renvoyons un fichier à télécharger par les utilisateurs, je ne souhaite pas afficher une fenêtre distincte, car dans IE, ils obtiendraient la barre d'informations bloquant le téléchargement.

Des idées ici?

Answer 1

En guise d'alternative à la bibliothèque Professional AJAX.NET, jQuery est un moyen très pratique de le faire.

Découvrez cet exemple d’utilisation d’une méthode de page .NET (si possible dans votre scénario).

Vous définissez un appel de méthode de page dans jQuery, vous pouvez ajouter votre message de chargement ... dans un div caché.

Indiquez le rappel que vous souhaitez renvoyer en cas de succès (par exemple, lorsque votre rapport de 5 secondes est généré) puis masquer le chargement et gérer les données.

Jetez un coup d'oeil au javascript sur ma page de contact pour un exemple (voir la source).

1. J'ai un bouton sur la page, ajoutez le onClick jQuery.
2. Lorsque l'utilisateur clique dessus pour afficher une div de chargement masqué, il effectue un appel ajax à une méthode de page prenant les paramètres du formulaire.
3. La méthode de page utilise le courrier électronique, etc. Elle retourne ensuite au formulaire de la méthode javascript onSuccess que j'ai là-bas.
4. L'onSuccess masque la division de chargement.

Answer 2

Une astuce simple que j’ai utilisée par le passé est de rediriger vers une page intermédiaire avec une barre de progression animée (gif), puis de faire en sorte que cette page fasse le post REAL des données. (ou même faire apparaître une couche avec l'animation et un message poli demandant à l'utilisateur d'attendre une minute ou deux)

Le simple retour d'information du gif animé crée l'illusion pour l'utilisateur final que l'application n'est pas bloquée et qu'il sera plus patient.

Une autre approche consiste à transmettre les données à un thread de travail et à les renvoyer immédiatement avec un message indiquant que le rapport sera envoyé par courrier électronique ou mis à disposition dans les " rapports " section du site quand il est prêt. Cette approche ne présente toutefois pas l'avantage de la notification instantanée lorsque le rapport est terminé.

Answer 3

Voici ma solution:

1. Téléchargez et examinez des échantillons de la bibliothèque gratuite AJAX.NET Professional .
2. Ecrivez un AjaxMethod qui crée votre fichier et renvoie son emplacement en tant que paramètre.
3. Ecrivez votre méthode côté client pour appeler la méthode à l'étape 2. Lorsque cette méthode appelée affiche un indicateur.
4. Écrivez une méthode de rappel côté client pour masquer l'indicateur et afficher / télécharger le fichier demandé par l'utilisateur.
5. Ajoutez vos appels de fonction côté client à votre élément de bouton.

Lorsque votre méthode côté serveur se termine, votre rappel est appelé.

J'espère que ça aide!

Answer 4

La solution que je présente ici a pour but de montrer une méthode pour laisser un & "Chargement ... &"; apparaît lorsque vous êtes en traitement côté serveur et disparaît à la fin du traitement.

Je le ferai avec les machines très basiques AJAX (testées sur FF, mais IE devrait fonctionner correctement), c’est-à-dire que je n’utilise pas de framework comme Prototype, jQuery ou Dojo, car vous n’avez pas précisé vos connaissances à leur sujet.

Pour vous permettre de mieux comprendre l’astuce, ce qui suit n’est qu’un petit exemple et ne prétend pas être une solution prête à l’emploi. J'ai tendance à ne pas être superficiel, mais je pense qu'un exemple plus clair peut expliquer mieux que beaucoup de mots.

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

Comme vous pouvez le constater, il existe un <div> qui contient le & "Chargement ... &"; message.

Le principe est d'afficher / masquer le XMLHttpRequest en fonction du readyState objet onreadystatechange.

J'ai utilisé le action gestionnaire du Cache-control: no-cache pour déclencher la <=> modification.

Le script php back-end que j'utilise (déclaré comme étant le formulaire <=>) ne fait que dormir (5), pour laisser le & "Chargement ... &"; un message apparaît pendant 5 secondes.

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

L'en-tête <=> est nécessaire, car si vous ne le définissez pas, le navigateur mettra la réponse en cache, évitant ainsi de soumettre à nouveau la demande si vous en aviez besoin.

Une bonne source pour & commencer; commencer! & La documentation AJAX est Mozilla MDC .

Tout cela pourrait être traité beaucoup plus doucement par un framework Javascript comme Prototype, tirant parti de son approche sécurisée pour les navigateurs, vous évitant des heures de débogage.

Modifier:

J'ai choisi php car je ne connais ni ASP.NET ni ASP, désolé pour ça.