If you have not yet started working with AJAX, then this article will help you quick with it. You will AJAX style of development a fun-to-do. Lets have a look.
The Installation
The installation of AJAX extensions 1.0 is fairly easy.
We need to install the "ASPAJAXExtSetup.msi" this can be downloaded from http://www.asp.net/ajax/downloads/
Note that the AJAX Extensions 1.0.11119.0. are meant to be used with ASP.NET 2.0 and with Visual Studio 2005, while AJAX Library 3.5 is now also available for .NET framework 3.5 and Visual Studio 2008. However, we will still talk about AJAX 1.0 extensions.
When you run the AJAX 1.0 extensions setup, this will instal the "System.Web.Extensions.dll" and System.Web.Extensions.Design.dll" to your machine or to the your Global Assembly Cache of your machine.
You can go an see both of the files under the following path C:\Windows\Assembly\
Congratulations ! your Visual Studio 2005 is ready for doing AJAX style of development. Start your VS 2005 right a way and start a new website. You will notice that the toolbox now has an additional Tab by the name of AJAX Extensions
Making the First Program .. Hello AJAX World
Start a new website and double click on default.aspx (from project explorer view) to open it in design mode.
Place a label control, and a button on the page. Name the label control as "lblMessage" and the button as "cmdTest" or whatever you like.
Change the text of the button as "Test the AJAX".
Double click on the button, to go to the code view and write the following code:
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdTest.Click
lblMessage.Text = "Hello to AJAX World. Today's Date is " & System.DateTime.Now.ToString("dd-MMM-yyyy hh:mm:ss")
End Sub
Now, press F5 to run the project,
Click the Button on the page to test the results.
You will notice that as soon as you click the button, the page Posts back itself (or the page Refreshes) to display the Message with date/time.
However, this is not the end of the story because AJAX has not yet come into the picture.
While the page open in design mode, go to the toolbox and double click on Script Manager under the AJAX extensions
This will put a Script Manager control on your page, which is responsible for managing/handling all AJAX scripts at the runtime
Select an UpdatePanel from the toolbox (under the AJAX Extensions menu) and place it on the form
Next, drag and place the Label control as well as the Button inside the UpdatePanel as shown in the figure below
Now Press F5 to run the application again. This time you'll notice that the page doesn't post back, but still displays the results on each click. This is basically running the server side code you've written under the click event of the button but, since we've used the UpdatePanel in the page and the purpose of the update panel is to tell the scriptmanager that which particular section of the page needs to be updated rather than the whole Page Postback.
With the AJAX tecnique, the data is posted back and retreived using the XMLHTTP (or XML over HTTP protocol).
Also, It is not necessary that you should place the button inside the Updatepanel, but you can put the button outside the Panel and control the Postback by specifying the Triggers inside the UpdatePanel triggers collection property.
Here's how we do it.
Put the button somewhere outside the Updatepanel (Drag it outside)
Click on the updatepanel in the design mode of the page, and then press F4 to open the properties window.
Click the Trigges property to open the "UpdatepanelTriggers Collection Editor" window shown in below image
The above diagram shows that when you click on the Add button it will show you two triggers, AsyncPostBackTrigger and PostBackTrigger.
You need to add the AsyncPostBackTrigger, we will talk about the PostbackTrigger later discussions.
The diagram exaplains you everything, that you need to select the ControlID and the Event of the TargetControl.
After setting all up, press Ok, and then press F5 to run the application. You will notice that, even though the button is outside the Updatepanel, but has the same result.
Conclusion
AJAX stands for Asynchronous JavaScript and XML.
AJAX fine tunes your pages to have greater user experience.
Particular parts or section of the page can be loaded without posting back the whole page with the help of XMLHttp (the technique of AJAX)
If a button is inside the Updatepanel, there is no need to define a trigger for that button inside the Updatepanel.
There can be more than one Updatepanel inside a page, each of which can be used for updating and retrieving content separately without page postback.
In working with AJAX Part 2, we are going to discuss about the AJAX Control and Control extenders shipped with the AJAX Control Toolkit.
Regards - raheel