Simple AJAX Example of Asp.net AJAX Framework

Simple AJAX Example of Asp.net AJAX Framework

In Simple Term what is AJAX?
AJAX is way by which we can avoid postback to perform server-side processing.

Consider Calculator Example: Following is a simple web application which performs calculation based on operation selected.



Problem with this application is when you click calculate button the default behavior is Page Postback occurs, and which is not user friendly. You can see in following Image that on Pressing Calculate Button page postback occurs and in worst case it take even time to render controls, as shown in figure, due to heavy calculation.


Now lets understand how we can avoid Page Postback with the use of AJAX and make a user friendly application.

AJAX Example with Visual Studio 2008 and Asp.net 3.5
Note: With VS.Net 2008 we don't need to modify web.config file as we used to do while using Ajax extension in VS.Net 2005, as AJAX Framework support is inbuilt with VS.Net 2008.

Step 1: Add Script Manager, Note: Every AJAX Application must contain Script Manager.



Step 2: Add Update Pannel, In AJAX anything inside Update Pannel, will avoid Page Postback and process server-side calculation as if client function has occurred.



Step 3: Put the controls Inside Update Pannel, which require Page Postback. In our example, I have form this calcy application in table so rather than putting just a button and result label i have put whole table, but otherwise you can just put LABEL and Button, as button cause Page Postback and Label updates actual result.



Now, run the application and you will feel the difference, the page will now not postback to calculate same operation which was causing Page Postback before.



So its so easy to make AJAX Enabled application with VS.Net 2008. For downloading AJAX Control Toolkit Extension for VS.Net 2008