分享
 
 
 

使用ASP.NET Atlas编写显示真实进度的ProgressBar

王朝asp·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

英文版见:http://dflying.dflying.net/1/archive/100_building_a_real_time_progressbar_using_aspnet_atlas.html

当后台在进行某些长时间的操作时,如果能在页面上提供一个显示真实进度的进度条,而不是让用户不知情的等待或是从前的那些简单的估计,将是一个非常难得的出彩之处。现在使用ASP.NET Atlas完全有可能做到这些。这篇文章将讨论如何完成这一功能并介绍一些有关Atlas客户端控件开发的基本概念。您同时可以在这里下载示例程序以及源文件。

实现网页上的进度条想法其实很简单:编写一个客户端的Atlas控件,每隔一段时间请求一次服务器,并使用返回的当前进度数据更新进度条的显示。在这个示例中,将有四个部分的代码组成:

一个需要较长时间才能完成的Web Service

一个用来查询上述Web Service进度的Web Service

客户端Atlas进度条(ProgressBar)控件,负责维护客户端逻辑并输出可视化UI。这也是本示例中最重要的一个组件,在将来可被重用于其他页面或程序的开发

包含上述Web Service以及控件的ASP.NET测试页面

下面我们一步一步地来实现以上四个步骤:

需要较长时间完成的Web Service

在实际的程序中,一个需要较长时间完成的Web Service可能有如下声明:

1[WebMethod]

2public void TimeConsumingTask()

3{

4 ConnectToDataBase();

5 GetSomeValueFromDataBase();

6 CopySomeFilesFromDisk();

7 GetARemoteFile();

8}

这样我们就可以插入一些辅助方法来确定当前进度完成情况,setProgress(int)用来设定当前的进度完成百分比:

1[WebMethod]

2public void TimeConsumingTask()

3{

4 setProgress(0);

5 ConnectToDataBase();

6 setProgress(10);

7 GetSomeValueFromDataBase();

8 setProgress(40);

9 CopySomeFilesFromDisk();

10 setProgress(50);

11 GetARemoteFile();

12 setProgress(100);

13}

在本示例中,我们仅仅使用Cache来储存进度完成信息并利用Thread.Sleep()方法模拟操作的延迟:

1[WebMethod]

2public int StartTimeConsumingTask()

3{

4 string processKey = this.Context.Request.UserHostAddress;

5 string threadLockKey = "thread" + this.Context.Request.UserHostAddress;

6 object threadLock = this.Context.Cache[threadLockKey];

7 if (threadLock == null)

8 {

9 threadLock = new object();

10 this.Context.Cache[threadLockKey] = threadLock;

11 }

12

13 // Only allow 1 running task per user.

14 if (!Monitor.TryEnter(threadLock, 0))

15 return -1;

16

17 DateTime startTime = DateTime.Now;

18

19 // Simulate a time-consuming task.

20 for (int i = 1; i <= 100; i++)

21 {

22 // Update the progress for this task.

23 this.Context.Cache[processKey] = i;

24 Thread.Sleep(70);

25 }

26

27 Monitor.Exit(threadLock);

28

29 return (DateTime.Now - startTime).Seconds;

30}

31

查询进度的Web Service

很容易实现,只需从Cache中取得进度信息:

1[WebMethod]

2public int GetProgress()

3{

4 string processKey = this.Context.Request.UserHostAddress;

5 object progress = this.Context.Cache[processKey];

6 if (progress != null)

7 {

8 return (int)progress;

9 }

10

11 return 0;

12}

客户端进度条(ProgressBar)控件

第一步:从Sys.UI.Control继承

ProgressBar控件应该继承自Atlas的控件基类Sys.UI.Control,并且声明为密封类(sealed class,不能再被继承)。Sys.UI.Control基类包含了一些所有的控件共有的操作与方法。比如,将自己与某个HTML元素关联起来(也就是所谓的binding)等。同时也要注册以让Atlas了解这个新的类型以便今后的声明及使用,例如,让Atlas可以取得这个类型的描述等。

