473,719 Members | 2,084 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Progress bar on composite control

Hi!
I am creating a composite control the does some of it`s own data access.
I want to display a progress bar between the time the page is loaded and the
control place holder is displayed and final display of the data from the
database.
I was thinking of manually opening a second thread in the Render method, but
nothing is displayed before the render method exits anyway.

Anyone know of a good way to do this?
I have been working on this for the past 12Hs and I`m going crazy coz I
always get back to square-one where nothing is displayed until the render
method exits.

Please help!
Thank you.
Oct 16 '06 #1
15 3540
Well I have kind of found a workaround this...
Since I don`t need actual feed back and just a stupid animated gif will do
in my case.
While rendering the control I call parent.page.res ponse.flush()
This works for an empty page...even if there are more than two controls on
the page.
But my gutt feeling tells me this will have very bad results in more complex
web pages.
Please give your thoughts and if you can think of a better way, I would love
to see it.
Thank you!
Oct 16 '06 #2
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
"OnClientCl ick" 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/dynamici...rogressbar.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>Untitl ed Page</title>
<script type="text/javascript">
function showprogressbar (cellid)
{
var bar2=
createBar(320,1 5,'white',1,'bl ack','green',85 ,7,3,"alert('Hi there')",
document.getEle mentById("bar" + cellid));
bar2.showBar();

}
</script>

<script type="text/javascript" src="xp_progres s.js"></script>

</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%;height:500 pt">
<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="btnSub mit01_Click"/></td>
</tr>
<tr>
<td style="width: 100px">
cell10
<div id="bar10"></div>
<asp:Button ID="btnSubmit10 " runat="server"
Text="Cell10 Button" OnClick="btnSub mit10_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.Configur ation;
using System.Collecti ons;
using System.Web;
using System.Web.Secu rity;
using System.Web.UI;
using System.Web.UI.W ebControls;
using System.Web.UI.W ebControls.WebP arts;
using System.Web.UI.H tmlControls;
using System.Threadin g;

public partial class javascript_Prog ressBarPage : System.Web.UI.P age
{
protected void Page_Load(objec t sender, EventArgs e)
{

}
protected void btnSubmit10_Cli ck(object sender, EventArgs e)
{
Thread.Sleep(50 00);

Response.Write( "<br/>btnSubmit10_Cl ick ............... ..");



}
protected void btnSubmit01_Cli ck(object sender, EventArgs e)
{
Thread.Sleep(50 00);

Response.Write( "<br/>btnSubmit01_Cl ick ............... ..");
}
}

=============== =============== ==============

#please put the xp_progress.js file in the same folder with the test page
=========modifi ed javascript(xp_p rogress.js)==== ============

var w3c=(document.g etElementById)? true:false;
var ie=(document.al l)?true:false;
var N=-1;

function createBar(w,h,b gc,brdW,brdC,bl kC,speed,blocks ,count,action,
container){
if(ie||w3c){
var t='<div id="_xpbar'+(++ N)+'" style="visibili ty:visible;
position:relati ve; overflow:hidden ; width:'+w+'px; height:'+h+'px;
background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'p x;
border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+' " style="left:-'+(h*2+1)+'px; position:absolu te;
font-size:1px">';
for(i=0;i<block s;i++){
t+='<span style="backgrou nd-color:'+blkC+'; left:-'+((h*i)+i)+'px ;
font-size:1px; position:absolu te; 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.inner HTML = t;

var bA=(ie)?documen t.all['blocks'+N]:document.getEl ementById('bloc ks'+N);
bA.bar=(ie)?doc ument.all['_xpbar'+N]:document.getEl ementById('_xpb ar'+N);
bA.blocks=block s;
bA.N=N;
bA.w=w;
bA.h=h;
bA.speed=speed;
bA.ctr=0;
bA.count=count;
bA.action=actio n;
bA.togglePause= togglePause;
bA.showBar=func tion(){
this.bar.style. visibility="vis ible";
}
bA.hideBar=func tion(){
this.bar.style. visibility="hid den";
}
bA.tid=setInter val('startBar(' +N+')',speed);
return bA;
}}

function startBar(bn){
var t=(ie)?document .all['blocks'+bn]:document.getEl ementById('bloc ks'+bn);
if(parseInt(t.s tyle.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.cou nt){
eval(t.action);
t.ctr=0;
}}else t.style.left=(p arseInt(t.style .left)+t.h+1)+' px';
}

function togglePause(){
if(this.tid==0) {
this.tid=setInt erval('startBar ('+this.N+')',t his.speed);
}else{
clearInterval(t his.tid);
this.tid=0;
}}

function togglePause(){
if(this.tid==0) {
this.tid=setInt erval('startBar ('+this.N+')',t his.speed);
}else{
clearInterval(t his.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/JavaScrip...rogressbar.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/subscripti...ult.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/subscripti...t/default.aspx.

=============== =============== =============== =====

This posting is provided "AS IS" with no warranties, and confers no rights.

Oct 17 '06 #3
Thanks for your reply Steven.
But I don`t think you understand what I am trying to do...maybe I didn`t
explain myself well enough...

My custom control does some data access in the Render method and this
process takes time.
What I want to do is display a progress bar while the control is accessing
the data needed to fully render the control.
Oct 17 '06 #4
Thanks for your reply and the further explanation.

Yes, my original reply seems address another scenario different from your
case.

I think the difficulty here is that you do the long run task in render
method. At that time, the Httpresponse may buffer the output content and
flush them when the complete page response has been generated. Also, even,
we can manually flush some certain content out during the Rendering, it
will reside at the begining of the entire page's response content which is
not what we expect.

For your scenario, how long will it normally take to finish the UI
generation? If it is really a long time, I think you can consider the
following design:

** in your web control, before rendering, determine whether this is the
first time and will need to take long time for process output content. If
so, create a new thread to do long-run task and the control it self simply
return the progressbar html. And this html contains some script code that
can send AJAX request to sever-side in background.

**The AJAX request query the task status at server-side and if it get
signal that the task has finished, it call script to postback the whole
page and your control will render based on the generated content.

** Or if the generated content is also plain text (html), you can event
transfer it to client through AJAX webrequest call and display it on page
through clientscript.

How do you think of this? Please feel free to let me know if you have any
other consideration or ideas on this.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead
This posting is provided "AS IS" with no warranties, and confers no rights.

Oct 18 '06 #5
Just what I was thinking...
Only I decided to go on a different route....
I`m going to do the same thing...only with an updatepanel in oreder to allow
partial rendering of the page as to not require a full page refresh...

