So You Want To Be A Computer Nerd...

If your like me, you were probably pretty pumped when you heard that the official release of AJAX 1.0 for Visual Studio was available. I had messed around with "Atlas" when it was out and I see the similarities, but it wasn't until fairly recently that I really got my hands dirty in the new AJAX toolkit for VS 2005.

In this example we are going to be working with the new 'Calender Extender'. This cool new feature adds so much to your .NET web application but are so SIMPLE to use, you will be blown away at how easy it is. First lets create a new ASP.NET AJAX 1.0 enabled web site. We can do this by opening up Visual Studio 2005 and selecting new, then select AJAX enabled web site.

Lets take a look at our .NET page before adding any controls. If you are used to using Visual Studio to build web based applications then you should be pretty familiar with the standard layout and items that are involved with a web application. But with the new AJAX toolkit you will notice a new control on your page on default. Its called the 'AJAX Script Manager' (see screen shots below) I'm not going to go into the script manager in this example but it is used by the AJAX toolkit and is necessary to have on your page above any code on the page that will use it. Its best to keep it at the top of the page so that anything you have under it can use it. You only need 1 Script Manager per page and it will NOT effect the over-all appearance of your .NET page.


Now lets add a 'AJAX Update Panel' to our form. You will find it under the AJAX Extensions section of your Toolbox. The update panel assists in the AJAX functions, in most cases anything you want to update on the form without the whole page posting back you will want to place inside an update panel. Now that we have our update panel on the page we are going to drag and drop a .NET text box and a .NET Image into the Update Panel. This can be done very easily, just simply drag and drop like you normally would except place it inside the Update Panel.

Lets name the text box "txtSelectedDate", and the image "imgCalender". Now lets drag the AJAX CalenderExtender into the Update Panel as well. So now we should have a text box, an Image and a Calender Extender inside the update panel. Now lets assign some properties to our new form controls. For the ASP:Image lets set the ImageURL to point to a picture of a calender Icon like this one;

Your form should now look similar to this;


We'll finish up by setting the necessary properties of the calender Extender. We're going to set the PopupButttonID property to 'imgCalender' which is image we put in the update panel on our form. Then we'll set the TargetControlID to 'txtSelectedDate' which is the text box we added. Now make sure that the CalenderExtender , EnabledOnClient, and EnableViewState
properties are all set to 'True'.

Now run your form and click the calender image we put on the page. You should get a cool pop up calender control. Simply select a date and the calender will disappear and the date you selected will be placed in the text box on the form.

Pretty easy huh! This is just one of the features of the AJAX toolkit for Visual Studio. You can download the sample Visual Studio 2005 project by CLICKING HERE

Labels: .NET 2.0, AJAX, Calender control, Code Manager, Update Panel, Update Progress, Visual Studio 2005