Microsoft KB Archive/837375

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

Article ID: 837375

Article Last Modified on 5/17/2007

-

APPLIES TO


 * Microsoft ASP.NET 1.1
 * Microsoft ASP.NET 1.0

-



IN THIS TASK

 * INTRODUCTION
 * Requirements
 * Create an ASP.NET Application with server controls
 * Declare and then call JavaScript functions
 * REFERENCES



INTRODUCTION
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 &quot;Loading...&quot; 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 Projects under 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.   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   Add the following code to the Page_Load event procedure:

Visual C# .NET code Response.Write(&quot; &quot;); Response.Write(&quot;_&quot;); Response.Write(&quot; &quot;); Response.Write(&quot; mydiv.innerText = ''; &quot;); Visual Basic .NET code Response.Write(&quot; &quot;) Response.Write(&quot;_&quot;) Response.Write(&quot; &quot;) Response.Write(&quot; mydiv.innerText = ''; &quot;)  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  element to &quot;Loading&quot; followed by 10 periods (&quot;..........&quot;). The StartShowWait function calls the ShowWait function every second and then makes the  element visible on the browser. The HideWait function hides the <DIV> element from being viewed on the browser.</li></ul>

Write a statement to call the StartShowWait function, 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 &quot;Loading&quot; followed by 10 periods (&quot;..........&quot;) 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: <ol style="list-style-type: lower-alpha;">  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(&quot; ;&quot;); Response.Write(&quot;var dots = 0;var dotmax = 10;function ShowWait&quot;); Response.Write(&quot;{var output; output = 'Loading';dots++;if(dots>=dotmax)dots=1;&quot;); Response.Write(&quot;for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText = output;}&quot;); Response.Write(&quot;function StartShowWait{mydiv.style.visibility = 'visible'; window.setInterval('ShowWait',1000);}&quot;); Response.Write(&quot;function HideWait{mydiv.style.visibility = 'hidden';window.clearInterval;}&quot;); Response.Write(&quot;StartShowWait; &quot;); Response.Flush; Thread.Sleep(10000) ; Visual Basic .NET code Response.Write(&quot; ;&quot;) Response.Write(&quot;var dots = 0;var dotmax = 10;function ShowWait&quot;) Response.Write(&quot;{var output; output = 'Loading';dots++;if(dots>=dotmax)dots=1;&quot;) Response.Write(&quot;for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText = output;}&quot;) Response.Write(&quot;function StartShowWait{mydiv.style.visibility = 'visible'; window.setInterval('ShowWait',1000);}&quot;) Response.Write(&quot;function HideWait{mydiv.style.visibility = 'hidden';window.clearInterval;}&quot;) Response.Write(&quot;StartShowWait; &quot;) Response.Flush Thread.Sleep(10000) </li>  Switch to the HTML code editor for the WebForm1.aspx page, and then add the following code inside the <HEAD> tag: HideWait; </li></ol> </li> On the Debug menu, click Start to run your application.</li></ol>

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

back to the top

<div class="references_section">