Ajax实现多任务指示器（附源码）

新年第一博，欢迎拍砖指正，不甚感激！

1.       引言

通过Ajax刷新页面,该定制的Web控件用来显示连续的并且耗时长的任务处理进度。

用户在Web窗体上通过点击按钮来实现邮件的群发。为了加强系统的响应性，我想来显示每封邮件的发送进度，然后意识到这个想法也可以应用在很多多任务同时执行的环境中。

2.       实现

              我利用Anthem.NET库自定义该控件，使用Anthem.NET库原因有二：一是使用Javascript可以容易   调用服务器端的方法，二是自从我在许多项目中使用后，对Anthem.NET确实比较放心：）。使用该控   件不需要你熟悉Anthem.NET，但是如果你从没有接触过Anthem.NET，我建议你还是了解一下。

         为了让该控件完全容易定制，我用GridView控件作为其基类，所以你可以使用任意多的列和自己    所喜欢的风格。

3.       代码使用

由于该控件继承自GridView控件，所以你只能象使用GridView控件一样来使用它，但是还有附加的一些属性、事件和方法需要你掌握。

通过两种方式来显示进度和状态变化：图片和标签。你可以同时使用两种或者其中一种，这两个进度指示器与两个属性（ImageID和LabelID）相对应，这两个属性必须包含Image和Label控件的ID。否则，你要把他们添加进去，如果不想用其中一个属性，尽可忽略之。

为了清楚起见，下面代码说明了该控件如何使用图像指示器。

 1 < MTI:MultiTaskIndicator runat = " server "  ID = " mtiTasks "  ImageID = " imgStatus "   
 2     ProcessingImageURL = " images/ajaxloader.gif "  
 3         TaskFinishedImageURL = " images/checked.gif "  
 4     Width = " 350px "  AutoGenerateColumns = " false "  CancelButtonID = " btnCancel "   >
 5      < HeaderStyle BackColor = " navy "  Font - Bold = " true "  ForeColor = " white "  
 6         HorizontalAlign = " center "   />
 7      < Columns >
 8
 9          < asp:TemplateField ItemStyle - HorizontalAlign = " Center " >
10              < ItemTemplate >
11                  < asp:Image runat = " server "  ID = " imgStatus "  
12                     imageUrl = " images/arrow.gif "   />
13              </ ItemTemplate >
14          </ asp:TemplateField >
15          < asp:BoundField DataField = " TaskName "  HeaderText = " Task "  
16             ItemStyle - HorizontalAlign = " left "   />                 
17      </ Columns >
18
19 </ MTI:MultiTaskIndicator >
20

我们需要注意如下属性：

l         ImageID –对应于设计视图中Image控件的ID值

l         ProcessingImageURL–在任务执行过程中所显示图片的URL路径

l         TaskFinishedImageURL –在任务执行结束后所显示图片的URL路径（该图片可通过编程来实现变化）

l         CancelButtonID –如果窗体中使用取消按钮，应指明该按钮的ID值

   现在，来让我们熟悉一下 Code-Bind 代码。

  

 1 protected   override   void  OnInit(EventArgs e)
 2 {
 3    base.OnInit(e);
 4    this.mtiTasks.ExecuteTask += 
 5    new MultiTaskIndicator.MultiTaskIndicator.ExecuteTaskEventHandler(
 6            mtiTasks_ExecuteTask);
 7    this.mtiTasks.TaskEnded += 
 8    new MultiTaskIndicator.MultiTaskIndicator.TaskEndedEventHandler(
 9            mtiTasks_TaskEnded);
10    this.mtiTasks.TaskStarted += 
11    new MultiTaskIndicator.MultiTaskIndicator.TaskStartedEventHandler(
12            mtiTasks_TaskStarted);
13}
14

在执行任务前，我们需要把控件与数据源绑定，该数据源包含任意多代表任务的列表。

我们需要调用StartTasks方法来启动该进程。

   

1 void  btnStart_Click( object  sender, EventArgs e)
2 {
3    mtiTasks.StartTasks();
4}
5

现在我们必须处理ExcuteTask事件以完成所需处理的任务，我们可通过MultiTaskIndicatorEventArgs的UserData属性向TaskEnded事件处理器传递一个参数。

   

 1 void  mtiTasks_ExecuteTask( object  sender, MultiTaskIndicatorEventArgs e)
 2 {
 3    //This is where you execute the task.
 4
 5    //Notice the MultiTaskIndicatorEventArgs contains 
 6
 7    //the properties needed to identify the current task        
 8
 9    
10    //demonstrates how to send data to the TaskEnded event handler
11
12    e.UserData = !(e.Row.RowIndex == 3 || e.Row.RowIndex == 8); 
13}
14

对于基本的功能实现来说，这些已经足够了。但是我们还想根据任务的完成情况来修改其默认的行为。

   

 1 void  mtiTasks_TaskStarted( object  sender, MultiTaskIndicatorEventArgs e)
 2 {
 3    e.CurrentBackColor = System.Drawing.Color.LightYellow;
 4}
 5
 6 void  mtiTasks_TaskEnded( object  sender, MultiTaskIndicatorEventArgs e)
 7 {    
 8    //simulate a situation where we need to change the pre-defined image
 9
10    if (!Convert.ToBoolean(e.UserData))
11    {
12        e.CurrentImageURL = "images/unchecked.gif";            
13        e.CurrentBackColor = System.Drawing.Color.White;
14    }
15}
16

1.       结语

我希望你会喜欢该控件，并下载把玩之：）。由于我的需求非常简单特殊，所以可能会没有囊括其他一些有意思的特色功能。但是我确信它完全能够灵活定制并重用于大多场合中。

源码下载

原文见：http://www.codeproject.com/KB/ajax/MultiTaskIndicator.aspx 版权归原作者所有。