May only problem is, I`m not up-to-date on the mechanics of doing what you
sugest.
Could you please point me to some examples of how to start an AJAX call from
client-script and how to query it and display the data when it`s done?

Thank you.
Oct 18 '06 #6
Hi Eladla,

Thanks for your quick response.

For AJAX style script callback, basically speaking, they're just some
encapsulated interface for calling browser specific client components(like
the XMLHTTP COM component in IE) to send http request to server. In
ASP.NET 2.0, it has provide a new feature called "Script CallBack", this
feature let you define some functions in your page or control(impleme nt a
certain interface) which can be called by client-side script without
postback. Here is the reference on this in MSDN:

#Implementing Client Callbacks Without Postbacks in ASP.NET Web Pages
http://msdn2.microsoft.com/en-us/library/ms178208.aspx

there are many web article demonstrate using this script callback in
ASP.NET 2.0 page.

#ASP.NET 2.0 Client Callbacks inside a User Control
http://pietschsoft.com/Blog/Post.aspx?PostID=784

#ASP.NET 2.0's Client Callback Feature
http://dotnetjunkies.com/Tutorial/E8...0EECF13D7.dcik

Script callback is just a small feature involved in ASP.NET initial release
and it is not considered the formal support of AJAX of ASP.NET. The ASP.NET
product team has already begun developing a new framework for provide AJAX
based pages in ASP.NET 2.0 application(sti ll under beta). The project is
named "Atlas", here is a blog article from ASP.NET product manager's weblog
introducing this project:

#Atlas Project
http://weblogs.asp.net/scottgu/archi...28/416185.aspx

Also, you can find plenty of resources and information on this in the
official home site of ATLAS:

http://atlas.asp.net/Default.aspx?tabid=47

Hope this helps. Please feel free to let me know if there is anything else
we can help.

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead
This posting is provided "AS IS" with no warranties, and confers no rights.

Oct 18 '06 #7
Interesting...T hank you.

