New Document
ASP.NET - AJAX Control

RadControls is a complete ASP.NET AJAX development toolset. It includes over 70 highly optimized controls for rapid component-based UI development. Surveys among our clients show that RadControls speed up UI development up to 5 times and allow web developers to focus most of their time on implementing business logic.

If you are not a developer or don't have the time to thoroughly evaluate our product, then send us your project requirements. We will get back to you shortly to let you know if our controls meet each of your required features


AJAX stands for Asynchronous JavaScript and XML. This is a cross platform technology which speeds up response time. The AJAX server controls add script to the page which is executed and processed by the browser.

However like other ASP.Net server controls, these AJAX server controls also can have methods and event handlers associated with them, which are processed on the server side.


The ASP.NET AJAX controls enable you to create rich client behavior with little or no client script, such as partial-page updating (refreshing selected parts of the page instead of refreshing the whole page with a postback) and displaying update progress during asynchronous postbacks. Asynchronous partial-page updates avoid the overhead of full-page postbacks.

The control toolbox in the Visual Studio IDE contains a group of controls called the 'AJAX Extensions'

AJAX Extensions
What are the differences between the Server Control, the ASP.NET AJAX Server Control, and the ASP.NET AJAX Extender, and when should each be used?

At first glance, it would seem that the ASP.NET Server Control differs from the other two controls in that it doesn't support AJAX. This isn't completely true, however, and in the first part of this tutorial, I will demonstrate just how far you can go in developing an AJAX-enabled control based on the Server Control alone. While the ASP.NET Server Control does not provide direct access to AJAX scripts, it can implement AJAX scripts encapsulated in other controls such as the UpdatePanel, or the AJAX Extensions Timer Control, to provide AJAX functionality. For control developers who are not all that keen on delving into the intricacies and pitfalls of JavaScript, the Server Control offers an excellent and clean development path.

The AJAX Server Control and the AJAX Server Control Extender differ from the regular ASP.NET Server Control by coupling themselves with JavaScript files, and allowing mapping between properties of a control class and properties of a JavaScript class. When you need functionality not provided by other AJAX Server controls, or simply want to customize your control using client-side script in order to avoid the ASP.NET control life-cycle, then this is the best option.

Finally, while the AJAX Server Control Extender is primarily used to add behavior (that is, JavaScript) to other controls on your ASP.NET page, the AJAX Server Control is a self-contained control in which any client-side script you write will apply, for the most part, only to the control itself, or to its children. In other words, an AJAX Extender will be aware of other controls on your page, while an AJAX Server Control will not.

Of some interest is the fact that the ASP.NET AJAX Server Control template, like the ASP.NET Server Control template, implements a ScriptControl class that derives from System.Web.UI.WebControls.WebControl, while the ASP.NET AJAX Server Control Extender template implements an ExtenderControl class that derives directly from System.Web.UI.Control. This means that using the first two kinds of templates, your control will include some built-in properties like Enabled, Height, and Width, while this is not true of the Extender Control. For all practical purposes, however, this is not a significant difference. For a somewhat fuller treatment of the distinction between the WebControl and Control classes, please see Dino Esposito's article on the topic at MSDN.


ajaxdiagram

A good way to look at the three types of controls we are discussing, then, is in terms of strategies which incrementally add developer features to your custom control, while preserving the features of the earlier controls. If you are only interested in adding AJAX functionality through child controls, then the ASP.NET Server Control is your best option. If you need to include some custom client-script to your control, then you should use the ASP.NET AJAX Server Control. If you additionally need to make your custom control aware of another control on your page, in order to interact with it, then the ASP.NET AJAX Server Control Extender should be used.

Of course, given that an Extender Control can do everything the other two control types can do, you always have the option of using Extenders for all your AJAX control development -- and many people do. However, if you are the type of developer who likes to use only the right tools for the right situation, then it behooves you to put some consideration into which base class is most appropriate for your needs.

