英文版見： 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" >
2 <Scripts>
3 <atlas:ScriptReference Path="ScriptLibrary/ProgressBar.js" ScriptName="Custom" />
4 </Scripts>
5 <Services>
6 <atlas:ServiceReference Path="TaskService.asmx" />
7 </Services>
8</atlas:ScriptManager>
接下來是頁面的佈局與樣式：
1<style type="text/css">
2* {}{
3 font-family: tahoma;
4}
5.progressBarContainer {}{
6 border: 1px solid #000;
7 width: 500px;
8 height: 15px;
9}
10.progressBar {}{
11 background-color: green;
12 height: 15px;
13 width: 0px;
14 font-weight: bold;
15}
16</style>
17
18<div>Task Progress</div>
19<div class="progressBarContainer">
20 <div id="pb" class="progressBar"></div>
21</div>
22<input type="button" id="start" onclick="startTask();return false;" value="Start the Time Consuming Task!" />
23<div id="output" ></div>
最後是一段JavaScript啟動那個較長時間才能完成的Web Service並讓ProgressBar控制項開始工作：
截圖和下載
現在所有的事情都搞定了，可以運行了！
頁面初始化：
運行中：
運行完成：
範例程式以及原始檔案可以在這裡下載。