使用ExtJS和ASP.NET创建实时进度条

"这篇文章主要介绍了如何使用ExtJS和ASP.NET技术来实现在服务器端执行长时间操作时，页面上展示一个真实反映进度的进度条，从而提升用户体验。通过AJAX、ASP.NET WebService以及ExtJS的进度条控件，实现客户端与服务器端的交互，动态更新进度条状态。" 在开发Web应用程序时，遇到服务器端执行耗时操作的情况，实时反馈进度给用户可以显著提升用户体验。本文将详细阐述如何利用ExtJS和ASP.NET来构建这样一个实时进度条系统。 首先，我们需要对服务器端的长时间运行任务进行改造。在ASP.NET中，可以创建一个WebService方法来执行这些任务。例如，代码中的`ExecuteTimeConsumingTask`方法通过`HttpContext.Current.Request.UserHostAddress`作为唯一标识，确保每个用户只有一个任务在运行。同时，利用`Cache`对象和`Monitor`类来实现线程同步，避免同一用户并发执行多个任务。 ```csharp 1: using System.Threading; 2: using System.Web; 3: using System.Web.Security; ... 5: public bool ExecuteTimeConsumingTask() 6: { 7: string processKey = HttpContext.Current.Request.UserHostAddress; 8: string threadLockKey = "thread" + HttpContext.Current.Request.UserHostAddress; 9: object threadLock = HttpContext.Current.Cache[threadLockKey]; ... 17: // Only allow 1 running task per user. 18: if (!Monitor.TryEnter(threadLock)) 19: { 20: return false; // Task already running for this user. 21: } ``` 接下来，我们需要创建第二个WebService，用于客户端查询任务的进度。这个方法可以从`HttpContext.Current.Cache`中获取并返回进度信息。 然后，客户端使用ExtJS的Ajax功能发起异步请求，触发服务器端的长时间任务，并初始化进度条。ExtJS提供了丰富的UI组件，包括进度条控件，使得在JavaScript中创建和管理进度条变得简单。 ```javascript // 假设progressBar是预定义的ExtJS进度条实例 progressBar.show(); progressBar.updateProgress(0, '任务开始...'); // 初始化进度条 // 异步轮询服务器获取进度 var pollTask = function() { Ext.Ajax.request({ url: 'progress.asmx/GetProgress', success: function(response) { var progress = JSON.parse(response.responseText).progress; progressBar.updateProgress(progress, '进度: ' + progress + '%'); if (progress < 100) { setTimeout(pollTask, 1000); // 每隔1秒检查一次 } else { progressBar.hide(); // 任务完成，隐藏进度条 } }, failure: function() { // 错误处理 } }); }; pollTask(); // 开始轮询 ``` 这个方案利用了客户端定期轮询服务器，获取任务进度，而不是采用服务器推送模式。虽然这可能会增加服务器的负担，但对于大多数情况，尤其是在不支持WebSocket或其他推送技术的环境中，这是一个可行且相对简单的解决方案。 总结，结合ExtJS的客户端界面能力和ASP.NET的服务器端处理，我们可以实现一个实时更新的进度条，让用户能够直观地了解后台任务的执行状态。这种设计提高了用户在等待过程中的满意度，减少了用户的焦虑感，提升了整体的用户体验。