文/finesite 出处/博客园
原文见:
http://www.codeproject.com/KB/ajax/MultiTaskIndicator.aspx 版权归原作者所有。
<!--[if !supportLists]-->1. <!--[endif]-->引言
通过Ajax刷新页面,该定制的Web控件用来显示连续的并且耗时长的任务处理进度。
用户在Web窗体上通过点击按钮来实现邮件的群发。为了加强系统的响应性,我想来显示每封邮件的发送进度,然后意识到这个想法也可以应用在很多多任务同时执行的环境中。
<!--[if !supportLists]-->2. <!--[endif]-->实现
我利用Anthem.NET库自定义该控件,使用Anthem.NET库原因有二:一是使用Javascript可以容易 调用服务器端的方法,二是自从我在许多项目中使用后,对Anthem.NET确实比较放心:)。使用该控 件不需要你熟悉Anthem.NET,但是如果你从没有接触过Anthem.NET,我建议你还是了解一下。
为了让该控件完全容易定制,我用GridView控件作为其基类,所以你可以使用任意多的列和自己 所喜欢的风格。
<!--[if !supportLists]-->3. <!--[endif]-->代码使用
由于该控件继承自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 Horiz />
7 <Columns>
8
9 <asp:TemplateField ItemStyle-Horiz>
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-Horiz />
17 </Columns>
18
19</MTI:MultiTaskIndicator>
20
我们需要注意如下属性:
<!--[if !supportLists]-->l <!--[endif]-->ImageID –对应于设计视图中Image控件的ID值
<!--[if !supportLists]-->l <!--[endif]-->ProcessingImageURL–在任务执行过程中所显示图片的URL路径
<!--[if !supportLists]-->l <!--[endif]-->TaskFinishedImageURL –在任务执行结束后所显示图片的URL路径(该图片可通过编程来实现变化)
<!--[if !supportLists]-->l <!--[endif]-->CancelButtonID –如果窗体中使用取消按钮,应指明该按钮的ID值
现在,来让我们熟悉一下Code-Bind代码。
1protected 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方法来启动该进程。
1void btnStart_Click(object sender, EventArgs e)
2{
3 mtiTasks.StartTasks();
4}
5
现在我们必须处理ExcuteTask事件以完成所需处理的任务,我们可通过MultiTaskIndicatorEventArgs的UserData属性向TaskEnded事件处理器传递一个参数。
1void 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
对于基本的功能实现来说,这些已经足够了。但是我们还想根据任务的完成情况来修改其默认的行为。
1void mtiTasks_TaskStarted(object sender, MultiTaskIndicatorEventArgs e)
2{
3 e.CurrentBackColor = System.Drawing.Color.LightYellow;
4}
5
6void 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
<!--[if !supportLists]-->1. <!--[endif]-->
结语
我希望你会喜欢该控件,并下载把玩之:)。由于我的需求非常简单特殊,所以可能会没有囊括其他一些有意思的特色功能。但是我确信它完全能够灵活定制并重用于大多场合中。
源码下载| 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。 |