使用ASP.NET Atlas編寫顯示真實進度的ProgressBar(進度條)控制項

來源:互聯網
上載者:User
asp.net|控制項|顯示

 英文版見: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" value="Start the Time Consuming Task!" />
23<div id="output" ></div>
最後是一段JavaScript啟動那個較長時間才能完成的Web Service並讓ProgressBar控制項開始工作:


截圖和下載

現在所有的事情都搞定了,可以運行了!

頁面初始化:


運行中:

運行完成:

樣本程式以及源檔案可以在這裡下載。



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.