ComponentOne ProgressBar for ASP.NET AJAX: ProgressBar for ASP.NET AJAX Top Tips

ProgressBar for ASP.NET AJAX Top Tips

This section provides tips and tricks for using the C1ProgressBar control.

      Remember to always use the ScriptManager control.

      Set visual styles on your Studio for ASP.NET AJAX control to add rich themes to your application. For task-based help, see Changing the Visual Style. For a list of visual styles, see Visual Styles.

      Use image sprites in your custom visual styles to increase performance and decrease load times.

      Use the built-in animations to add transitional effects to your Web site or Web application. 

      Add easing in and easing out transitions to make your animations smoother and more natural.See C1ProgressBar Animations for a list of animation effects. To learn how to add an animation effect to the C1ProgressBar control, see Configuring C1ProgressBar Animations.

      Extend our animation library to any part of your web application, including portions that aren't ComponentOne controls. See C1ProgressBar Animations for a complete list of animation and transition effects.

      Update the client-side model properties and events when you don't need to perform server-side processing. The C1ProgressBar control can be coded on both the client side and server side.

      You can use the C1ProgressBarTaskEventArgs.UpdateProgress method to associate the C1ProgressBar control with a long running server-side task.

For example:

      ASPX Markup

<cc1:C1ProgressBar runat="server" ID="C1ProgressBar1"  onruntask="C1ProgressBar1_RunTask"

            StartTaskButton="Button1" StopTaskButton="Button2" ></cc1:C1ProgressBar>

<asp:Button ID="Button1" runat="server" Text="Start" />

<asp:Button ID="Button2" runat="server" Text="Stop" />

      C#

    protected void C1ProgressBar1_RunTask(object sender, C1ProgressBarTaskEventArgs e)

    {

        for (int i = 1; i <= 100; i++)

        {

            System.Threading.Thread.Sleep(1000);

            e.UpdateProgress(i);

        }

    }

When you click Button1, the C1ProgressBar1_RunTask method starts, and when you click Button2, the C1ProgressBar1_RunTask method stops working.

While the progress bar is running, you cannot update any other UI elements on the page through traditional means because nothing on the page is being loaded while the project bar is updated (A traditional update occurs when the page is reloaded, which is not the case for a progress bar).

C1ProgressBarTaskEventArgs.UpdateProgress provides a second parameter for you to pass additional data to the client, which you can use together with JavaScript to update client UI elements when the progress bar is running.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.