DataProXL.com

Getting Started With ASP.NET AJAX


Describes how to setup ASP.NET AJAX for the first time and then create a first application. Based on a video at http://www.asp.net

Source Code | Q & A, Comments

 

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/.
This article is based on the video at http://www.asp.net/learn/videos/view.aspx?tabid=63&id=75

Installing ASP.NET 2.0 AJAX Extensions 1.0

Step 1) Go to http://www.asp.net/ajax/downloads/ and download the following-

ASP.NET 2.0 AJAX Extensions 1.0 (Download filename: ASPAJAXExtSetup.msi)

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

ASP.NET Futures (July 2007) (Download filename: ASPNETFutures.msi)

Sample Applications (Download filename: ASPAJAXSamples.msi)

[Microsoft AJAX Library (Download filename: MicrosoftAjaxLibrary.zip)
For ASP.NET AJAX development on non-Windows systems, the Microsoft AJAX Library package contains the complete set of client JavaScript components that are included in the full ASP.NET AJAX installation].

Step 2) If you have older versions of AJAX or if you want to remove the programs, go to Control Panel -> Add or Remove Programs.

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

 

Step 3) Run the ASPNETFutures.msi. You may get the following message. [The .NET Framework 2.0 hotfix (KB925675) is required. Setup will now begin installing the update. The update installation must finish before the current installation can proceed.]

After the installation of .NET Framework 2.0 hotfix, you will get the following prompt.

Choose Reboot Later and continue to installing ASP.NET Futures.


Read the release notes now and reboot the computer.

Step 4) Extract AjaxControlToolkit.zip to C:\Program Files\Microsoft ASP.NET\AjaxControlToolkit. This folder contains AjaxControlToolkit.sln (and AjaxControlToolkit.csproj). See the ReadMe.txt in this folder for more details.

Step 5) Run the ASPAJAXSamples.msi which creats [Program Files\Microsoft ASP.NET\ASP.NET AJAX Sample Applications]. See InstallationInstructions.txt in this folder for more details.

Creating the first ASP.NET AJAX Application:

Step 1) Open the Visual Studio, create a new website -> new ASP.NET Futures AJAX Web site. Default.aspx comes up with asp:ScriptManager already in place.

 

Visual studio toolbox shows the following: 

 

Step 2) In Default.aspx, create an UpdatePanel (by dragging & dropping the UpdatePanel control from the AJAX Extensions Toolbar in the Toolbox). Add <ContentTemplate> inside the UpdatePanel.

Step 3) Add one label (Label1) inside the UpdatePanel.
Add another label (Label2) outside the UpdatePanel.
Add one button (Button1, Ajax Button) inside the UpdatePanel.
Add another button (Button2, Non-Ajax Button) outside the UpdatePanel.

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h3>Getting Started with ASP.NET AJAX</h3>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /><br />
<asp:Button ID="Button1" runat="server" Text="AJAX Button" />
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><br /><br />

<asp:Button ID="Button2" runat="server" Text="Non AJAX Button" />
</div>
</form>

Step 4) Write the following code:

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
}

Step 5) Run 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 Label1 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.

To host this application, click Publish Web Site and copy all the resulting files to the hosting server. (WebHost4Life.com supports ASP.NET AJAX)

To see this live, go to: http://www.dataproxl.com/Demos/asp-net-ajax-enabled1.aspx