Friday, May 30, 2008

Using Ajax in Asp.Net

Before learning programming with Ajax It is necessary to understand Ajax and when it is worth full to use.

What is Ajax?
Ajax is a library to help you call methods of server side in client (browser) without refreshing the whole page but part of page. Let’s say you have list of countries as soon as user selects a country you need to show cities of that country in another dropdown. Imagine you have different elements in this page. What you need is just updating city dropdown. This is the best case to use Ajax since other part of page will stay in the page and users just feel that city dropdown is updated.

Ajax Help you to call server methods in client side without updating the whole page.

When using Ajax is worth full?
After working with Ajax a lot of programmers decide to use this technology a lot however, this is obviously a big mistake. Ajax should be used when implementing a functionality is completely impossible with javascript or massive data should be loaded to client. Let me give you an example if you need change data of a datagrid based on a dropdownlist it is not worth to write this code with javascript. If you need to just hide a part of data like a panel based on a check box it is not worth full to write this code with ajax.

There is a trade-off between using Ajax and JavaScript. Never use Ajax when you are able to implement the same functionality with JavaScript as long as you are not forced to load massive data to client.

How to create Ajax application?
If you are using visual studio 2005 you may need to download ajax library. If you are using visual studio 2008 you have ajax library. After installing ajax you can create Ajax-Enabled Web site from file new Web site. If you take a look to this project you will understand that there are some codes being added in web.config to enable ajax also at least for default page you will see a tag which is ScriptManager.

Ajax Elements:
In each page that you need to use ajax technology you defiantly need a ScriptManger control which has no user interface but it mostly prepare ajax technology for that page. This control will add some library to browser and some javascript. It is important to put this control as the first control in html view in your page. Then you can use an update panel to place controls that are going to be updated between postback. For example let’s say we have a page with different content but a grid should be updated without posting back the whole page so we put that grid inside the Update Panel. If your task is time consuming you can use updateProgress control to show a picture identifying you are loading data. In this post I am going to talk about UpdatePanel. I will examine other controls in next posts.

A sample code:
In this sample I used the same product table was created for other samples of website which is a simple product table I need to show information of this table in a Gridview based on price. So when 200 is defined as price we need to show all products that are less than 200. Take a look to this picture. Then download the code and also see the clip.

1 comment:

Unknown said...

Hi Emad
thanx for the ajax posts!
I'll read them and try to use them in my projects