1

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

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

ボタンの onclick イベント中に (OnClientClick を使用して) 起動する JavaScript を使用しようとしましたが、それが機能している間、Web 要求がいつ終了したかを確認する方法がわかりません。クライアントに応答を送信するだけなので、完全なポストバックは発生しません。

UpdatePanel でボタンをラップして UpdateProgress を使用しようとしましたが、HttpContext.Current.Response に応答を送信して Response.End() を呼び出すと、応答がうまくいかないため、javascript でエラーが発生します。 (ユーザーがダウンロードできるように Excel シートを送り返します)。

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

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

4

4 に答える 4

4

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

.NET PageMethodを使用するこの例を見てください（シナリオで可能な場合）。

jQueryでページメソッド呼び出しを定義し、非表示のdivで読み込み中のメッセージに取り組むことができます。

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

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

  1. ページにボタンがあり、jQueryonClickを追加します。
  2. 非表示の読み込みdivを表示するクリックすると、フォームのパラメーターを受け取るpageメソッドへのajax呼び出しを行います。
  3. pageメソッドは電子メールなどを実行し、そこにあるonSuccessjavascriptメソッドのフォームに戻ります。
  4. onSuccessは、読み込み中のdivを非表示にします。
于 2009-02-25T16:13:54.357 に答える
1

これが私の解決策です：

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

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

お役に立てれば ！

于 2009-02-24T09:53:39.020 に答える
1

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

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

もう1つの方法は、データをワーカースレッドに渡し、準備ができたらレポートが電子メールで送信されるか、サイトの「レポート」セクションで利用できるようになることを示すメッセージをすぐに返すことです。ただし、このアプローチには、レポートが完了したときに即座に通知するという利点がありません。

于 2008-10-08T22:59:13.330 に答える
0

ここで紹介するソリューションは、サーバー側の処理中に [読み込み中...] ボックスを表示し、サーバー側の処理が完了すると非表示にする方法を示すことを目的としています。

私は非常に基本的な 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>、"Loading..." メッセージを保持する があります。

原則は、オブジェクトのに<div>応じてを表示/非表示にすることです。XMLHttpRequestreadyState

onreadystatechangeのハンドラーを使用してXMLHttpRequest、変更をトリガーしましたreadyState。

私が使用するバックエンド php スクリプト (フォームの として宣言されているaction) は、sleep(5) を実行して、"Loading..." メッセージを 5 秒間表示します。

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

通常、Cache-control: no-cacheヘッダーを設定しないと、ブラウザーが応答をキャッシュし、必要に応じて要求を再送信するのを回避するため、ヘッダーが必要です。

「始める」AJAX ドキュメントの良い情報源はMozilla MDCです。

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

編集：

私は ASP.NET も ASP も知らないので、php を選びました。申し訳ありません。

于 2009-03-02T13:47:09.797 に答える