OK. Basically I have a scenario in which the user clicks the Send button - this fires off a function that sends an email, stores the info in the database etc. This process can take a long time due to the email having large attachments.

I want to implement a progress bar, but I'm not too sure how to accomplish this. All the tutorials just show you how to paint a bar - but what I want to know is how to actually implement this. Where do I start this process, how will I find out the actual progress, how can I get it to run in the background whilst the real process is running?

Can anyone point me in the right direction?

Thanks!

It's very tough to create a progress bar in an ASP.NET application (or any web app for that matter), because of the disconnected nature of a web app. Generally, a process is happening on the server, so the client-side is not even rendered yet.

Here's a little control that I use that might help you out:

The control:
--------------

using System;
using System.Text;
using System.Web.UI;

namespace Tester
{
 [ToolboxData("<{0}:BusyControl runat=server></{0}:BusyControl>")]
 public class BusyControl : System.Web.UI.WebControls.WebControl
 {
  // Found at:
  // C:\Program Files\Microsoft Office\CLIPART\PUB60COR\AG00011_.GIF
  private string m_ImageFilePath = @"AG00011_.GIF";

  public BusyControl()
  {
  }
  protected override void OnInit(EventArgs e)
  {
   base.OnInit(e);

   StringBuilder sbScript = new StringBuilder();

   sbScript.Append("\n");
   sbScript.Append("<div id='busyControlDiv' align='center' style='z-index:5000;'>\n");
   sbScript.Append("<br>\n");
   sbScript.Append("<br>\n");
   sbScript.Append("<br>\n");
   sbScript.Append("<br>\n");
   sbScript.Append("<br>\n");
   sbScript.Append(" <table align='center' bgcolor='ButtonFace' border='2' bordercolor='ButtonShadow' bordercolordark='ButtonShadow' ");
   sbScript.Append("  bordercolorlight='InactiveBorder' rules='none' cellpadding='10' cellspacing='0' width='30%'>\n");
   sbScript.Append("  <tr>\n");
   sbScript.Append("   <td width='100%' align='center' valign='center' nowrap>\n");
   sbScript.Append("    <font size='3' color='Black'>\n");
   sbScript.Append("     <b>Working...</b>\n");
   sbScript.Append("    </font>\n");
   sbScript.Append("    <br>\n");
   sbScript.Append("    <img src='" + this.m_ImageFilePath + "' border='0'>\n");
   sbScript.Append("   </td>\n");
   sbScript.Append("  </tr>\n");
   sbScript.Append(" </table>\n");
   sbScript.Append("</div>\n");

   this.Page.Response.Write(sbScript.ToString());
   this.Page.Response.Flush();
  }
  protected override void OnLoad(EventArgs e)
  {
   base.OnLoad(e);

   StringBuilder sbScript = new StringBuilder();

   sbScript.Append("\n");
   sbScript.Append("<script language=\"JavaScript\" type=\"text/javascript\">\n");
   sbScript.Append("<!--\n");
   // W3C DOM
   sbScript.Append("if ( document.getElementById )\n");
   sbScript.Append(" document.getElementById('busyControlDiv').style.display = 'none';\n");
   // IE 4
   sbScript.Append("else if ( document.all )\n");
   sbScript.Append(" document.all.busyControlDiv.style.display = 'none';\n");
   // NS 4
   sbScript.Append("else if ( document.layers )\n");
   sbScript.Append(" document.busyControlDiv.display = 'none';\n");

   sbScript.Append("//-->\n");
   sbScript.Append("</script>\n");
   
   this.Page.Response.Write(sbScript.ToString());
  }
 }
}

In the page to use it:
-----------------------

At the top of the aspx file add:
<%@ Register TagPrefix="cc1" Namespace="Tester" Assembly="Tester" %>

Between the <form> tags add:
<cc1:BusyControl id="BusyControl1" runat="server"></cc1:BusyControl>

In the CodeBehind, Page_Load event handler:
private void Page_Load(object sender, System.EventArgs e)
{
 // Here we just wait 10 seconds to emulate a lengthy process...
 TimeSpan waitTime = new TimeSpan(0, 0, 0, 10);
 System.Threading.Thread.Sleep(waitTime);

 // Indicate that the process is done...    
 this.Response.Write("The lengthy process has completed and the page has now fully loaded.");
}

NC...

Hey I tried as u shown that ...............

I have created on web control lib with name BusyControl and added that dll to my Application .....and next process of registering the control ...

But when i m running that page it is giving error "File or assembly name Tester, or one of its dependencies, was not found." ... Did all the things ....

Properly .... Plz help me out .... to find the answer

 
Thanks

Sagar  :)

"Tester" is the namespace name.
     using System;
     using System.Text;
     using System.Web.UI;

     namespace Tester
     {
          ...

You'd have to change that to match your particular Project/Solution.

This is such a basic thing that I'd also suggest that you read up on creating .NET applications in general and ASP.NET applications specifically. Some excellent tutorials can be found in the "Learn" option in the menu at the top of this page.

NC...

Hi

i was actuually looking for the progress bar on web page like gmail and i have done also following is my code for that :

i have tried to make it like GMAIL....not fully as my progress bar is progressing but when it progressing even if it is not fully full even though it is showing the data

please go through the code and guide me.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ProgressPage.aspx.vb" Inherits="ProgressPage" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

var ctr = 1;

var ctrMax = 90; // how many is up to you-how long does your end page take?

//set this page's window.location.href to the target page

// but make it wait while we do our progress...

// once the interval is cleared, we yield to the result page (which has been running)

endtd.style.width="300px"

</script>

<style type="text/css">

#indicator

</head>

<body onload="Begin()" onunload="End()">

<form id="Form1" method="post" runat="server">

<table id="outer" border="1" width="300px" style="border-color:Black" cellpadding="0" cellspacing="0" width="0" align="left" >

<div align="left"><h3 style="font-family:Verdana;font-weight:normal;color:Black;height: 18px;width:300px;">Loading<asp:Label ID="LBLuSERnAME" runat="server" Text="Label"/></h3></div>

<tr >

<td >

<table id="indicator" bgcolor="#C3D9FF" cellpadding="0" cellspacing="0" width="0" align="left" >

<tr bgcolor="white" style="width:55px;border-color:Black;border-left-width:thin" ><tr align="left">

<td id="endtd" align="left" style="height:7px;" bgcolor="#C3D9FF" width="300px"></td>

</tr>

</table>

</tr>

</form>

</html>

ACTUALLY MY IDEA IS LIKE before showing the page i will show the page which has the progress bar when my page gets totally loaded then it will automatically show my data page.

Thanks

Parth

I have already posted a progress bar for server-side processes. See my earlier posts on this thread. You might want to check into an AJAX control http://blah.winsmarts.com/2007-1-AJAX_Progress_Bar.aspx

NC...