This tutorial will teach you how to create a basic AJAX application that uses the Partial Page update feature which is the basis for the importance of AJAX.

*You should have already installed the AJAX Control Toolkit if you haven’t yet get it from here.

Overview

1. Create a Web Page and Add AJAX Controls

2. Test the Page and witness the Postbacks

3. Add Triggers and an Update Panel

Create a Web Page and Add AJAX Controls

1. Create a new Empty ASP.NET Application

2. Add a ScriptManager to the page. When making AJAX Applications you always have
to have one and only one ScriptManager on the form regardless of whether you have
inserted code into it or not.

3. Add a Text Box and a Label to the web form (named TextBox1 and Label1)

4. Add a Timer from the AJAX Extensions tab of the Toolbar and set the
interval to 500(500 ms is half a second)

5. Now double click on the Timer to open the Timer1_Tick Event Function and insert this code

[ajax]
Label1.Text = TextBox1.Text;
[/ajax]

6. This code will make it so that every time the Timer updates(or Ticks)
it will set the Label to whatever you have typed into the TextBox

Test the Page and Witness the PostBack

1. Now run the Code and witness the error that is happening with the Postback

2. The page should appear to be refreshing itself every half a second leaving you barely any
time to type into the textbox. This is because it is calling a Full Page Update (Postback).
Basically we have an AJAX Control but we are not using it in an AJAX friendly way.

3. The next step will be to add Triggers and an Update Panel so that we can witness the way AJAX is supposed to run.

Add Triggers and an Update Panel

1. The First Step is to add an Update Panel to the Form from the AJAX Extensions tab of the Toolbar

2. Next go to Design View and drag your Label into the Update Panel. We do this because the Update Panel
is what will perform the Partial Page Update.

3. Next we need to add a Trigger to the Update Panel so that it knows to update when the Timer Ticks

4. Go into the Update Panel Section of the Source View and insert this code to add an AsyncPostBackTrigger

5. This code will tell the Update Panel to update when the Timer1 Control Performs an operation.

6. We could have also dragged the Timer into the Update Panel, but for educational purposes we added the Trigger manually.
We did this because we may not always want the Trigger to be in the Update Panel we may want it outside and this
is how it is done.

7. Now run the code and type text into the TextBox after half a second it should set the Label equal to whatever
you have typed inside the TextBox.Also notice how much easier it is to type now that you dont have a
Full PostBack triggering every .5 seconds.

Conclusion

In this tutorial we have used an AJAX control to perform a Partial Page Update which is the first essential step to an
AJAX application. We also learned about Triggers and how to add them manually if we need to.

Full Code Sample(ASP.NET)

Download Source Files