In that vein, this tutorial will lead you through the construction of three different controls, based on the ASP.NET Server Control, the ASP.NET AJAX Server Control, and the ASP.NET AJAX Server Control Extender, respectively. Each subsequent control will include and extend the functionality of the previous control.

This tutorial will also attempt to construct something generally useful, a session timeout watcher. Most strategies for handling session timeout involve reactive solutions which check the state of the session upon a user event, and then perform some task, such as a page redirect, if the session has expired. Passive solutions are common because of what I like to think of as a version of Heisenberg's Uncertainty Principle as applied to the web. There is no way to look at the session object surreptitiously, to see if it still exists, without extending its lifetime. And so, we wait for the user to do something, and then either redirect, if the session has expired, or do nothing. The idea here is that since the user is extending the session lifespan anyways, if it has not already expired, we can piggy-back on this event to do our own prodding of the session object.

The problem with a passive solution is that it can be somewhat startling for the user of your website to be taken to a new page when they are trying to complete whatever they were in the middle of when the stepped away for a cup of coffee. A kinder, gentler way to handle session expiration would be to anticipate when the session is about to timeout, and then take some action on the user's behalf. In this case, the user will return to a session expired page, and (hopefully) know exactly what just happened to him.

Given the mild complexity of this sort of control, I will also have the opportunity to illustrate various useful techniques and gotchas involved in building an AJAX-enabled control without excessive contrivance on my part. The intent of this tutorial is not only to provide you with the basics of how to develop an ASP.NET AJAX control, but also to provide you with helpful pointers on building your own complex solutions. I ask for your forbearance in the event that, in my attempts to accomplish one of these goals, I undermine the other, making this tutorial either too easy or too opaque, and not always finding the happy medium between the two.

Note: This tutorial and all source code is built on the RTM version of Visual Studio 2008, rather than the VS 2008 beta. I had trouble opening up my beta projects using the RTM version, and would imagine that the reverse is also true.

The ScriptManager Control

The ScriptManager control is the most important control and must be present on the page for other controls to work.

It has the basic syntax:

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

If you create an 'Ajax Enabled site' or add an 'AJAX Web Form' from the 'Add Item' dialog box, the web form automatically contains the script manager control. The ScriptManager control takes care of the client-side script for all the server side controls.

The UpdatePanel Control:

The UpdatePanel control is a container control and derives from the Control class. It acts as a container for the child controls within it and does not have its own interface. When a control inside it triggers a post back, the UpdatePanel intervenes to initiate the post asynchronously and update just that portion of the page.

For example, if a button control is inside the update panel and it is clicked, only the controls within the update panel will be affected, the controls on the other parts of the page will not be affected. This is called the partial post back or the asynchronous post back.

Example:

Add an AJAX web form in your application. It will contain the script manager control by default. Insert an update panel. Place a button control along with a label control within the update panel control. Place another set of button and label outside the panel.

The design view looks as follows:

ScriptManager

The source file is as follows:

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnpartial" runat="server" 
            onclick="btnpartial_Click" Text="Partial PostBack"/>
<br />
<br />
<asp:Label ID="lblpartial" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<p>
 </p>
<p>
Outside the Update Panel</p>
<p>
<asp:Button ID="btntotal" runat="server" 
    onclick="btntotal_Click" Text="Total PostBack" />
</p>
<asp:Label ID="lbltotal" runat="server"></asp:Label>
</form>

Both the button controls have same code for the event handler:

string time = DateTime.Now.ToLongTimeString();
lblpartial.Text = "Showing time from panel" + time;
lbltotal.Text = "Showing time from outside" + time;

Observe that when the page is run, if the total post back button is clicked, it updates time in both the labels but if the partial post back button is clicked, it only updates the label within the update panel.

update panel

A page can contain more than one update panel with each panel containing other controls like a grid and displaying different part of data.

When a total post back occurs, the content of the update panel is updated by default. This default mode could be changed by changing the UpdateMode property of the control. Let us look at other properties of the update panel.

Properties of the UpdatePanel Control:

