A Server Timer using ASP.Net Client side callback

This page is to design a client side timer which will display the server time without refereshing the page and using the client side callback feature of the ASP.Net feature.

This page is to design a server timer which will display the server time without refereshing the page. This can be done by using the AJAX framework or using the client side call back feature of the Asp.net. This article makes use of the second way. i.e using the Client side callback.

In order to use the client side callback feature, first your page has to implement the ICallbackEventHandler interface.This interface has a importance function called "GetCallbackResult" which will be called asynchronously by the JavaScript beeing at the client side.

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler

Being inside the Page_Load,  setupClientSideCallback() function is called which will setup the callback feature to your page.

protected void Page_Load(object sender, EventArgs e)
{
    setupClientSideCallback();
}

This is the setupClientSideCallback() which sets up the callback feature to the Label which has been named as lblTimer.

The function GetCallbackEventReference() will create an internal JavaScript function which will invoke the server side callback function asynchronously. This function most importanly carries the name of the JavaScript function that is "OnCallback" as third argument. This function will be called automatically by the server after executing the server side callback function. As the fourth argument, it carries the client id of the label on which the server time will be displayed.

The JavaScript function which has been created by the function GetCallbackEventReference() is set to call when the form is loaded using this statment. 

formBody.Attributes.Add("onload", ScriptRef);

And, a client side JavaScript function called "OnCallback" is framed carrying two arguments. This function will be called automatically after executing the server side callback function in order to process the value which has been retured by the call back function.

function OnCallback(Result,Context) 

Here "result" will be the value returned by server side call back function and "Context" is the label id which was passed as the fourth argument by the function call GetCallbackEventReference().

Inside the JavaScript function the retured value is set to the label. And finally the framed script is registered using the RegisterClientScriptBlock() function.

protected void setupClientSideCallback()
{
       string ScriptRef = this.ClientScript.GetCallbackEventReference(this,"'" +0 +

   "'","OnCallback","'"+lblTimer.ClientID+"'");

       formBody.Attributes.Add("onload", ScriptRef);
       string script = "<script language='javascript' type='text/javascript'> " +

                    " function getServerTime() " +

                    " { " +ScriptRef +" } " +

                    " function OnCallback(Result,Context) " +

                    " { " +

                    " var lbl=document.getElementById(Context); " +

                     " lbl.innerText=Result ; " +

                     " setTimeout(getServerTime, 1000); " +

                     " } " +

                    " </script> ";

       this.ClientScript.RegisterClientScriptBlock(this.GetType(),"ClientCallback",script);

}

RaiseCallbackEvent() is the first function which will be called asychronously. Then, GetCallbackResult() is called. This argument we are not using for this timer. As this function is defined in the interface, implementing this interface is mandatory. Otherwise, the page will be ended up with error.

string eventArgument;

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
       this.eventArgument = eventArgument;
}

This is the important function which gets the server time and returns as string to the client. After executing this function .net framwork will call the OnCallback() JavaScript function passing the server time as the first argument and the context as the second argument.

string ICallbackEventHandler.GetCallbackResult()
{
    return DateTime.Now.ToString();
}

And finally the JavaScript function extracts the time and displayes it. JavaScript setTimeout() function is used in order to call the callback function automatically after every 1000 milliseconds.