【Dflying Chen 】使用ASP.NET Atlas編寫顯示真實進度的ProgressBar（進度條）控制元件
當後臺在進行某些長時間的操作時，如果能在頁面上提供一個顯示真實進度的進度條，而不是讓使用者不知情的等待或是從前的那些簡單的估計，將是一個非常難得的出彩之處。現在使用ASP.NET Atlas完全有可能做到這些。這篇文章將討論如何完成這一功能並介紹一些有關Atlas客戶端控制元件開發的基本概念。您同時可以在這裡下載示例程式以及原始檔。
實現網頁上的進度條想法其實很簡單：編寫一個客戶端的Atlas控制元件，每隔一段時間請求一次伺服器，並使用返回的當前進度資料更新進度條的顯示。在這個示例中，將有四個部分的程式碼組成：
- 一個需要較長時間才能完成的Web Service
- 一個用來查詢上述Web Service進度的Web Service
- 客戶端Atlas進度條（ProgressBar）控制元件，負責維護客戶端邏輯並輸出視覺化UI。這也是本示例中最重要的一個元件，在將來可被重用於其他頁面或程式的開發
- 包含上述Web Service以及控制元件的ASP.NET測試頁面
下面我們一步一步地來實現以上四個步驟：
需要較長時間完成的Web Service
在實際的程式中，一個需要較長時間完成的Web Service可能有如下宣告：
[WebMethod]2
public void TimeConsumingTask()3
{4
ConnectToDataBase();5
GetSomeValueFromDataBase();6
CopySomeFilesFromDisk();7
GetARemoteFile();8
}這樣我們就可以插入一些輔助方法來確定當前進度完成情況，setProgress(int)用來設定當前的進度完成百分比：
[WebMethod]2
public 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()方法模擬操作的延遲：
[WebMethod]2
public 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中取得進度資訊：
[WebMethod]2
public 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可以取得這個型別的描述等。
Sys.UI.ProgressBar = function(associatedElement) {2
Sys.UI.ProgressBar.initializeBase(this, [associatedElement]);3
4
}5
Type.registerSealedClass('Sys.UI.ProgressBar', Sys.UI.Control);6
Sys.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屬性，我們有如下宣告：
var _serviceMethod;2
3
this.get_serviceMethod = function() {4
return _serviceMethod;5
}6
7
this.set_serviceMethod = function(value) {8
_serviceMethod = value;9
}
第三步：使用Timer控制元件每隔一段時間查詢一次Web Service
Sys.Timer用於每過一段時間呼叫一個方法（發出一個事件），我們可以定義一個委託來指向這個方法，並在並在每一個時間段內查詢這個Web Service。為了避免瀏覽器記憶體洩露，在控制元件析構（dispose）的時候應該記得做一些必要的清理。
還有，注意當前一個請求並沒有返回時，不應該傳送第二個請求。
var _timer = new Sys.Timer();2
var _responsePending;3
var _tickHandler;4
var _obj = this;5
6
this.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
13
this.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
26
this._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
35
function _onMethodComplete(result) {36
// Update the progress bar.37
_obj.set_progress(result);38
_responsePending = false;39
}
第四步：新增控制方法
我們應該可以控制進度條的開始/停止。並且，對於一個Atlas控制元件，相關的描述方法（descriptor）也是必須的。Atlas會利用它來描述這個型別的資訊。
this.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
12
this.start = function() {13
_timer.set_enabled(true);14
}15
16
this.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）
<atlas:ScriptManager ID="ScriptManager1" runat="server" >2
<
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-343352/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- jquery ui進度條 progressbarjQueryUI
- c#進度條progressbarC#
- Android UI控制元件系列：ProgressBar（進度條）AndroidUI控制元件
- 【Dflying Chen】在ASP.NET Atlas中結合Membership進行身份驗證ASP.NET
- JQuery UI之進度條——ProgressbarjQueryUI
- 直播系統開發，實現在進度條中顯示文字顯示進度
- 進度條和列表形式顯示的控制元件控制元件
- 很實用的進度條外掛ProgressBar.jsJS
- Android之利用Handler實現ProgressBar進度條Android
- ASP.NET實現進度條ASP.NET
- 【CLI】使用 Curl 下載檔案實時進度條顯示
- C++ Qt開發：ProgressBar進度條元件C++QT元件
- OSS實現檔案下載進度條顯示
- 【新特性速遞】進度條，進度條，進度條
- Xamarin XAML語言教程構建進度條ProgressBar
- Java實現在控制終端顯示的字元進度條Java字元
- 直播平臺軟體開發，讓原本沒有進度條的頁面顯示進度條
- 第一百九十八節，jQuery EasyUI，ProgressBar(進度條)元件jQueryUI元件
- Android 編寫一個帶進度條的WebviewAndroidWebView
- C# 根據BackgroundWoker非同步模型和ProgressBar控制元件,自定義進度條控制元件C#非同步模型控制元件
- 使用Java高速實現進度條Java
- 記錄個簡單的進度條同步顯示方法
- 自定義SeekBar顯示進度
- ftp下載顯示進度FTP
- 短視訊商城系統，Android進度條，自定義進度條，顯示百分比Android
- ajax進度條 非同步下載進度條非同步
- 直播帶貨平臺原始碼，利用ProgressBar實現垂直、水平進度條原始碼
- 直播app系統原始碼，固定速度的進度條顯示APP原始碼
- 打造可顯示上傳內容的自定義進度條
- 報表載入大資料時顯示進度條大資料
- 程式執行時,一個進度條顯示INCLUDE程式
- 關於WPF進度條的使用
- MFC在狀態列中使用進度條控制元件控制元件
- Qt 進度條QT
- golang 進度條功能實現Golang
- clip實現圓環進度條
- 命令列進度條實現命令列
- 直播app開發，點選螢幕時顯示進度條APP