Client-Side Callback in Visual Basic.Net

Using Client-side Callback it is possible to change values on a page without going through a complete postback cycle. Users won't see a flicker nor repositioning of the webpage during the update; using the application will be a more pretty experience.

The working of using a Callback will be demonstrated by building a simple webpage, containing a button and a label. Pressing the button will make the text of the label change. The new value for the label-text will be given by the server after handling a callback-event.

The complete source code, containing more inline comments, can be downloaded here.

Creating the Callback demo webpage

Creating the html

First, create a new Visual Basic website. One webpage will be added initially, Default.aspx. This webpage is fine to work with.

Add a small piece of javascript in the HEAD of the webpage:

<script type="text/javascript" >
function GetNewValue() {
GetNewValueUsingCallback()
}

function UpdateLabel(NewValue, context) {
document.forms[0].TextBox1.value = NewValue;
}
</script>

The first function will be used to initiate the callback. The second will be called by the server to return the "result".

Subsequently add a submit-button (id="cmdGetNewValue") and an asp:Textbox (id="TextBox1") to the form. Add to the button an OnClick-Event:

<input id="cmdGetNewValue" type="button" value="Press for new value" onclick="GetNewValue()" />

!!! Don't omiss the brackets after GetNewValue as I did. It will drive you crazy, as your code won't work, and it is hard to see you forgot these brackets!!!

Eventually for better appearance place the button and the label in <p> elements.

Creating the Code-behind with the callback procedure

Go to the code-behind for the Default.aspx. Start with telling the class _Default that it will implement the iCallbackEventHandler by typing the following directly after the "Inherits System.Web.UI.Page":

Implements System.Web.UI.ICallbackEventHandler

As soon as you press Enter, two new functions will be added automatically:

Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
End Function

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
End Sub

These functions will be completed soon. First, define a variabele for the callbackresult:

dim _CallbackResult as String = Nothing

Add a Page_load sub to the code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim sCallbackRef As String = Page.ClientScript.GetCallbackEventReference _
(Me, "arg", "UpdateLabel", "context")

Dim sCallbackScript As String = "function GetNewValueUsingCallback(arg, context)" & _
"{" & sCallbackRef & ";}"

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "GetNewValueUsingCallback", _
sCallbackScript, True)

End Sub

Update the generated functions as follows:

Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult

Return _CallbackResult

End Function

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent

_CallbackResult = "Hello, the time at the server is: " & Now.TimeOfDay.ToString.Substring(0, 8)

End Sub

Running this simple website will surprise you with the time at the server in the textbox!