复合控制的进度条 [英] Progress bar on composite control

问题描述

嗨！

我正在创建一个复合控件，它会自己做一些自己的数据访问。

我想在页面之间显示一个进度条加载并显示

控制占位符并显示来自

数据库的数据。

我正在考虑手动打开一个Render方法中的第二个线程，但

无论如何都不会显示渲染方法。


任何人都知道这样做的好方法吗？ />
我在过去的12H一直都在研究这个问题而且我会发疯了因为我需要回到方形一，直到渲染才会显示任何内容

方法退出。


请帮忙！

谢谢。

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.

推荐答案

我有点找到了一个解决方法...

因为我不需要实际的反馈，只需要一个愚蠢的动画GIF就可以了。

in我的情况。

渲染控件时我也是all parent.page.response.flush（）

这适用于空白页面......即使页面上有两个以上的控件，也可以使用
。

但我的gutt感觉告诉我，这将在更复杂的

网页上产生非常糟糕的结果。

请提出你的想法，如果你能想到一个更好的方式，我希望

看到它。

谢谢！

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.response.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!

Hello eladla，

至于你的场景，我的理解是你的自定义webcontrol会回发来做一些服务器端处理，这可能需要一些时间。并且

在此处理期间，您想在

客户页面上显示进度条以指示用户进行此处理，对吗？


根据我的经验，这样的进度条显示应该通过

客户端脚本而不是服务器端呈现代码来完成。这是因为

当页面回发时，所有处理都在服务器端，并且

一般只是在服务器端处理结束时才会页面

刷新其响应内容。所以使用服务器端渲染输出

进度条UI不是一种正确的方式。


我的建议是你在控制之前显示进度条（页面）

是回发。在ASP.NET 2.0中，提交按钮包含了一个

" OnClientClick"在按钮的提交操作被回发之前，可​​以帮助方便地执行一些

客户端脚本的属性。因此

我们可以在此处显示进度条显示脚本代码。有两种方式

来显示一个栏：


1.动态显示一个显示动态gif显示进度的图像

bar


2.使用dhtml显示进度条


在这里，我发现一篇使用dhtml创建XP WINDOWS更新的网页文章喜欢

进度条。


#WinXP进度条（1.2版）
http://www.dynamicdrive.com/dynamici...rogressbar.htm


我已经修改了原始脚本代码并创建了一个测试页面，以显示如何在页面中使用它。

。测试页面使用表格将页面划分为几个部分。两个单元格中分别有两个按钮。当

点击任一按钮时，页面将回发，并且它将在回发完成之前显示进度条并返回

客户。这里是测试页面的完整aspx模板和代码隐藏

（还包括修改后的progressbar javascript文件）：


======= == aspx ===============

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

< head runat =" server">

< title> Untitled Page< / title>

< script type =" text / javascript">

函数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>

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

===========代码背后==================

使用系统;

使用System.Data;

使用System.Configuration;

使用System.Collections;

使用System.Web;

使用System.Web.Security;

使用System.Web.UI;

使用System.Web.UI.WebControls;

使用System.Web.UI.WebControls.WebParts;
使用System.Web.UI.HtmlControls;

使用System.Threading;


公共部分类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 ................."）; < br $>
}

}


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

#please将xp_progress.js文件与测试放在同一个文件夹中页面

=========修改过的javascript（xp_progress.js）================


var w3c =（document.getElementById）？true：false;

var ie =（document.all）？true：false;

var N = -1;


函数createBar（w，h，bgc，brdW，brdC，blkC，speed，blocks，coun t，action，

容器）{

if（即|| w3c）{

var t =''< div id =" _xpbar''+（++ N）+''" style =" visibility：visible;

position：relative;溢出：隐藏;宽度： + W + PX;身高：''+ h +''px;

background-color：''+ bgc +'';边框颜色： + BRDC +; border-width：''+ brdW +''px;

border-style：solid; font-size：1px;">'';

t + =''< span id =" blocks''+ N +''"风格= QUOT;左： - +（H * 2 + 1）+ PX; position：absolute;

font-size：1px">'';

for（i = 0; i< blocks; i ++）{

t + =''< span style =" background-color：''+ blkC +'';左： - ''+（（h * i）+ i）+''px;

font-size：1px;位置：绝对的;宽度： + H + PX;高度： + H + PX; ''

t + =（即）？''过滤器：alpha（opacity =''+（100-i *（100 / blocks））+'''''：'' - Moz-不透明度：''+（（1

00-i *（100 / block））/ 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 =块;

bA.N = N;

bA.w = w;

bA.h = h;

bA.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 +''）''，速度）;

返回bA;

}}


函数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）> tw）{

t.style .left = - （th * 2 + 1）+''px'';

t.ctr ++;

if（t.ctr> = t.count）{

eval（t.action）;

t.ctr = 0;

}}否则t.style.left =（parseInt（t .style.left）+ t.h + 1）+''px'';

}


函数togglePause（）{

if（this.tid == 0）{

this.tid = setInterval（''startBar（''+ this.N +''）''，this.s peed）;

}否则{

clearInterval（this.tid）;

this.tid = 0;

}} <如果（this.tid == 0）{

this.tid = setInterval（'' startBar（''+ this.N +''）''，this.s peed）;

} else {

clearInterval （this.tid）;

this.tid = 0;

}}


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

此外还有许多其他网页讨论展示dhtml

网页上的进度条：


#DHTML使用JavaScript和CSS的进度条小工具

http://www.wingo.com/dhtml/ProgressBar.html

http://www.eggheadcafe.com/articles/20010610.asp

http： //www.java2s.com/Code/JavaScrip...rogressbar.htm

希望这些有帮助。如果您有任何要求，请随时告诉我

不清楚。


此致，


Steven Cheng


Microsoft MSDN在线支持主管


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

通过电子邮件收到我的帖子通知？请参阅
http://msdn.microsoft .com / subscripti ... ult.aspx＃notif

ications。


注意：MSDN托管新闻组支持服务是针对非紧急问题

如果社区或微软支持人员在1个工作日内做出初步回复是可以接受的。请注意，每个跟随

的响应可能需要大约2个工作日作为支持

专业人士与您合作可能需要进一步调查才能达到

最有效的分辨率。该产品不适用于需要紧急，实时或基于电话的交互或复杂的b $ b项目分析和转储分析问题的情况。这种性质的问题最好通过联系

Microsoft客户支持服务（CSS）处理
href =http://msdn.microsoft.com/subscriptions/support/default.aspx\"target =_ blank> http://msdn.microsoft.com/subscripti...t/default.aspx 。


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


此帖子按原样提供。没有保证，也没有授予任何权利。

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/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>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,coun t,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.s peed);
}else{
clearInterval(this.tid);
this.tid=0;
}}

function togglePause(){
if(this.tid==0){
this.tid=setInterval(''startBar(''+this.N+'')'',this.s peed);
}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/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.

感谢您的回复史蒂文。

但我不认为您理解我想做什么...也许我没有

我自己解释得很好......


我的自定义控件可以在渲染方法和这个

过程需要时间。

我想要做的是在控件访问时显示进度条

需要的数据完全呈现控件。

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.

这篇关于复合控制的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！