The following table shows the properties of the update panel control:

PropertiesDescription
ChildrenAsTriggersThis property indicates whether the post backs are coming from the child controls which will cause the update panel to refresh.
ContentTemplateIt is the content template and defines what appears in the update panel when it is rendered.
ContentTemplateContainerRetrieves the dynamically created template container object and used for adding child controls programmatically.
IsInPartialRenderingIndicates whether the panel is being updated as part of the partial post back.
RenderModeShows the render modes. The available modes are Block and Inline.
UpdateModeGets or sets the rendering mode by determining some conditions.
TriggersDefines the collection trigger objects each corresponding to an event causing the panel to refresh automatically.
Methods of the UpdatePanel Control:

The following table shows the methods of the update panel control:

MethodsDescription
CreateContentTemplateContainerCreates a Control object that acts as a container for child controls that define the UpdatePanel control's content.
CreateControlCollectionReturns the collection of all controls that are contained in the UpdatePanel control.
Initialize Initializes the UpdatePanel control trigger collection if partial-page rendering is enabled.
UpdateCauses an update of the content of an UpdatePanel control.

The behaviour of the update panel depends upon the values of the UpdateMode property and ChildrenAsTriggers property:

UpdateModeChildrenAsTriggersEffect
AlwaysFalseIllegal parameters.
AlwaysTrueUpdatePanel refreshes if whole page refreshes or a child control on it posts back.
ConditionalFalseUpdatePanel refreshes if whole page refreshes or a triggering control outside it initiates a refresh.
ConditionalTrueUpdatePanel refreshes if whole page refreshes or a child control on it posts back or a triggering control outside it initiates a refresh.
The UpdateProgress Control:

The UpdateProgress control provides a sort of feedback on the browser while one or more update panel controls are being updated. For example while a user logs in or waits for server response while performing some database oriented job.

It provides a visual acknowledgement like "Loading page...", indicating the work is in progress.

The syntax for the UpdateProgress control is:

<asp:UpdateProgress ID="UpdateProgress1" 
              runat="server" 
              DynamicLayout="true" 
              AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
   Loading...
</ProgressTemplate>
</asp:UpdateProgress>

The above snippet shows a simple message within the ProgressTemplate tag, however it could be an image or other relevant controls. The UpdateProgress control will display for every asynchronous postback unless it is assigned to a single update panel using the AssociatedUpdatePanelID property.

Properties of the UpdateProgress Control

The following table shows the properties of the update progress control:

PropertiesDescription
AssociatedUpdatePanelIDGets and sets the ID of the update panel with which this control is associated.
Attributes Gets or sets the cascading style sheet (CSS) attributes of the UpdateProgress control.
DisplayAfterGets and sets the time in milliseconds after which the progress template is displayed. The default is 500.
DynamicLayoutIndicates whether the progress template is dynamically rendered.
ProgressTemplateIndicates the template displayed during an asynchronous post back which takes more time than the DisplayAfter time.
Methods of the UpdateProgress Control

The following table shows the methods of the update progress control:

MethodsDescription
GetScriptDescriptorsReturns a list of components, behaviors, and client controls that are required for the UpdateProgress control's client functionality.
GetScriptReferences Returns a list of client script library dependencies for the UpdateProgress control.
The Timer Control:

The timer control is used to initiate the post back automatically. This could be done in two ways:

(1) Setting the Triggers property of the UpdatePanel control:

<Triggers>
<asp:AsyncPostBackTrigger 
                ControlID="btnpanel2" 
                EventName="Click" />
</Triggers>

(2) Placing a timer control directly inside the UpdatePanel to act as a child control trigger. A single timer can be the trigger for multiple UpdatePanels.

<asp:UpdatePanel ID="UpdatePanel1" 
                 runat="server" 
                 UpdateMode="Always">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
<asp:Label ID="Label1" runat="server" 
           Height="101px" Width="304px">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>


Previous                                                                                                                                                       Next

Back to Top