Here are the simple steps to create your first ASP.NET AJAX Application from scratch. This article tells you everything about creating a sample ASP.NET AJAX web application if you have .NET 2.0 Framework and Visual Studio 2005. If you do not have them, you can download the .NET Framework and Visual Web Developer Express 2005 free at http://www.asp.net/

Installing ASP.NET AJAX Extensions:

First, I watched the video http://www.asp.net/learn/videos/view.aspx?tabid=63&id=75

Then I went to ajax.asp.net (http://ajax.asp.net/default.aspx?tabid=47&subtabid=471 ) and Downloaded the following:

1) ASP.NET AJAX 1.0 RC (Download filename: ASPAJAXExtSetup.msi)

2) ASP.NET AJAX Control Toolkit (Download filename: AjaxControlToolkit.zip)

3) AJAX Futures Dec CTP (Download filename: ASPAJAXCTP.msi)

4) ASP.NET AJAX Sample Applications (Download filename: ASPAJAXSamples.msi)

Then I ran the ASPAJAXExtSetup.msi (by double clicking), which installed the- AJAX Extensions to [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions].

Next, I ran the ASPAJAXCTP.msi, which created- [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Futures December CTP]. (See Fig 1 at http://blog.jotnow.net/2007/01/getting-started-with-aspnet-ajax.html)

Opened the Visual Studio, created a new website -> new ASP.NET AJAX CTP-enabled Web site. (See Fig 2 at http://blog.jotnow.net/2007/01/getting-started-with-aspnet-ajax.html ) Default.aspx came up with asp:ScriptManager already in place.

In the Toolbox, right click and select Add Tab. Named it AJAX CTP. Dragged and dropped to this area- Microsoft.Web.Preview.dll from [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Futures December CTP\v1.0.61025]. This added AJAX CTP controls to the Toolbox.

Created a new folder AJAXToolkit under [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions]. Extracted the AjaxControlToolkit.zip to this folder. AJAXToolkit folder contains a bunch of folders & files. From there - copied AjaxControlToolkit.dll and AjaxControlToolkit.pdb from [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AJAXToolkit\SampleWebSite\Bin] to [Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\AJAXToolkit\Binaries]

In the Visual Studio, Toolbox, added another Tab, named it AJAX Toolkit. Dragged & dropped AjaxControlToolkit.dll to this area. This added the all the controls from the Toolkit to the Visual Studio Toolbox. (See Fig 3 at http://blog.jotnow.net/2007/01/getting-started-with-aspnet-ajax.html )

Later, ran the ASPAJAXSamples.msi which created [Program Files\Microsoft ASP.NET\ASP.NET AJAX Sample Applications].

Creating the first ASP.NET AJAX Application:

Opened the Visual Studio, created a new website -> new ASP.NET AJAX CTP-enabled Web site. Default.aspx came up with asp:ScriptManager already in place.

Created an UpdatePanel (by dragging & dropping the UpdatePanel control from the AJAX Extensions Toolbar in the Toolbox)

Added one label (Label1) outside the UpdatePanel.
Added another label (Label2) inside the UpdatePanel.
Added one button (Button1, Ajax Button) inside the UpdatePanel.
Added another button (Button2, Non-Ajax Button) outside the UpdatePanel.
(See Fig 4 at http://blog.jotnow.net/2007/01/getting-started-with-aspnet-ajax.html )

Wrote the following code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Label1.Text = DateTime.Now
Label2.Text = DateTime.Now
End Sub

Ran the application.

Ajax and Non-Ajax Buttons are the normal buttons. One is inside the UpdatePanel and the other is outside.

Clicking the Button1 (Ajax Button) updates the Label2 only, without refreshing the page. Clicking the Button2 (Non-Ajax Button) refreshes the entire page making a postback. When you refresh the page, both labels get updated. (See Fig 5 at http://blog.jotnow.net/2007/01/getting-started-with-aspnet-ajax.html )

To host this application, clicked Publish Web Site and copied all the resulting files to the hosting server. Hosted at WebHost4Life.com (http://www.webhost4life.com/default.asp?refid=vinpad ). They support ASP.NET AJAX!

To see this in action, please go to: http://ajax.vinpad.com/default.aspx