WebRequestの実行中にテキストの読み込みを表示する

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

  •  06-07-2019
  •  | 
  •  

質問

ウェブフォームにボタンがあります。このボタンをクリックすると、onclickイベントハンドラーでHttpWebRequestが実行されます。リクエストの後、リクエストからのレスポンスをHttpContext.Current.Responseにコピーして、クライアントに送信します。

このWebリクエストには時間がかかる場合があります（レポートを生成しているため、最大5秒）。この間、ユーザーはブラウザの進行状況バーと回転するIEアイコン（IEを使用している場合）を除いて、何かが進行中であることを示すことはできません。そのため、これが行われている間、ローディングインジケータが必要です。

ボタンのonclickイベント中に（OnClientClickを使用して）起動するjavascriptを使用しようとしましたが、動作している間、Webリクエストがいつ終了するかを知る方法がわかりません。応答をクライアントに送信するだけなので、完全なポストバックは発生しません。

UpdatePanelでボタンをラップしてUpdateProgressを使用しようとしましたが、応答をHttpContext.Current.Responseに送信してResponse.End（）を呼び出すと、応答がJavaScriptにないため、javascriptでエラーが発生します整形式ではありません（ユーザーがダウンロードできるようにExcelシートを送信しています）。

ユーザーがダウンロードできるようにファイルを送り返すので、IEではダウンロードをブロックする情報バーが表示されるため、別のウィンドウをポップアップ表示したくありません。

ここにアイデアはありますか？

役に立ちましたか？

解決

Professional AJAX.NETライブラリの代替として、jQueryにはこれを行う非常に優れた方法があります。

。NET PageMethodを使用するこの例（シナリオで可能であれば）。

jQueryでページメソッド呼び出しを定義し、非表示のdivでloading ...メッセージを追加できます。

成功時に返すコールバックを言います（つまり、5秒のレポートが生成されたとき） 読み込みを非表示にしてデータを処理します。

例については、javascript 私の連絡先ページをご覧ください（ソースを表示）。

  1. ページにボタンがあり、jQuery onClickを追加します。
  2. クリックすると、非表示のロードdivが表示され、フォームのパラメーターを取るページメソッドにajax呼び出しが行われます。
  3. ページメソッドはメール送信などを行い、onSuccess JavaScriptメソッドのフォームに戻ります。
  4. onSuccessは読み込みdivを非表示にします。

他のヒント

過去に使用した簡単なトリックは、アニメーションの進行状況バー（gif）を使用して中間ページにリダイレクトし、そのページにデータのREALポストを実行させることです。 （または、アニメーションと、ユーザーに1〜2分待つように求める丁寧なメッセージが表示されたレイヤーをポップアップします）

アニメーションGIFの単純なフィードバックは、アプリが停止せず、より忍耐強くなるという幻想をエンドユーザーにもたらします。

別のアプローチは、データをワーカースレッドに渡して、レポートが電子メールで送信されるか<！> quot; reports <！> quot;準備ができたらサイトのセクション。ただし、この方法では、レポートが完了したときに即座に通知されるという利点がありません。

ここに私の解決策があります：

  1. 無料の Professional AJAX.NET ライブラリのサンプルをダウンロードして調べます。
  2. ファイルを作成し、ファイルの場所をパラメーターとして返すAjaxMethodを記述します。
  3. クライアント側の関数を作成して、ステップ2でメソッドを呼び出します。このメソッドが呼び出されたときにインジケーターを表示します。
  4. クライアント側のコールバックメソッドを作成して、インジケーターを非表示にし、ユーザーが要求したファイルを表示/ダウンロードします。
  5. クライアント側の関数呼び出しをボタン要素に追加します。

サーバー側のメソッドが終了すると、コールバックが呼び出されます。

これがお役に立てば幸いです！

ここで紹介するソリューションは、<！> quot; Loading ... <！> quot;を許可する方法を示すことを目的としています。サーバー側の処理中に表示され、サーバー側の処理が完了すると消えます。

これは、非常に基本的な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>

ご覧のとおり、<！> quot; Loading ... <！> quot;を保持する<div>があります。メッセージ。

原則は、XMLHttpRequestオブジェクトのreadyStateに応じてonreadystatechangeを表示/非表示にすることです。

actionのCache-control: no-cacheハンドラーを使用して、<=>変更をトリガーしました。

使用するバックエンドphpスクリプト（フォームの<=>として宣言）は、sleep（5）を実行して<！> quot; Loading ... <！> quot;メッセージが5秒間表示されます。

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

<=>ヘッダーが必要です。通常、設定しない場合、ブラウザーは必要に応じて要求を再送信することを避けて、応答をキャッシュするためです。

<！> quot;はじめに<！> quot; AJAXドキュメントは Mozilla MDC です。

PrototypeのようなJavascriptフレームワークにより、ブラウザセーフなアプローチを利用して、全体をはるかに穏やかに処理でき、デバッグの時間を節約できます。

編集：

ASP.NETもASPも知らないのでphpを選択しました。ごめんなさい。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top