Ajax means asynchronous java script and XML. Ajax is a plug-in to Microsoft visual studio which enables some common functionalities of the Java scripts in to the VS itself. This enables the user to drag and drop the components to the web page and develop the application without having to write any code. One of the most powerful components that come with the AJAX extinctions is the “Update panel” which enables the partial page updates. In order to use this you need Ajax extinctions which you can down load and install form the following link.
Once you install the Ajax Extinctions you have the project template called AJAX enabled website when you go to create a new web site.
Ajax Enabled Website
Once you crate this type of project you will have your web site AJAX enabled (If you are trying to have an update panel you have to make it AJAX enabled which I have explained in my previous article)
Once you have created the project you will have;
· Web configuration created unlike on the ASP.net normal web site.
· There will be a tab called AJAX extinctions on design mode within your tool box.
There is something called script manager which should be included once and only once in an ASP.net page in the tool box AJAX extinctions, which you should see in your web page by default. If it is not there you can dag and drop it form the tool box to your page.
Then you can drag and drop an update panel form the tool box to your web page. You can include the components of your web page you need to partially update. Let’s say I want to update a label on button click form a text box without having my whole web page to post back.
There are couples of ways to do this;
· Have all the components with in a update panel
· Have only the components that you want to update within the update panel
1. In the first method you simply include the component you want to update on asynchronous post back within the update panel as well the component with the event that you want to update the panel.
2. In the next method I just place only the components I want to update within the update panel. Then add the events that I want the update panel to update on collection of triggers for the update panel.
Update Panel trigger collection
Then I have to change the update mode from always to conditional. Because It would be necessary if one decides to have multiple update panels in the same web page so that the events want fire on always on partial updates. However it is recommended to have the conditional update mode.
Update panel properties
After all these the advantage that I have by using the update panel is it allows me partial post back. So if I have a complex graphics or photos as the frame of the page I don’t need to reload them after each and every post back. So it drastically reduces that time that the user have to wit after a single click on the web page. It sounds great for me.