Thursday, July 5, 2007

My First Ajax Application

This is considered as my first Ajax application, though it's very simple.
My boss was complaining the page keeps flickering when users perform some actions on the website.
It's because the users always need to request something from the server, so many controls trigger post-back.
This solution can definitely please him. :p
Actually I should have looked into Ajax earlier, coz it's very easy to implement.

Prerequisite: Installed Ajax Extensions 1.0.
Firstly, create a new website.
Select "ASP.NET AJAX-Enabled Web Site" under the Visual Studio installed templates category.
New Ajax Website

Once you've installed Ajax Extensions, you'll see a tab "AJAX Extensions" added in your toolbox.
Drag and drop the "UpdatePanel" to your web form.
UpdatePanel

I've made a very simple example here, to demonstrate the difference between with Ajax and without Ajax methods.

I've used the following controls:
(1) DropDownList - to list the selection items
(2) Button - to select the particular item
(3) Label - to display the selected item
Ajax example
Well, I don't know what's the "ScriptManager" about, it was automatically added when I first created the website. I just put the three controls in the UpdatePanel for Ajax demo.

In the example, you'll see with Ajax components, the page doesn't flicker when you send request to the server.

Ajax example

No comments:

Post a Comment