Email Aaron Blake now at webmaster@aaronblake.co.uk
or contact me

AJAX Control Toolkit in ASP.net 2.0

Introduction

This tutorial will cover how to use the new controls in the ASP.net AJAX Control Toolkit with your old ASP.net 2.0 websites.
This means you can use a whole host of new useful pre-built code, to quickly take advantage of the power of AJAX. For a demo of the controls go here: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

Requirements

STEP 1 – ASP.net AJAX Extensions

Before you can add the AJAX Control Toolkit to your site, you need to set it up to work with ASP.net AJAX.
A guide to do this in .net 2.0 can be seen in the previous tutorial. 

STEP 2 – Add the dll’s

In your web-site’s bin folder, add the following file from the control kit download:
  • AjaxControlToolkit.dll

STEP 3 – Add Controls to the Visual Studio Toolbox.

Add the controls to the Visual Studio Toolbox by doing the following:
  • Right click on the toolbox and select “Add Tab”
  • Rename the new tab whatever you want, something like AJAX Controls.
  • Now right click within that tab and select “Choose items..”
  • This will bring up a window, click on the browse button in the .net Framework Components tab and select the AjaxControlToolkit.dll.
  • This will add the controls to the toolbox, enabling you to drag and drop them into web pages.

STEP 4 – Register dll in page to be used

If you drag a control from the toolbox, this step should happen automatically, however if it doesn’t then make sure you do the following.
At the top of the page you wish to use the controls, add the register prefix:

<%@ Register Assembly=”AjaxControlToolkit”
Namespace=”AjaxControlToolkit”
TagPrefix=”ajaxToolkit”
%>

STEP 5 – Add control to page

You will now be able to use a a conrtol from the toolkit on that page within your site.
Just add one, for example:

<ajaxToolkit:CollapsiblePanelExtender ID=”cpe1″
runat=”Server”

                    TargetControlID=”Panel2″

                    Collapsed=”true”

                    CollapsedText=”Show
Details…”

                    ExpandedText=”Hide
Details”

                    TextLabelID=”Label1″

                    ExpandControlID=”CollapseHeader”

                    CollapseControlID=”CollapseHeader”

                    SuppressPostBack=”true”
/>

For further information, please visit:

One Trackback

  1. […] STEP 2 – ASP.net AJAX Control Toolkit Before you can add the AJAX ServerSideValidationExtender to your site, you need to set it up to work with AJAX Control Toolkit. A guide to do this in .net 2.0 can be seen in the previous tutorial.  http://www.aaronblake.co.uk/blog/2009/06/04/ajax-control-toolkit-in-aspnet-20/ […]

Post a Comment

You must be logged in to post a comment.

Email me through this magic form.