Client, FullPostBack and FlyPostBack

To make the example simpler start a new web page and place a WebButton on it. Set its Text property to Click Me. Also add a standard Label and set its Text property to Test or something recognisable.

First let's arrange a client side event and handler to change the Label to "Client side test". First select the button and in the Properties Window change its OnClientClick to read ChangeLabel. This is the name of the JavaScript function that will be called when the button is clicked.  Also make sure that the Button's AutoPostBack property is set to false.

The JavaScript event handler is a little different from the previous example because Label isn't an Intersoft component but a standard ASP .NET component. It makes use of a <span> to group the text together and so we have to use the standard DOM JavaScript functions to manipulate it rather than ISGetObject:

<script>
 function ChangeLabel() {
  var label = document.getElementById(
                                 "Label1");
  label.innerText = "Client Side Update";
 }
</script>

This is something of a shame and it would be better is ISGetObject could return a standard DOM object with a specific ID as well as an Intersoft object.

Now if you run the web page you will be able to click on the button and the Label will be updated without a round trip occurring. This is a pure JavaScript update of the page and the page is not reloaded.

Next we can try a FullPostBack event. To do this select the button and change to the event view in the Properties Window. Double click the "Clicked" event and a default event handler will be created in the code behind. This you can code in the usual way:

protected void WebButton1_Clicked(
 object sender, 
 ISNet.WebUI.WebDesktop.
           WebButtonClickedEventArgs e)
{
 Label1.Text = "FullPostBack Server Update";
}

To make this work you also have to set the Button's AutoPostBack property to True and its PostBackMode property to FullPostBack.

Now if you click the button a full round trip postback will occur and the label will be modified to hold the new text. Notice that this does involve a complete reload of the page. If you have kept the client side event handling enabled in the example you will also notice that the client side update is performed first, then the page is reloaded with the new server generated message, so overwriting the client side update. When both client side and server side event handling is enabled it is the server side that wins out!

To avoid the round trip and complete page refresh we can try the FlyPostBack mode. To do this all you have to do is set the Button's PostBackMode to FlyPostBack. If you now run the web page you will discover that nothing happens. If you still have the client side event handler enabled then you will find that it makes its change to the text and it isn't updated by the server.

The reason for this behavior is that FlyPostBack uses Ajax techniques to run the event handler method at the server - but it doesn't refresh the entire page. That is, any changes that the event handler makes to any controls on the page have no effect because the page is not recreated and downloaded.

This seems fairly useless because the event handler runs but doesn't change anything. This is where the ClientAction engine comes into play. The ClientAction engine translates the server side action into a client side action without having to reload the entire page. This is very clever.

For example if we define the event handler as:

protected void WebButton1_Clicked(
 object sender, 
   ISNet.WebUI.WebDesktop.
     WebButtonClickedEventArgs e)
{
 Label1.Text = "FlyPostBack Server Update";
 WebButton1.ClientAction.
              RefreshModifiedControls();
}

Then when you now run the web page and click the button you will find that the text label is updated. The ClientAction engine translates the modification that you make to the Label control into a client side Ajax update - and all without you having to worry about how it is done.

The ClientAction engine has a range of methods that allow you to translate server side actions into client side actions.  For example,

ClientAction.Alert(string) 

will cause a JavaScript alert box to open and display the string. You can also run a completely general JavaScript routine created by the server using:

ClientAction.InvokeScript(script);

For example:

WebButton1.ClientAction.InvokeScript(
                       "alert('hello')");

You can, of course, use this to call a client side function:

WebButton1.ClientAction.InvokeScript(
                        "ClientMethod()");

The ClientAction engine acts as an easy to use bridge between results generated on the server and actions performed on the Client. In a real application the client side event handler would access some data or server state information an pass it to the client either via a JavaScript action or a control update say,

From here you can start to explore the more advanced controls included in the WebEssentials and other Intersoft libraries. They all use the same general approach to client server interaction - client side events, FullPostBack and FlyPostBack.

Download the 30-day trial of WebEssentials

If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook, Digg or you can subscribe to our weekly newsletter.

<ASIN:1849690685>

<ASIN:1430226110>

<ASIN:0672333058>