How to create AJAX enabled web applications

- Chandra Nayana

We are here to take u through development of AJAX enabled web applications easily from scratch step by step.

Before going forward have a look at below links:
Click and learn AJAX
Click and know S/W installations for AJAX

ASP.Net Ajax server controls: They contain server and client code that integrate to produce Ajax like behaviour.

Frequently used server controls are:

ScriptManager : Manages script resources for client components, partial page rendering, localization and custom user scripts.

UpdatePanel: Enables us to refresh selected parts of the page.

Updateprogress: Provides status info about partial page updates in updatepanel controls.

Timer: Allows us to perform postbacks at defined intervals.

Now we will discuss how to create AJAX enables website:

Start Visual studio or visual web developer express edition.

1. Goto ->File->New->Website as shown:



2. Then it will open window asking for which website then select AJAX enabled website which will be under visual studio templates.



3. Enter location and language and press OK.

4.Then a new web application will be opened as:



5. AJAX Extensions available are as shown:



learning how to add and use the Toolkit.

1. In the toolkit tab right click and select Add tab option as shown:



2. Then it will add a new tab name it as AJAX Toolkit or any name of ur wish.



3. To add items to the toolkit right click and select choose items options.




4.Then it will open a window having .Net framework components and COM components tabs goto >net framework components tab and click on browse



5. Then browse for the AJAX Toolkit.dll file from bin folder of the toolkit that is downloaded.



6. Then all elements in the toolkit will be added in the tab that is just created.



7. Then the elements in the new Toolkit tab will be as shown:



Then we can use them based on their use.

Now we will use modal popup control, update panel, update progress bar, normal panel controls to create a sample AJAX enabled application.

To add theme to the website right click on the project in solution explorer window and goto asp.netfolder -> theme



Then theme will be added with theme1 as default in app_themes folder. Then right click on theme1 and add new item style sheet and save it as ur wish.





Then add the following code into the .css file:

.modalBackground {
background-color:#c0c0c0;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

Colours can be of ur wish.

Then add new folder images and copy images of ur wish into that folder. Update the code given below to accept the images mentioned i.e jus change the names of the images.
such as img4 for indicator etc..

Then add different elements as shown or just copy the code from the link given below.

Link for code to be pasted in source file




Add the following code in .CS file the page.

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = "Hi This is loaded for first time.......";
}
protected void Button1_Click(object sender, EventArgs e)
{

}
protected void lnk2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(4000);
Label1.Text = "Hi time changed at" + DateTime.Now.ToString();
}
protected void lnk3_Click(object sender, EventArgs e)
{
Response.Redirect("Default.aspx?");
}
}


In web.config file update the pages theme as theme1 by updating the pages theme property to theme1 in pages tag as shown:

pages theme="Theme1">controls>/controls>/pages>

Then if u build and run the website Then first screen will be:



Then if you click on "Time???" button then screen will be:



Then if you click on View time button then screen will be:



After updating time the output will be :



If you click on cancel button the screen will be updated as: