How to show progress in the client browser for a long-running ASP.NET page

This step-by-step article describes how to show progress in the client browser for a long-running Microsoft ASP.NET page. You can call the following JavaScript procedures until the page is loaded. This action makes sure that the page is in the process of loading and that the browser does not have any problem getting to the page.

• The StartShowWait and the ShowWait functions show "Loading..." text on the client browser until the server controls appear on the page.
• The HideWait function hides this text as soon as the controls appear on the page.

back to the top

Requirements

This article assumes that you are familiar with the following topics:

• ASP.NET programming
• Microsoft Visual Basic .NET or Microsoft Visual C# .NET
• JavaScript programming

The following list outlines the recommended hardware, software, network infrastructure, and service packs that you need:

• Microsoft Internet Information Services
• Microsoft Visual Studio .NET
• The Microsoft .NET Framework

back to the top

Create an ASP.NET Application with server controls

1. Start Visual Studio .NET.
2. On the File menu, point to
   New, and then click Project.
3. In the New Project dialog box, click
   Visual C# Projects or Visual Basic Projectsunder Project Types.
4. Under Templates, click ASP.NET Web Application. By default, a page that is named WebForm1.aspx is created.
5. Add a TextBox control or a
   Button control to the WebForm1.aspx page.
   
   Note You add this control so that you can see a control when your page is loaded.

back to the top

Declare and then call JavaScript functions

Because ASP.NET page processing is not sequential, the controls would not be present in the output stream. However, the Response.Write function outputs data to the output stream immediately.

1. Right-click the WebForm1.aspx page, and then click View Code. Add the following code in the declaration section of the WebForm1.aspx.cs or the WebForm1.aspx.vb file:
   
   Visual C# .NET code

   using System.Threading;
   

   Visual Basic .NET code

   Imports System.Threading

2. Add the following code to the Page_Load event procedure:
   
   Visual C# .NET code

   Response.Write("<div id='mydiv' >");
   Response.Write("_");
   Response.Write("</div>");
   Response.Write("<script>mydiv.innerText = '';</script>");
   

   Visual Basic .NET code

   Response.Write("<div id='mydiv' >")
   Response.Write("_")
   Response.Write("</div>")
   Response.Write("<script>mydiv.innerText = '';</script>")

3. The following JavaScript functions that are named StartShowWait,
   ShowWait, and HideWait are used to write to the output stream until the page is loaded on the client browser:
   • The ShowWait function sets the text value of the <DIV> element to "Loading" followed by 10 periods ("..........").
   • The StartShowWait function calls the ShowWait function every second and then makes the <DIV> element visible on the browser.
   • The HideWait function hides the <DIV> element from being viewed on the browser.
   Write a statement to call the StartShowWaitfunction, and then use the Response.Flush method to send the text value of the <DIV> element to the client. The
   HideWait function is called when the page has finished processing and is sent to the client. This function can also be called in the body onload event.
   
   To show the text "Loading" followed by 10 periods ("..........") on the client browser until the controls on the page are loaded, and then to hide this text as soon as the controls are rendered on the browser window, follow these steps:
   1. In the Page_Load event procedure of the Webform1.aspx.cs or the Webform1.aspx.vb file, add the following code:
      
      Visual C# .NET code

      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 code

      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. Switch to the HTML code editor for the WebForm1.aspx page, and then add the following code inside the <HEAD> tag:

      <script>
      HideWait();
      </script>

4. On the Debug menu, click Start
   to run your application.

Note This code works in Microsoft Internet Explorer, but not with Netscape Navigator.

back to the top