AJAX 多任务指示器

• 下载源码 - 149.3 KB

引言

这是一个自定义 WebControl，它使用 AJAX 刷新页面来显示长时间顺序任务的进度。

我需要在 Web 表单中使用它，用户点击按钮后，系统会为一组人发送电子邮件。为了提高系统的响应速度，我想到了显示每封电子邮件的发送进度。然后我意识到这个想法可以用于许多其他需要同步执行任务的情况。

点击此处查看 WebControl 的实际效果。

实现

我在 Anthem.NET 库的基础上构建了这个自定义控件。我使用 Anthem 是因为它很容易使用 JavaScript 调用服务器方法，并且我非常熟悉这个库，因为我在许多项目中使用过它。 你不需要熟悉 Anthem.NET 即可使用此控件，但是如果你从未用过它，我建议你查看一下。

为了使 WebControl 完全可定制，我使用 GridView 作为控件的基类。 因此，你可以使用任意数量的列并使用你喜欢的样式。

使用代码

请记住，此控件继承自 GridView，因此你应该像使用 GridView 一样使用它，但具有其他属性、事件和方法。

有两种方法可以显示进度和状态更改。 使用图像和使用标签。 您可以同时使用两者或仅使用其中一个。 这两个进度指示器对应于两个属性：ImageID 和 LabelID。 这些属性必须包含 Image 和 Label 控件的 ID。 如果没有，你应该将它们添加到字段模板。 如果你不想使用其中一个，只需忽略该属性即可。

为了清楚起见，让我们看看如何将控件与图像指示器一起使用。

<MTI:MultiTaskIndicator runat="server" ID="mtiTasks" ImageID="imgStatus"  
    ProcessingImageURL="images/ajaxloader.gif" 
        TaskFinishedImageURL="images/checked.gif" 
    Width="350px" AutoGenerateColumns="false" CancelButtonID="btnCancel" >
    <HeaderStyle BackColor="navy" Font-Bold="true" ForeColor="white" 
        HorizontalAlign="center" />
    <Columns>

        <asp:TemplateField ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Image runat="server" ID="imgStatus" 
                    imageUrl="images/arrow.gif" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="TaskName" HeaderText="Task" 
            ItemStyle-HorizontalAlign="left" />                
    </Columns>

</MTI:MultiTaskIndicator>

我们需要查看一些属性

• ImageID – 对应于在模板字段中声明的 Image 控件的 ID。
• ProcessingImageURL – 执行任务时将出现的图像的 URL。
• TaskFinishedImageURL – 任务完成时将出现的图像的 URL。（此图像可以通过编程方式更改）。
• CancelButtonID – 如果你想在表单上使用取消按钮，你应该告知按钮的 ID。

现在，在后台代码中，我们应该将事件处理程序挂钩到控件

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    this.mtiTasks.ExecuteTask += 
    new MultiTaskIndicator.MultiTaskIndicator.ExecuteTaskEventHandler(
            mtiTasks_ExecuteTask);
    this.mtiTasks.TaskEnded += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskEndedEventHandler(
            mtiTasks_TaskEnded);
    this.mtiTasks.TaskStarted += 
    new MultiTaskIndicator.MultiTaskIndicator.TaskStartedEventHandler(
            mtiTasks_TaskStarted);
}

在执行任务之前，我们必须将控件绑定到包含任何代表任务的列表的数据源。

要启动该过程，我们必须调用 StartTasks 方法。

void btnStart_Click(object sender, EventArgs e)
{
    mtiTasks.StartTasks();
}

现在我们必须处理 ExecuteTask 事件并执行我们需要执行的任何任务。 我们可能需要将参数传递给 TaskEnded 事件处理程序。 我们可以通过 MultiTaskIndicatorEventArgs 的 UserData 属性来完成。

void mtiTasks_ExecuteTask(object sender, MultiTaskIndicatorEventArgs e)
{
    //This is where you execute the task.

    //Notice the MultiTaskIndicatorEventArgs contains 

    //the properties needed to identify the current task        

    
    //demonstrates how to send data to the TaskEnded event handler

    e.UserData = !(e.Row.RowIndex == 3 || e.Row.RowIndex == 8); 
}

这足以使用基本功能。 但是我们可能希望根据任务结果修改默认行为。 为了完成此操作，我们必须拦截 TaskStarted 和 TaskEnded 事件。

这是一些代码

void mtiTasks_TaskStarted(object sender, MultiTaskIndicatorEventArgs e)
{
    e.CurrentBackColor = System.Drawing.Color.LightYellow;
}

void mtiTasks_TaskEnded(object sender, MultiTaskIndicatorEventArgs e)
{    
    //simulate a situation where we need to change the pre-defined image

    if (!Convert.ToBoolean(e.UserData))
    {
        e.CurrentImageURL = "images/unchecked.gif";            
        e.CurrentBackColor = System.Drawing.Color.White;
    }
}

结论

希望你喜欢这款软件。 下载示例并试用。 可能还有其他不错的功能我没有包含，因为我的要求非常简单和具体。 但我确信它具有足够的自定义性，可以在许多情况下重复使用。

我欢迎各种想法和建议。