Introduction

This tutorial will cover an intro to the AJAX Control Toolkit and show how AJAX can be used to perform its most common task a Partial Page Update.

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

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

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.

Download Source Files