処理時間の長い ASP.NET ページの進行状況をクライアント ブラウザで表示する方法


はじめに


この資料では、処理時間の長い Microsoft ASP.NET ページの進行状況をクライアント ブラウザで表示する方法について、手順を追って説明します。 ページの読み込みが完了するまで、次の JavaScript プロシージャを呼び出すことができます。 この操作により、ページを読み込み中であることと、ブラウザがページに問題なくアクセスできることを確認することができます。
  • StartShowWait 関数および ShowWait 関数は、サーバー コントロールがページに表示されるまで、"Loading..." というテキストをクライアント ブラウザに表示します。
  • HideWait 関数は、コントロールがページに表示された直後に、上記のテキストを非表示にします。
先頭に戻る

必要条件

この資料は、次のトピックについて詳しい知識のあるユーザーを対象としています。
  • ASP.NET プログラミング
  • Microsoft Visual Basic .NET または Microsoft Visual C# .NET
  • JavaScript プログラミング
必要なハードウェア、ソフトウェア、ネットワーク インフラストラクチャ、および Service Pack は、次のとおりです。
  • Microsoft インターネット インフォメーション サービス
  • Microsoft Visual Studio .NET
  • Microsoft .NET Framework
先頭に戻る

サーバー コントロール付きの ASP.NET アプリケーションの作成

  1. Visual Studio .NET を起動します。
  2. [ファイル] メニューの
    [新規作成] をポイントし、[プロジェクト] をクリックします。
  3. [新しいプロジェクト] ダイアログ ボックスで、
    [プロジェクトの種類] ボックスの一覧の [Visual C# プロジェクト] または [Visual Basic プロジェクト] をクリックします。
  4. [テンプレート] ボックスの一覧で、[ASP.NET Web アプリケーション] をクリックします。 デフォルトで、WebForm1.aspx という名前のページが作成されます。
  5. TextBox コントロールまたは
    Button コントロールを WebForm1.aspx ページに追加します。

    注: このコントロールは、ページが読み込まれたときにコントロールが表示されるように追加します。
先頭に戻る

JavaScript 関数の宣言および呼び出し

ASP.NET ページの処理は連続していないため、出力ストリームには通常、コントロールは存在しません。 ただし、Response.Write 関数を使用して、データを出力ストリームに即座に出力できます。
  1. WebForm1.aspx ページを右クリックし、[コードの表示] をクリックします。 WebForm1.aspx.cs ファイルまたは WebForm1.aspx.vb ファイルの宣言セクションに、次のコードを追加します。

    Visual C# .NET のコード
    using System.Threading;
    Visual Basic .NET のコード
    Imports System.Threading
  2. 次のコードを Page_Load イベント プロシージャに追加します。

    Visual C# .NET のコード
    Response.Write("<div id='mydiv' >");
    Response.Write("_");
    Response.Write("</div>");
    Response.Write("<script>mydiv.innerText = '';</script>");
    Visual Basic .NET のコード
    Response.Write("<div id='mydiv' >")
    Response.Write("_")
    Response.Write("</div>")
    Response.Write("<script>mydiv.innerText = '';</script>")
  3. 次の JavaScript 関数 (StartShowWait
    ShowWait、および HideWait という名前) を使用して、クライアント ブラウザでページが読み込まれるまで、出力ストリームに書き込みを行います。
    • ShowWait 関数は、<DIV> 要素のテキスト値を、10 のピリオド ("..........") を末尾に追加した "Loading" というテキストに設定します。
    • StartShowWait 関数は、ShowWait 関数を 1 秒ごとに呼び出し、<DIV> 要素をブラウザで表示します。
    • HideWait 関数は、<DIV> 要素をブラウザで非表示にします。
    StartShowWait 関数を呼び出すステートメントを作成し、Response.Flush メソッドを使用して、<DIV> 要素のテキスト値をクライアントに送信します。 [
    ページの処理が完了すると HideWait 関数が呼び出され、クライアントに送信されます。 HideWait 関数は、body オブジェクトの onload イベントで呼び出すこともできます。

    コントロールがページに読み込まれるまで、クライアント ブラウザに 10 のピリオド ("..........") を末尾に追加した "Loading" というテキストを表示し、コントロールがブラウザ ウィンドウに表示された直後にこのテキストを非表示にするには、次の手順を実行します。
    1. Webform1.aspx.cs ファイルまたは Webform1.aspx.vb ファイルの Page_Load イベント プロシージャで、次のコードを追加します。

      Visual C# .NET のコード
      Response.Write("<script language=javascript>;");
      Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
      Response.Write("{var output; output = 'Loading';dots++;if(dots>=dotmax)dots=1;");
      Response.Write("for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText = output;}");
      Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible';
      window.setInterval('ShowWait()',1000);}");
      Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';window.clearInterval();}");
      Response.Write("StartShowWait();</script>");
      Response.Flush();
      Thread.Sleep(10000) ;
      Visual Basic .NET のコード
      Response.Write("<script language=javascript>;")
      Response.Write("var dots = 0;var dotmax = 10;function ShowWait()")
      Response.Write("{var output; output = 'Loading';dots++;if(dots>=dotmax)dots=1;")
      Response.Write("for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText = output;}")
      Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible';
      window.setInterval('ShowWait()',1000);}")
      Response.Write("function HideWait(){mydiv.style.visibility =
      'hidden';window.clearInterval();}")
      Response.Write("StartShowWait();</script>")
      Response.Flush()
      Thread.Sleep(10000)
    2. WebForm1.aspx ページの HTML コード エディタに切り替え、<HEAD> タグ内に次のコードを追加します。
      <script>
      HideWait();
      </script>
  4. [デバッグ] メニューの [開始
    ] をクリックして、アプリケーションを実行します。
注: 上記のコードは、Microsoft Internet Explorer では有効ですが、Netscape Navigator では機能しません。

先頭に戻る

関連情報


詳細については、次の MSDN (Microsoft Developer Network) Web サイトを参照してください。先頭に戻る