Hello eladla,
As for your scenario, my understanding is that your custom webcontrol will
do postback to do some server-side processing which may take some time. And
during this processing period, you want to display a progress bar on
client-page to indicate the user this processing, correct?
Based on my experience, such progress bar displaying should be done through
client-side script rather than server-side rendering code. This is because
when the page is postback, all the processing is at server-side, and
generally it is only at the end of server-side processing will the page
flush its response content out. So use server-side rendering to output
progress bar UI is not a proper way.
My suggestion is you display the progress bar before your control(the page)
is postback. In ASP.NET 2.0, the Submit Button has included a
"OnClientClick" property which can help conveniently execute some
client-script before the button's submit operation be postback. therefore
we can put the progress bar displaying script code here. There're two ways
to display a bar:
1. dynamically display a image that show a dynamic gif displaying progress
bar
2. use dhtml to display a progress bar
Here I found a web article using dhtml to create a XP WINDOWS update like
progress bar.
#WinXP Progress Bar (version 1.2)
http://www.dynamicdrive.com/dynamicindex11/xpprogressbar.htm
I've modified its originall script code and create a test page to show how
to use it in our page. The test page use a Table to divide page into
several parts. And there are two button in two cells separately. When
either of the button is clicked, the page will be postback, and it will
also show a progress bar before the postback is finished and return back to
client. here is the test page's complete aspx template and codebehind
(also include the modified progressbar javascript file):
=========aspx===============
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function showprogressbar(cellid)
{
var bar2=
createBar(320,15,'white',1,'black','green',85,7,3,"alert('Hi there')",
document.getElementById("bar" + cellid));
bar2.showBar();
}
</script>
<script type="text/javascript" src="xp_progress.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%;height:500pt">
<tr>
<td style="width: 100px">
cell00</td>
<td style="width: 100px">
cell01<br />
<div id="bar01"></div>
<asp:Button ID="btnSubmit01" runat="server"
Text="Cell01 Button" OnClientClick="showprogressbar('01');"
OnClick="btnSubmit01_Click"/></td>
</tr>
<tr>
<td style="width: 100px">
cell10
<div id="bar10"></div>
<asp:Button ID="btnSubmit10" runat="server"
Text="Cell10 Button" OnClick="btnSubmit10_Click"
OnClientClick="showprogressbar('10');"/></td>
<td style="width: 100px">
cell11</td>
</tr>
<tr>
<td style="width: 100px">
cell20</td>
<td style="width: 100px">
cell21</td>
</tr>
</table>
</div>
</form>
</body>
</html>
======================================
===========code behind==================
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Threading;
public partial class javascript_ProgressBarPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit10_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
Response.Write("<br/>btnSubmit10_Click .................");
}
protected void btnSubmit01_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
Response.Write("<br/>btnSubmit01_Click .................");
}
}
============================================
#please put the xp_progress.js file in the same folder with the test page
=========modified javascript(xp_progress.js)================
var w3c=(document.getElementById)?true:false;
var ie=(document.all)?true:false;
var N=-1;
function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action,
container){
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible;
position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px;
background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px;
border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute;
font-size:1px">';
for(i=0;i<blocks;i++){
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px;
font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((1
00-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
container.innerHTML = t;
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+N);
bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById('_xpbar'+N);
bA.blocks=blocks;
bA.N=N;
bA.w=w;
bA.h=h;
bA.speed=speed;
bA.ctr=0;
bA.count=count;
bA.action=action;
bA.togglePause=togglePause;
bA.showBar=function(){
this.bar.style.visibility="visible";
}
bA.hideBar=function(){
this.bar.style.visibility="hidden";
}
bA.tid=setInterval('startBar('+N+')',speed);
return bA;
}}
function startBar(bn){
var t=(ie)?document.all['blocks'+bn]:document.getElementById('blocks'+bn);
if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t.w){
t.style.left=-(t.h*2+1)+'px';
t.ctr++;
if(t.ctr>=t.count){
eval(t.action);
t.ctr=0;
}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';
}
function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}
function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}
========================================
In addition there are many other webarticle discussing on display dhtml
progress bar on web page:
#DHTML Progress Bar Widget using JavaScript and CSS
http://www.wingo.com/dhtml/ProgressBar.html
http://www.eggheadcafe.com/articles/20010610.asp
http://www.java2s.com/Code/JavaScript/Development/Javascriptprogressbar.htm
Hope these helps. Please feel free to let me know if you have anything
unclear.
Sincerely,
Steven Cheng
Microsoft MSDN Online Support Lead
==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.
Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