1Sys.UI.ProgressBar = function(associatedElement) {

2 Sys.UI.ProgressBar.initializeBase(this, [associatedElement]);

3

4}

5Type.registerSealedClass('Sys.UI.ProgressBar', Sys.UI.Control);

6Sys.TypeDescriptor.addType('script','progressBar', Sys.UI.ProgressBar);

7

第二步:添加私有成员并书写相应的Setter/Getter

下面需要添加一些属性用来设定我们的控件。在这个例子中,我们需要三个属性:

Interval. 每次重新查询进度并更新进度条的间隔时间。单位:毫秒

Service Url. Web Service文件的路径。

Service Method. 取得进度信息的方法名。

这些属性应该严格遵守Atlas的命名规范:Getter应该以'get_'开头,Setter应该以'set_'开头并传入一个参数。还需要在控件的描述方法(descriptor)中添加对于这些属性的说明。有关描述方法(descriptor)将在第四步中说明。例如,针对Service Method属性,我们有如下声明:

1var _serviceMethod;

2

3this.get_serviceMethod = function() {

4 return _serviceMethod;

5}

6

7this.set_serviceMethod = function(value) {

8 _serviceMethod = value;

9}

第三步:使用Timer控件每隔一段时间查询一次Web Service

Sys.Timer用于每过一段时间调用一个方法(发出一个事件),我们可以定义一个委托来指向这个方法,并在并在每一个时间段内查询这个Web Service。为了避免浏览器内存泄露,在控件析构(dispose)的时候应该记得做一些必要的清理。

还有,注意当前一个请求并没有返回时,不应该发送第二个请求。

1var _timer = new Sys.Timer();

2var _responsePending;

3var _tickHandler;

4var _obj = this;

5

6this.initialize = function() {

7 Sys.UI.ProgressBar.callBaseMethod(this, 'initialize');

8 _tickHandler = Function.createDelegate(this, this._onTimerTick);

9 _timer.tick.add(_tickHandler);

10 this.set_progress(0);

11}

12

13this.dispose = function() {

14 if (_timer) {

15 _timer.tick.remove(_tickHandler);

16 _tickHandler = null;

17 _timer.dispose();

18 }

19 _timer = null;

20 associatedElement = null;

21 _obj = null;

22

23 Sys.UI.ProgressBar.callBaseMethod(this, 'dispose');

24}

25

26this._onTimerTick = function(sender, eventArgs) {

27 if (!_responsePending) {

28 _responsePending = true;

29

30 // Asynchronously call the service method.

31 Sys.Net.ServiceMethod.invoke(_serviceURL, _serviceMethod, null, null, _onMethodComplete);

32 }

33}

34

35function _onMethodComplete(result) {

36 // Update the progress bar.

37 _obj.set_progress(result);

38 _responsePending = false;

39}

第四步:添加控制方法

我们应该可以控制进度条的开始/停止。并且,对于一个Atlas控件,相关的描述方法(descriptor)也是必须的。Atlas会利用它来描述这个类型的信息。

1this.getDescriptor = function() {

2 var td = Sys.UI.ProgressBar.callBaseMethod(this, 'getDescriptor');

3 td.addProperty('interval', Number);

4 td.addProperty('progress', Number);

5 td.addProperty('serviceURL', String);

6 td.addProperty('serviceMethod', String);

7 td.addMethod('start');

8 td.addMethod('stop');

9 return td;

10}

11

12this.start = function() {

13 _timer.set_enabled(true);

14}

15

16this.stop = function() {

17 _timer.set_enabled(false);

18}

OK,目前为止客户端的控件就完成了。我们把它存为ProgressBar.js。

ASP.NET Testing Page ASP.NET测试页面

对于任何的Atlas页面,我们第一件需要做的事情就是添加一个ScriptManager服务器控件。在这个示例中我们将引用ProgressBar控件,较长时间才能完成的Web Service以及进度查询Web Service。(这两个Web Service位于同一个文件中:TaskService.asmx)

1<atlas:ScriptManager ID="ScriptManager1" runat="server" >

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有