AJAX for ASP.NET

The most remarkable feature of microsoft development products is that they make things that lets the programmner concentrate more on the problem rather than on how to implement its solution technological wise. The best example of it is the AJAX library provided by microsoft in visual studio 2008. It has a complete set of in-built scripts and related classes that would implement the hard core logics of AJAX. Inspite of all this it is very simple and easy to implement it ! It consists of the following controls:

1. Script Manager
2. Script Manager Proxy
3. Timer
4. Update Panel
5. Update Progress

I will discuss these in details one by one:

1. Script Manager

The ScriptManager control is central to AJAX functionality in ASP.NET. The control manages all ASP.NET AJAX resources on a page. This includes downloading Microsoft AJAX Library scripts to the browser and coordinating partial-page updates that are enabled by using UpdatePanel controls. In addition, the ScriptManager control enables you to do the following:

* Register script that is compatible with partial-page updates. In order to manage dependencies between your script and the core library, any script that you register is loaded after the Microsoft AJAX Library script.

* Specify whether release or debug scripts are sent to the browser.

* Provide access to Web service methods from script by registering Web services with the ScriptManager control.

* Provide access to ASP.NET authentication, role, and profile application services from client script by registering these services with the ScriptManager control.

* Enable culture-specific display of ECMAScript (JavaScript) Date, Number, and String functions in the browser.

* Access localization resources for embedded script files or for stand-alone script files by using the ResourceUICultures property of the ScriptReference control.

* Register server controls that implement the IExtenderControl or IScriptControl interfaces with the ScriptManager control so that script required by client components and behaviors is rendered.

When implementing Script Manager one has to remember that it should be placed before any control in the web-page. Further Using the ScriptManager Control with Master Pages, User Controls, and Other Child Components one has to remember that a page can contain only one ScriptManager control in its hierarchy. To register services and scripts for nested pages, user controls, or components when the parent page already has a ScriptManager control, use the ScriptManagerProxy control.

Microsoft also gives us the liberty of making our own scripts and using them via the script manager thus enabling to make our own library of scripts that suit our requirements.


2. Script Manager Proxy

Only one instance of the ScriptManager control can be added to the page. The page can include the control directly, or indirectly inside a nested component such as a user control, content page for a master page, or nested master page. In cases where a ScriptManager control is already on the page but a nested or parent component needs additional features of the ScriptManager control, the component can include a ScriptManagerProxy control. For example, the ScriptManagerProxy control enables you to add scripts and services that are specific to nested components.


3. Timer

This is the control with with most of the window programmers would be fimiliar. By implementing this in the webpage we can generate a request to the server from the client at specific time intervals which in turn would update he webpage from time to time. It updates anything that is present within the update panel.


4. Update Panel

It is a container that contains the controls on which the AJAX is to be implemented. All the controls within the update panel would be updated via AJAX implementation while the others would be done through post-back.

5. Update Progress

Many a times it is seen that even update panel takes a fraction of time to complete the request and response cycle. For that time being the end user does not know if updation operation is going on. To solve this we can use the Update progress control. In this we specify the template ,which can be any text or image, which will be shown whenever the update panel is fetching fresh values i.e. its in its request response cycle.

Example

Example for the above mentioned topics is as follows:

I have made a page where script manager control, update panel control, update progress control and timer control is used. The page consists of a textbox and a button. Whatever you write in the textbox, on clicking the button you get the length of the text entered. Now to simulate some processing on the server i have made a couple of nested loops that would execute for 3-4 seconds. This would fire the update progress control. Further there is a timer that would go to the server and bring the date-time stamp every 5 seconds. The screen shots of the coding is as follows:

The code behind is as follows:

The screen shots of the UI on execution will be as follows:

1. When the application is run we see the following in the webpage:

2. When the timer control fires automatically after 5 seconds

3. When we write a text in the texbox and click the Calculate button... the request goes to the server and update progress control is shown.

4.After the processing at the server is complete the length of the text entered is shown.

Hence we see how easily we can implement the AJAX controls in ASP.NET.