AJAX

---

 

 

No we are not talking about an all purpose cleaner here. AJAX stands for

A = Asynchronous
J = Javascript
A = And
X = XML

The Asynchronous statement simply means “lets open another URL without changing or reloading the page.”This is kind of nice because you can reload sections of a page without having to reload the contents of the entire page. Think of it like this, asynchronous simply means we are doing something else without disturbing the page we are viewing.

You may be wondering what JavaScript has to do with ASP.NET. The truth is that ASP.NET is a server side technology that really renders content on your web browswer as HTML or in many cases JavaScript. It is possible for you to interject JavaScript right into your ASP.NET code. This works because as I said some of it renders to JavaScript at your web browser anyway.

If you were doing AJAX strictly in JavaScript you would have to worry about xml files which is really removed from you in ASP.NET. In fact, in the examples that follow you will not see xml at all even though it is under the hood. ASP.NET does a nice job of removing the dirty details which simply let's you concentrate on the code you are writing.

Update Panel

---

ASP.NET has several AJAX controls available for you to use. You will find them in the toolbox under AJAX Extensions.  The most common of these is the UpdatePanel. It will treat all of the controls within it as if they are AJAX.

The <asp:UpdatePanel> tag has two childtags - the ContentTemplate and the Triggers tags. The ContentTemplate tag is required, since it holds the content of the panel. The content can be anything that you would normally put on your page, from literal text to web controls. The Triggers tag allows you to define certain triggers which will make the panel update it's content.

All programs using AJAX must have a ScriptManager. You should put this on before adding the UpdatePanel. Once you place the UpdatePanel you can add controls to it. In this example we are going to add a label and a button. Each time the button is clicked the current time is output to the label control.

Inside the the UpdatePanel you will find a ContentTemplate make sure the controls you want to use are within this template.

Here is the markup and the design:

 

Triggers

---

The Triggers tag allows you to define certain triggers which will make the panel update it's content. Triggers are a collection that is found within the properties of the UpdatePanel. The triggers is an AsyncPostBack and you typically select the control and the event to trigger the AJAX. In this example the trigger is the button and the event is the click event.

Example

---

In the example a second button is added to show the difference between using AJAX and not using it. Notice when clicking the non AJAX button the page refreshes each time the button is clicked. The AJAX button on the other hand simply updates without a complete page refresh.

The code to update the time in the label is as follows:

Timer Control

---

 

The timer control is used to update content on a time slice. It really only has few properties that you have to concern yourself with. Probably the most important of these is the Interval property. This property is the speed at which the timer runs or you might say it's resolution. The Interval value is in milliseconds so if you want the timer to tick each second you would set this value to 1000.

The timer uses the Tick event that fires each time the timer elapses. So if you want to update the time in a label every second you would set the Interval propery to 1000 and place the code to update the time in the label inside the Timers tick event.

In this example we are going to remove the button and add a Timer control to the UpdatePanel. The interval of the timer will be set to 1000 and the following code will be in the Tick event:

 

Trigger

---

 

Just like using the Button in the UpdatePanel a trigger has to be defined to hook the timer to trigger an AsyncPostBack. The following shows the Id of the control which is the timer (called tmrDate) and the Event we want to fire is the Tick event which fires each time the timer elapses. Every 1000 milliseconds or every second in the case: