AJAX Timer tutorial

Ajaxium can automatically perform page updates with a user-defined interval by periodically sending AJAX requests from the client to an ASP.NET page. This timer functionality is introduced with Ajaxium v2.0 as part of the Ajaxium Processor.

Once you place Ajaxium Processor onto an ASP.NET web form, or initialize it in the codebehind file, you're ready to use the AJAX timer.

The interval between automatic AJAX-postbacks is controlled by the TimerInterval property of the Processor. The timer is disabled by default (the TimerInterval property is set to 0). As soon as you set this property to any non-zero value the client-side code will execute an automatic AJAX postback after the pre-set interval in seconds elapses.

And it is here where you find the difference from other components: Ajaxium's AJAX Timer does not initiate an automatic refresh of the entire page if the visitor's browser does not support AJAX (even if JavaScript is enabled), so your visitors will never get trapped in an infinite loop of page reloads.

What also sets Ajaxium apart from other solutions is that you exercise a complete control over timer-based updates. It doesn't matter when you modify the TimerInterval property - in the TimerElapsed event handler or as a response to any user action - the new value will be accepted immediately by the client. Moreover - you can handle any timer event on the client before it is sent to the server and choose whether the timer should be stopped or not.

Just as well as controlling the timer, you can consume on timer events and distinguish them from users' actions. When the timer interval elapses, the client-side code fires the TimerElapsed event on the server, which you can handle.

For example, we are given the task to write an AJAX application which displays real-time stock prices. To control the timer, we will use the standard ASP.NET DropDownList control - which allows visitors to choose a preferred update interval - and one Button to start and stop our AJAX chart. To bring our example closer to real-world applications, we will also simulate the common catch of free services - by stopping the timer after 20 refreshes and displaying the notification message.

The ASPX file contains nothing interesting for us - just the standard ASP.NET controls - one GridView (or DataGrid in ASP.NET 1.x), one combo-box, one button and one label. Using the designer, we have placed the Ajaxium Processor and added event handlers for all controls. The full source of the codebehind file, which performs all the timer operations, is shown below:

C# Visual Basic

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
        {
            DropDownList1.SelectedIndex = 0;
            setTimerInterval();
        }        
    }

    private void setTimerInterval()
    {
        AjaxiumProcessor.TimerInterval = int.Parse(DropDownList1.SelectedValue);
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        setTimerInterval();
    }

    protected void AjaxiumProcessor_TimerElapsed(object sender, EventArgs e)
    {
        TimerCounter++;

        if(TimerCounter >= 20)
        {
            Button1.Enabled = false;
            Button1.Text = "Done";
            AjaxiumProcessor.TimerInterval = 0;
        }
    }

    public int TimerCounter
    {
        get
        {
            if(ViewState["TimerCounter"] == null)
                return 0;
            return (int)ViewState["TimerCounter"];
        }
        set
        {
            ViewState["TimerCounter"] = value;
			Label1.Text = "Counter : " + value.ToString();            
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if(AjaxiumProcessor.TimerInterval == 0)
        {
            setTimerInterval();
            Button1.Text = "Stop";
            DropDownList1.Enabled = true;
        } else
        {
            AjaxiumProcessor.TimerInterval = 0;
            Button1.Text = "Start";
            DropDownList1.Enabled = false;
        }
    }
}

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            DropDownList1.SelectedIndex = 0
            SetTimerInterval()
        End If
    End Sub

    Private Sub SetTimerInterval()
        AjaxiumProcessor.TimerInterval = Integer.Parse(DropDownList1.SelectedValue)
    End Sub

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) _
		Handles DropDownList1.SelectedIndexChanged
        SetTimerInterval()
    End Sub

    Protected Sub AjaxiumProcessor_TimerElapsed(ByVal sender As Object, ByVal e As EventArgs) _
		Handles AjaxiumProcessor.TimerElapsed
        TimerCounter = TimerCounter + 1

        If TimerCounter >= 20 Then
            Button1.Enabled = False
            Button1.Text = "Done"
            AjaxiumProcessor.TimerInterval = 0
        End If
    End Sub

    Public Property TimerCounter() As Integer
        Get
            If (ViewState("TimerCounter") = Nothing) Then
                Return 0
            Else
                Return ViewState("TimerCounter")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("TimerCounter") = value
            Label1.Text = "Counter : " + value.ToString()
        End Set
    End Property

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        If (AjaxiumProcessor.TimerInterval = 0) Then
            SetTimerInterval()
            Button1.Text = "Stop"
            DropDownList1.Enabled = True
        Else
            AjaxiumProcessor.TimerInterval = 0
            Button1.Text = "Start"
            DropDownList1.Enabled = False
        End If
    End Sub
End Class

Done

As you can see, Ajaxium provides a comprehensive AJAX timers functionality and ensures a total control over the timer from both the client and, what's more important, the server side code.

Download full source code of the sample

ASP.NET 2.0 (C#)

ASP.NET 2.0 (Visual Basic .NET)

ASP.NET 1.1 (C#)

ASP.NET 1.1 (Visaul Basic .NET)

Note: The source code is provided solely for education purposes. The code will neither compile nor run unless at least an Evaluation Edition of the Ajaxium server-side component is used.

Live demo

See this AJAX Timer in action