Отображение загрузки текста при выполнении веб-запроса

StackOverflow https://stackoverflow.com/questions/185239

  •  06-07-2019
  •  | 
  •  

Вопрос

У меня есть кнопка на моей веб-форме. Нажатие на эту кнопку выполнит запрос HttpWebRequest во время обработки события onclick. После запроса мы копируем ответ из запроса в HttpContext.Current.Response и отправляем его клиенту.

Этот веб-запрос может занять некоторое время (до 5 секунд с момента создания отчета). В течение этого времени у пользователя нет никаких признаков того, что что-то происходит, кроме индикатора выполнения браузера и вращающегося значка IE (если они используют IE). Поэтому мне нужен индикатор загрузки, пока это происходит.

Я пытался использовать javascript, который срабатывает во время события onclick кнопки (используя OnClientClick), и пока это работает, я не знаю, как узнать, когда веб-запрос завершен. Поскольку мы просто отправляем ответ клиенту, полная обратная передача не происходит.

Я попытался обернуть кнопку в UpdatePanel и использовать UpdateProgress, но когда мы отправляем ответ HttpContext.Current.Response и вызываем Response.End (), мы получаем ошибку в javascript, так как ответ isn не в порядке (мы отправляем обратно лист Excel для загрузки пользователем).

Поскольку мы отправляем обратно файл для загрузки пользователями, я не хочу открывать отдельное окно, поскольку в IE они получают информационную панель, блокирующую загрузку.

Есть идеи здесь?

Это было полезно?

Решение

В качестве альтернативы библиотеке Professional AJAX.NET в jQuery есть действительно хороший способ сделать это.

Взгляните на этот пример использования .NET PageMethod (если это возможно в вашем сценарии).

Вы определяете вызов метода страницы в jQuery, вы можете прикрепить сообщение о загрузке ... в скрытое разделение.

Скажите, какой обратный вызов вы хотите вернуть в случае успеха (т. е. когда генерируется ваш 5-секундный отчет) затем скрыть загрузку и обработать данные.

Посмотрите на пример javascript на моей странице контактов (см. источник). <Ол>

  • У меня есть кнопка на странице, добавьте jQuery onClick.
  • При нажатии, который показывает скрытый загрузочный div, вызывает ajax-вызов метода страницы, который принимает параметры формы.
  • Метод page отправляет электронную почту и т. д., а затем возвращается к форме в методе javascript onSuccess, который у меня есть.
  • onSuccess скрывает загрузочный блок.

    • Другие советы

    Простой трюк, который я использовал в прошлом, заключается в том, чтобы перенаправить на промежуточную страницу с анимированным индикатором выполнения (gif), а затем заставить эту страницу выполнить РЕАЛЬНУЮ публикацию данных. (или даже всплывающий слой с анимацией и вежливым сообщением с просьбой подождать минуту или две)

    Простая обратная связь с анимированным GIF создает у конечного пользователя иллюзию, что приложение не остановилось, и они будут более терпеливыми.

    Другой подход - передать данные в рабочий поток и сразу же вернуться с сообщением о том, что отчет будет отправлен по электронной почте или сделан доступным в " reports " раздел сайта, когда он будет готов. В этом подходе отсутствует преимущество мгновенного уведомления о завершении отчета.

    Вот мое решение:

    <Ол>
  • Загрузите и изучите образцы бесплатной профессиональной библиотеки AJAX.NET .
  • Напишите AjaxMethod, который создает ваш файл и возвращает местоположение файла в качестве параметра.
  • Напишите свою функцию на стороне клиента для вызова метода на шаге 2. При вызове этого метода покажите индикатор.
  • Напишите метод обратного вызова на стороне клиента, чтобы скрыть индикатор и показать / загрузить файл, запрошенный пользователем.
  • Добавьте вызовы функций на стороне клиента для элемента button.

    • Когда ваш метод на стороне сервера завершится, будет вызван обратный вызов.

    Надеюсь, это поможет!

    Представленное здесь решение направлено на то, чтобы показать метод, позволяющий " Загрузка ... " поле, отображаемое во время обработки на стороне сервера, и исчезающее после завершения обработки на стороне сервера.

    Я сделаю это с помощью самого базового механизма AJAX (протестированного на FF, но с IE тоже все должно быть в порядке), то есть без использования инфраструктуры, такой как Prototype, jQuery или Dojo, поскольку вы не указали свои знания о них.

    Чтобы вы лучше поняли хитрость, ниже приведен лишь небольшой пример, который не претендует на то, чтобы быть готовым решением. Я склонен не быть поверхностным, но я думаю, что более ясный пример может объяснить лучше, чем многие слова. 

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

    Как вы можете видеть, есть <div>, который содержит " Загрузка ... " сообщение.

    Принцип состоит в том, чтобы показать / скрыть XMLHttpRequest в зависимости от readyState объекта onreadystatechange.

    Я использовал обработчик action Cache-control: no-cache, чтобы вызвать изменение <=>.

    Внутренний php-скрипт, который я использую (объявленный как <=> формы), просто делает sleep (5), чтобы разрешить " Загрузка ... " сообщение появляется в течение 5 секунд. 

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

    Заголовок <=> необходим, так как обычно, если вы его не установите, браузер будет кэшировать ответ, избегая повторной отправки запроса, если вам нужно.

    Хороший источник для " начало работы " Документация AJAX: Mozilla MDC .

    Все это может быть гораздо более аккуратно обработано Javascript-фреймворком, таким как Prototype, используя его безопасный для браузера подход, экономя ваши часы отладки.

    <Ч>

    Edit:

    Я выбрал php, потому что не знаю ни ASP.NET, ни ASP, извините.

    <Ч>
    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top