Creación de un reloj en AJAX

Para todos aquellos que trabajen con .NET es requisito indispensable tener conocimiento de AJAX. Para el resto, AJAX seguirá siendo el principal equipo de fútbol de Amsterdam, pero ese no es el tema...

AJAX (acrónimo de Asynchronous JavaScript And XML) es una técnica de desarrollo web para crear aplicaciones interactivas que permite la ejecución de Scripts en el cliente, ¡sin necesidad de recargas! Con esto se consigue un aumento de interactividad, velocidad y usabilidad.

Pero vayamos a lo práctico; lo que intentaré mostrar en este post es cómo crear un reloj digital usando AJAX, porque para hablar de AJAX ya tenemos la wikipedia o la página oficial de AJAX (en inglés) donde os podréis bajar las extensiones de AJAX, el kit de herramientas y algunos tutoriales.

Pues bien, lo único que necesitamos es añadir en nuestro formulario un ScriptManager, para que funcionen los Scrips de AJAX, y un UpdatePanel en el que introduciremos un Timer y un Label. Veamos el código del formulario:

asp:ScriptManager id="ScriptManager1" runat="server">/asp:ScriptManager>
asp:UpdatePanel id="UpdatePanel1" runat="server">
ContentTemplate>
<%--Cada 1000 milisegundos (1 segundo) llamamos al evento Timer1_Tick--%>
asp:Timer id="Timer1" runat="server" interval="1000" ontick="Timer1_Tick" enabled="false">
/asp:Timer>
<%--La siguiente etiqueta mostrará el reloj--%>
asp:Label id="LReloj" runat="server">/asp:Label>
/ContentTemplate>
/asp:UpdatePanel>
asp:label id="LHoraInicial" runat="server" text="Label">/asp:Label>
asp:button id="Button1" runat="server" text="Button">

Y a continuación veamos el CodeBehind asociado al formulario que contiene sólo los procedimientos de Timer1_Tick y Button1_Click:

Partial Class reloj
Inherits System.Web.UI.Page

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
'Muestro la hora en la que pulsamos el botón en la etiqueta LHoraInicial
LHoraInicial.Text = System.DateTime.Now.TimeOfDay.ToString().Substring(0, 8)
'Habilito el Timer
Timer1.Enabled = True
End Sub

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
'Cada segundo, la etiqueta LReloj se actualizará con la hora actual menos la hora en la que se pulsó el botón, simulando así un reloj digital inicializado en 0:00:00
LReloj.Text = (System.DateTime.Now.TimeOfDay - CType(LHoraInicial.Text, DateTime).TimeOfDay).ToString.Substring(0, 8)
End Sub

End Class

*Notese que faltan las marcas "<" porque blogspot las interpreta y no las muestra como texto.