Create A Digital Clock with Ajax
Goal : Create an Ajax enabled Digital Clock
Requirements : ASP.NET 2.0, Ajax Framework.
Creating a clock in ASP.NET is very simple. You can accomplish this with one line of code.
First lets create the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Digital Clock</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server"
ID="lblCurrentTime"
Font-Bold="True"
Font-Names="MingLiU-ExtB"
Font-Size="X-Large"
ForeColor="DarkKhaki">
</asp:Label><br />
</div>
</form>
</body>
</html>
This is just basic page. I just added the label control with some styling. Now lets look at
the code behind page.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim currentTime As String = DateTime.Now.ToLongTimeString()
lblTime.Text = currentTime
End Sub
Now if you save and view the page in browser you will see the current time. But you will have
to refresh the page to see the time updates. Our goal is to see the clock in real time. We
will do this updating the page automatically every second. This can be easily accomplished
using the timer control. Instead of requiring the user to perform an action in order to trigger
updates, we will use the Timer control to initiate the postback automatically. We will set the
interval to 1000 milliseconds this will cause the Timer to initiate a postback every second.
Now let's add the SciptManager and an update panel. We will put the label and timer control
inside the update panel so we can update parts of the page asynchronously. Our source will
look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Digital Clock</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Timer ID="timer1" runat="server" Interval="1000" ></asp:Timer>
<div>
<asp:Label runat="server"
ID="lblCurrentTime"
Font-Bold="True"
Font-Names="MingLiU-ExtB"
Font-Size="X-Large"
ForeColor="DarkKhaki">
</asp:Label><br />
</div><br />
</ContentTemplate>
</asp:UpdatePanel><br />
<asp:Label ID="lblTime" runat="server"
Font-Bold="True"
Font-Names="MingLiU-ExtB"
Font-Size="X-Large"
ForeColor="DarkKhaki">
</asp:Label>
</div>
</form>
</body>
</html>
The Timer can be placed directly inside the UpdatePanel to act as a child control trigger. It can
also be placed anywhere and configured as the AsyncPostBackTrigger explicitly.
VB Code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
System.Threading.Thread.Sleep(100)
Dim currentTime As String = DateTime.Now.ToLongTimeString()
lblCurrentTime.Text = currentTime
lblTime.Text = currentTime
End Sub
C# Code
protected void Page_Load(object sender, System.EventArgs e)
{
System.Threading.Thread.Sleep(100);
string currentTime = DateTime.Now.ToLongTimeString();
lblCurrentTime.Text = currentTime;
lblTime.Text = currentTime;
}
And, of course, you can also place the Timer outside the UpdatePanel to trigger a full postback at
regular intervals. In this example I am choosing 1 second so the Clock will display almost accurate
time. The Timer instructs the browser to trigger an event one second.
That is it. It is that simple to create a cool looking interactive digital clock in ASP.NET with
Ajax. If you have any questions or comments feel free to post it in our forums section.
