使用ASP.NET Atlas编写显示真实进度的ProgressBar（进度条）控件

2024-02-11 22:08
文章标签 使用 显示 编写 控件 进度 asp net 进度条 真实 atlas progressbar

本文主要是介绍使用ASP.NET Atlas编写显示真实进度的ProgressBar（进度条）控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

  1. 一个需要较长时间才能完成的Web Service
  2. 一个用来查询上述Web Service进度的Web Service
  3. 客户端Atlas进度条（ProgressBar）控件，负责维护客户端逻辑并输出可视化UI。这也是本示例中最重要的一个组件，在将来可被重用于其他页面或程序的开发
  4. 包含上述Web Service以及控件的ASP.NET测试页面

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

 需要较长时间完成的Web Service

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

1 [WebMethod]
 2 public   void  TimeConsumingTask()
 3 {
4    ConnectToDataBase();
5    GetSomeValueFromDataBase();
6    CopySomeFilesFromDisk();
7    GetARemoteFile();
8}

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

 1 [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()方法模拟操作的延迟：

 1 [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中取得进度信息：

 1 [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可以取得这个类型的描述等。

1 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

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

  1. Interval. 每次重新查询进度并更新进度条的间隔时间。单位：毫秒
  2. Service Url. Web Service文件的路径。
  3. Service Method. 取得进度信息的方法名。

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

1 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）的时候应该记得做一些必要的清理。

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

 1 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会利用它来描述这个类型的信息。

 1 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）

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控件开始工作：


截图和下载

现在所有的事情都搞定了，可以运行了！

页面初始化：

运行中：

运行完成：

 

示例程序以及源文件可以在这里下载。

  

这篇关于使用ASP.NET Atlas编写显示真实进度的ProgressBar（进度条）控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/700916。

相关文章

使用Python将JSON,XML和YAML数据写入Excel文件

使用Python将JSON,XML和YAML数据写入Excel文件

《使用Python将JSON,XML和YAML数据写入Excel文件》JSON、XML和YAML作为主流结构化数据格式,因其层次化表达能力和跨平台兼容性,已成为系统间数据交换的通用载体,本文将介绍如何... 目录如何使用python写入数据到Excel工作表用Python导入jsON数据到Excel工作表用
阅读更多...
鸿蒙中@State的原理使用详解(HarmonyOS 5)

鸿蒙中@State的原理使用详解(HarmonyOS 5)

《鸿蒙中@State的原理使用详解(HarmonyOS5)》@State是HarmonyOSArkTS框架中用于管理组件状态的核心装饰器,其核心作用是实现数据驱动UI的响应式编程模式,本文给大家介绍... 目录一、@State在鸿蒙中是做什么的？二、@Spythontate的基本原理1. 依赖关系的收集2.
阅读更多...
Python基础语法中defaultdict的使用小结

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典（dict）有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字
阅读更多...
C++ Sort函数使用场景分析

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序
阅读更多...
Java String字符串的常用使用方法

Java String字符串的常用使用方法

《JavaString字符串的常用使用方法》String是JDK提供的一个类,是引用类型,并不是基本的数据类型,String用于字符串操作,在之前学习c语言的时候,对于一些字符串,会初始化字符数组表... 目录一、什么是String二、如何定义一个String1. 用双引号定义2. 通过构造函数定义三、St
阅读更多...
Pydantic中Optional 和Union类型的使用

Pydantic中Optional 和Union类型的使用

《Pydantic中Optional和Union类型的使用》本文主要介绍了Pydantic中Optional和Union类型的使用,这两者在处理可选字段和多类型字段时尤为重要,文中通过示例代码介绍的... 目录简介Optional 类型Union 类型Optional 和 Union 的组合总结简介Pyd
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
AJAX请求上传下载进度监控实现方式

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX（AsynchronousJavaScriptandXML）被广泛用于异步请求数据,而无需刷新整个页面,：本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多
阅读更多...
使用Python自建轻量级的HTTP调试工具

使用Python自建轻量级的HTTP调试工具

《使用Python自建轻量级的HTTP调试工具》这篇文章主要为大家详细介绍了如何使用Python自建一个轻量级的HTTP调试工具,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录一、为什么需要自建工具二、核心功能设计三、技术选型四、分步实现五、进阶优化技巧六、使用示例七、性能对比八、扩展方向建
阅读更多...
使用Python实现一键隐藏屏幕并锁定输入

使用Python实现一键隐藏屏幕并锁定输入

《使用Python实现一键隐藏屏幕并锁定输入》本文主要介绍了使用Python编写一个一键隐藏屏幕并锁定输入的黑科技程序,能够在指定热键触发后立即遮挡屏幕,并禁止一切键盘鼠标输入,这样就再也不用担心自己... 目录1. 概述2. 功能亮点3.代码实现4.使用方法5. 展示效果6. 代码优化与拓展7. 总结1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2