Got AJAX?

Nothing has been more exciting in the web development world in recent times than AJAX. It is an acronym, for a relatively unassuming technology, that stands for "Asynchronous JavaScript And XML". This might sound boring until you go in depth to learn what it is all about and how it can benefit your applications.

In essence, when a client sends an out-of-band request to a server, XML data that the client uses to refresh its contents are returned. What this means, in short, is that you can avoid "Postback Hell." Postbacks are still used in the vast majority of the web pages that users browse to. This is because there has been very sparse support in client browsers and in web server implementations to help developers embrace AJAX technology. One fine day, AJAX support appeared in Internet Explorer and Firefox, and shortly thereafter Google Maps came onto the scene. Nothing could better illustrate the power of AJAX than Google Maps. The smooth refresh as you browse maps that gives Google Maps that rich client look and feel is all AJAX. We are now at a stage where developers are not doing justice to their websites if they do not consider AJAX during the design phase.

You Say AJAX … I Say Callbacks

AJAX support in ASP.NET 2.0, referred to as Callbacks, is easily the new version’s most exciting and important new feature. The first thing you will notice is that callback support has been built into ASP.NET server controls, like GridView and TreeView, to provide a rich, interactive user experience without postbacks.

The callback feature is usually consumed indirectly by using one of these controls in the pages that you design. However, the Callback framework implemented in 2.0 is much more elaborate than that. It provides excellent services to help you create custom controls or pages with Callback features.

In ASP.NET 2.0 great care has been taken to give the Page lifecycle a shorter time span during Callbacks to make them as efficient as possible. The callback lifecycle is also very similar to the postback lifecycle. This means that you will not have to rewrite any of your current pages, and there is usually nothing new to learn in order to use the callback controls. As usual, it hides all client browser-specific details.

Callbacks, the Tease

What would your state of mind be once you are used to Callback features being present in controls like the framework grid and tree? Relieved? Gratified? Jubilant? Probably, but you are more likely to find yourself desperately wanting more.

This is simply because there really is nothing else in the Toolbox besides the grid, tree, and DetailsView controls. Callbacks in 2.0 are nothing more than a tease. Do you want to update a listbox’s contents based on another listbox selection in your page? Then feel free to implement the appropriate interfaces in the page, register your Callback handlers, generate and return HTML from the handler, and write some script to parse the DOM in the browser and update the contents. No, that does not fall under RAD development.

Let us think of a much simpler scenario. How about incrementing a value in a label based on a button click? Sorry, no can do. There is no support for ViewState in the Callback framework.

This example shows that there is a severe limitation in the level of AJAX support that the Callback framework offers in ASP.NET 2.0. It is this limitation that Syncfusion addresses in our control offerings in the Essential Studio package.

Essential Callback Controls in Essential Studio

At the risk of sounding cliched, there are some essential controls in Essential Studio which will cater to your newfound appetite for callbacks.

All of our controls feature built-in support for callbacks wherever appropriate. Our grid control now uses callbacks to sort, group, and more. Our chart control now uses callbacks to support AutoRefresh. There is also a Google Suggest-like AutoComplete control that provides a choice list in the dropdown, the contents of which are provided in a callback event based on the user input in the textbox.

Our CallbackPanel control is the most exciting feature of all. The idea behind this control is simple: no more postbacks. We wanted to provide users with a control that takes away the requirement of postbacks from their website designs.

Deriving from a Panel, a CallbackPanel is very similar to a Panel in usage. Developers can drag and drop a CallbackPanel from the Toolbox, and they can drop one or more controls directly into it. The difference between a CallbackPanel and a Panel is that developers can invoke a callback on this panel from the client and can then update the contents of the panel in the server-side code. With our CallbackMultiplexer developers can also invoke a callback and update contents on more than one CallbackPanel at the same time.

Here are some features that can be implemented using the CallbackPanel

• Increment a label's value on a button click-there is now full support for ViewStates for controls within CallbackPanels
• Create an image gallery where users can browse through images without postbacks
• Create a Chat page where interaction happens without any postbacks
• Create a product info page where users can browse between different products without postbacks
• Maintain a shopping cart on the side,which can be updated via callbacks as the user makes selections in the page

This new technology offers endless possibilites and huge potential for enhancing your applications.Syncfusion invites you to take a look at Essential Studio and the exciting ASP.NET Callback features in our products and demos.