Do you know of any samples using ATLAS`s updateprogress control to do this?
Oct 18 '06 #8
I have decided to go the updatepanel router.

What I want to do is:

1. Load the page with an animated gif inside the panel and something like:
“Please hold…” or something…
2. Call the server to run some code, access the DB, call a few methods
inside a DLL and return with the results
3. Put the results into controls that will berendered inside the update panel
4. update the update panel
I am a little stuck on this…

How do I call the method on the server?

How do I put the values inside the controls to be updated to the panel and
how do I update the panel?

I would be very thankful if you could point me to some samples, if you know
of any.
Oct 18 '06 #9
Hi Eladla,

As for sample applications, so far what I can find is the quickstart
samples on the official site, you can also download them there:

#Sample Applications
http://atlas.asp.net/default.aspx?tabid=47&subtabid=471

As for the updatePanel router, do you mean using the UpdatePanel in the
ATLAS package? I've ever played with it in some CTP version of the ATLAS,
and updatePanel is just a container which can make ASP.NET control act as
normal but without postback the page(for example, click button...). And it
seems dynamically emitting client-script in ATLAS updatepanel not quite
convenient.

From your description, you just want to call a server-side function in your
webcontrol (at client-side), it is not necessary to use ATLAS updatepanel,
you can use its webservice interface to call server-side function and
return some value (like html fragment ) to update your control content at
client-side.

Also, this can be done through the scriptcallback I mentioned ealier and
since script callback is built-in feature in ASP.NET 2.0, you can use it
without additional configuration or add-on installation. ATLAS is an
application level solution, each page use ATLAS featuer need to add a
scriptmanager in page and you also need to add many configuration setting
in web.config. Therefore, for webcontrol developing, it seems be too
expensive. How do you think?

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead
This posting is provided "AS IS" with no warranties, and confers no rights.

Oct 19 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1586
by: Satya Bojanapally | last post by:
Hi, I am unable to add a pager for this composite control. I had created a composite control in C#. The control is having 5 labels, one radio button and one DropDownList control. The composite control should display 2 columns and 2 rows per page. I am able to display 4 Composite Controls independently, when the user is changing the index of the DropDownList control, automatcially the output should get reflected on the composite control...
1
2064
by: Paul Kia | last post by:
I have an ATL composite control which I drop into a tab control dialog page of an MFC application. When I click on the composite control and then click anywhere outside the MFC application, the application immediately hangs! Spy++ indicates that the application is hanging on the WM_GETDLGCODE message. This problem does not happen if the ATL control is a standard (that is, non-composite) control, neither does it happen if the composite...
1
3146
by: sleigh | last post by:
Hello, I'm building a web application that will build a dynamic form based upon questions in a database. This form will have several different sections that consist of a panel containing one to many questions. To keep it simple, I'll describe the basics of what I'm trying to design. I've created a TextBox composite control that consists of a label for
10
2320
by: dx | last post by:
I have the Microsoft Press: Developing Microsoft ASP.NET Server Controls and Components book. It's starting to shine some light on control development but there is something about composite controls that I don't understand... I've included a snippet from Chapter 12 below on Composite Controls: <start> Override the CreateChildControls method to instantiate child controls, initialize them, and add them to the control tree. Do not perform...
3
3005
by: Beavis | last post by:
I hate to repost a message, but I am still at the same point where I was when I originally posted, and hopefully someone else will see this one... Ok, so I have gone off and documented the lifecycle of a page with a custom composite control on it. You can find that document here: http://www.ats-engineers.com/lifecycle.htm
2
1545
by: eladla | last post by:
Hi! I`m creating a composite control that does some of it`s own data access. I want a type of progress bar while the control is doing it`s thing. (an animated gif will do, nothing fancy) I don`t really know where to start. I tryed starting another thread in the Render method but: A) This seems very wastefull. B) Nothing is displayed unti the render method is done anyway. Maybe you guys can point me in the right direction.
2
1295
by: eladla | last post by:
Hi! I am creating a composite control that does some of it`s own data access. I want to display a progress bar while the cntrol does it`s thing. I tryed opening up another thread in the Render methos but: A) this seams wastefull B) Nothing shows up until the render method is done, anyway. Can any of you guys please point me in the right direction. Thanks!
3
1948
by: Eric | last post by:
I have created a fairly basic composite control consisting of a Label and a TextBox. In the overridden Render function, I'm creating a table with two rows and each row contains a cell (td). The Label and the TextBox are each rendered in one of the cells. Everything renders fine. The problem is that depending on the column the control represents I may want the textbox to be a different visible size during both design and runtime. I...
6
2629
by: shapper | last post by:
Hello, I am working in a class library with various custom controls. In which cases should a control inherit Control, WebControl and CompositeControl classes? And when should a custom control implement INamingContainer? In this moment I am working on a custom control that is composed by a
1
9123
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9053
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7993
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6658
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5971
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4481
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4744
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3185
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2562
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.