LiveControls communicate with the webserver with a remote scripted callback. A callback is a way to communicate with the webserver outside of the browser. This is typically done with an XmlHttp object or an HTML IFRAME element.

When using LiveControls, this communication always occurs asynchronously (NOTE! This refers specifically to CLIENT-SIDE javascript execution. There is no asynchronous behavior in the server-side LiveControls). However, it is often useful to make the application appear that it is blocking. If a pending server operation takes a few seconds to complete, you may want to provide better user feedback as well as keeping the user from further interacting with the application. This can be done using one (or various combinations) of several techniques.

First, start by creating a simple application to test. Simply drag a LiveButton on a WebForm. Double-click the LiveButton to implement the LiveButton.Click event. Within this event, simulate something that takes time.

[C#]
private void LiveButton1_Click(object sender, System.EventArgs e)
{
   // Pause the thread for a few seconds to simulate the time required for a long SQL query to execute
   System.Threading.Thread.Sleep(2000);
}

[Visual Basic]
Private Sub LiveButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles LiveButton1.Click
   ' Pause the thread for a few seconds to simulate the time required for a long SQL query to execute
   System.Threading.Thread.Sleep(2000)
End Sub

Now, try the following techniques to see how they affect this simple application:

• Setting the Blocking property to true.
• Using WaitElementID/WaitMessages.
• Using the client-side API events.

Setting the Blocking property to true.

Setting the Blocking property to true will cause the control that raises the callback to be disabled (grayed out, and unable to raise another callback) until the pending callback completes.

<cc1:LiveButton ID="LiveButton1" runat="server" Text="Click Me" Blocking="true"></cc1:LiveLabel>

Using WaitElementID/WaitMessages.

When clicking the button, you will note that the interface is unable to be updated until the callback completes. The WaitElementID and WaitMessage can be used to immediately update the interface as soon as the button is clicked. Set the WaitElementID to the ID of another control on the form, and the value of WaitMessage is displayed on as the text of this element while the callback is pending. When complete, this element will be reset to its initial value.

<cc1:LiveButton ID="LiveButton1" runat="server" Text="Click Me" WaitElementID="mylabel" WaitMessage="Processing..."></cc1:LiveLabel>
<span ID="mylabel"></span>

Using the client-side API events.

Finally, if the Blocking property and the WaitElementID do not provide enough flexibility, two client-side javascript events are exposed to enable you to update the interface during callbacks. The pwBeforeCallback() function is called before the callback is made. The pwAfterCallback() function is called after the callback completes. In this example the cursor is changed from a "pointer" to an "hourglass" while the callback is pending. To do this, simply implement these functions and they will be invoked automatically if required.

function pwBeforeCallback(){
        // Callback is getting ready to be sent. Change the cursor to an hourglass.
        this.style.cursor = "wait";
}

function pwAfterCallback(){
        // Callback is complete. Change the cursor back to a pointer.
        this.style.cursor = "default";
}