AJAX in Essential Tools

The CallbackPanel and CallbackMultiplexer controls, together, will let you totally eliminate any kind of postback in your web pages and help you create rich client applications in ASP.Net.

Refreshing content parts using CallbackPanel:

Using the CallbackPanel we can update only the content of certain portions of the page, thus the resulting page is updated partially and the static areas of the page remain untouched.

    <ssw:CallbackPanel ID="CallbackPanel1" runat="server" 
    OnCallbackRefresh="CallbackPanel1_CallbackRefresh">
        <asp:Label ID="lblDisplayTime" runat="server" Text="Label"></asp:Label>
        <%-- Add more controls if necessary --%>
    </ssw:CallbackPanel>
    <%-- Update the panel on some client event, like button click: --%>

    <input id="Button1" type="button" value="Display Time" 
    onclick="javascript:_sfCallbackPanel1.callback();" />

CallbackPanel, a Panel derived class, defines the region on a Page that could be refreshed as a single unit. Add any number of controls to this CallbackPanel, just like you would to a Panel:
On the server the CallbackPanel1_CallbackRefresh event will be triggered. Here you typically refresh the controls inside the CallbackPanel.

						
    protected void CallbackPanel1_CallbackRefresh(object sender, 
    Syncfusion.Web.UI.WebControls.CancellableCallbackEventArgs e)
    {
         lblDisplayTime.Text = DateTime.Now.ToLongTimeString();
         // Update more controls inside the CallbackPanel, if necessary.
         // You can also access the state of other controls in the page here.
    }

						
    <ssw:CallbackMultiplexer ID="CallbackMultiplexer1" runat="server"
    OnCallback="CallbackMultiplexer1_Callback" />

    <ssw:CallbackPanel ID="CallbackPanel1" runat="server">
         <asp:Label ID="lblDisplayDate" runat="server" Text="Label"></asp:Label>
         <%-- More controls can be added if required --%>
    </ssw:CallbackPanel>

    <ssw:CallbackPanel ID="CallbackPanel2" runat="server">
         <asp:Label ID="lblDisplayTime" runat="server" Text="Label"></asp:Label>
         <%-- More controls can be added if required --%>
    </ssw:CallbackPanel>

    <input id="Button1" type="button" value="Display Date & Time" 
    onclick="_sfCallbackMultiplexer1.callback();" />

    protected void CallbackMultiplexer1_Callback(object sender, 
    Syncfusion.Web.UI.WebControls.CallbackEventArgs e)
    {
          lblDisplayDate.Text = DateTime.Now.Date.ToShortDateString();
          // Update the controls, if necessary.
          this.CallbackMultiplexer1.ControlsToRefresh.Add(this.CallbackPanel1);
          this.CallbackMultiplexer1.ControlsToRefresh.Add(this.CallbackPanel2);
         // Update more controls inside the CallbackPanel, if necessary. 
    }
 

Sending information to the server

Any information can be passed onto the server when a callback is triggered. The information sent from client can be obtained on the server.

    <ssw:CallbackMultiplexer runat="server" ID="CallbackMultiplexer1" 
    OnCallback="CallbackMultiplexer1_Callback" />

    <input id="Button1" type="button" value="Display Time"
     onclick="OnCallback()" />

    function OnCallback()
    {
           //Any data (for ex: checkbox value) can be passed as 
             //argument during callback  
            _sfCallbackMultiplexer1.callback(value);
    }

The CancellableCallbackEventArgs argument is used to retrieve the information, on server side.

    protected void CallbackPanel1_CallbackRefresh(object sender, 
    Syncfusion.Web.UI.WebControls.CancellableCallbackEventArgs e)
    {
           string str=e.CallbackArgument;
           //The information that is obtained can be processed as required.
    }

Script functions can be executed during different stages of the callback process using BeforeCallbackScript, AfterCallbackScript, BeforeCallbackResponseProcessingScript and AfterCallbackResponseProcessedScript properties.

When browser doesn't support callbacks, it will gracefully perform postbacks, so you shouldn't have to make any changes in your code to handle callbacks.

Process indicator

Using ShowLoadingIndicatorOnCallback property, the callback status can be indicated to the user. When this property is set to true, the process image with the text “loading” will be displayed when a callback is processed.