Getting Started with the ASP.NET AJAX Control Toolkit

By John Peterson

If you've been wanting to get started with AJAX, but haven't known where to start, this is your lucky day. The ASP.NET AJAX Control Toolkit is designed to provide a rich infrastructure for you to write your own ASP.NET AJAX extenders and controls, but it also provides a number of exceptional controls that can be used right out of the box by developers without any previous AJAX experience.

What is the ASP.NET AJAX Control Toolkit?

I always like to go directly to the source for the answer to this type of question. According to Microsoft:

The ASP.NET AJAX Control Toolkit is a shared source project built on top of the Microsoft ASP.NET AJAX framework. It is a joint effort between Microsoft and the ASP.NET AJAX community that provides a powerful infrastructure to write reusable, customizable and extensible ASP.NET AJAX extenders and controls, as well as a rich array of controls that can be used out of the box to create an interactive Web experience.

So even if you have no intention of ever writing any controls of your own, the toolkit is worth downloading just to get access to the over thirty controls that you can start using immediately.

First... Make Sure You Have AJAX

Since we're talking about using the ASP.NET AJAX Control Toolkit, it sort of makes sense that we'll first need basic AJAX functionality. Luckily this isn't too hard. ASP.NET 3.5 includes AJAX functionality so if you've already got ASP.NET 3.5 installed, you're all set. You don't need to download or install anything in this step.

If you don't have ASP.NET 3.5, you've got two options: upgrade to ASP.NET 3.5 (either via Windows Update or manually) or download and install ASP.NET AJAX Extensions 1.0. Personally I recommend just upgrading to ASP.NET 3.5, but the choice is yours.

For the rest of this article, I'll be using ASP.NET 3.5 and Visual Web Developer 2008 (VWD 2008). If your setup is different, then things may vary slightly.

Getting the ASP.NET AJAX Control Toolkit

Now that you've got the basic AJAX functionality in place, it's time to get the ASP.NET AJAX Control Toolkit. The toolkit is available as a free download from the AJAX Control Toolkit Project Page on CodePlex. Download the version which matches your setup. Since I'm using ASP.NET 3.5 and VWD 2008, I downloaded "AjaxControlToolkit-Framework3.5.zip" If you're sure you won't be building your own controls and don't want to download the sources, there's also a version which does not include the source code for the controls.

There is no setup program. The file you downloaded is just a zip file. Simply unzip it and save the contents wherever you want. I saved it in C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\.

ASP.NET AJAX Control Toolkit Files
ASP.NET AJAX Control Toolkit Files

Sample Web Site

Before we get started, you'll most likely want to play around with the sample web site that is included with the toolkit. It offers a perfect way to get an idea of what the different controls included in the toolkit do and how they work. There's a live version is hosted at http://www.asp.net/ajax/ajaxcontroltoolkit/samples/, but if you want to see the code behind the samples, you'll want to set up a local copy. To do this, simply follow these simple steps.

  1. Run Visual Web Developer 2008

  2. Create a New "Empty Web Site"

    I run IIS on my machine so I created the Web site underneath "http://localhost/" and called it "AJAXControlToolkitSample"

    New "Empty Web Site" named "AJAXControlToolkitSample"
    New "Empty Web Site" named "AJAXControlToolkitSample"

  3. Copy the Contents of the "SampleWebSite" Folder to the New Site

    I find it easiest to navigate to the source location (which would be "C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\SampleWebSite" if you've been following along) using Windows Explorer. Once there simply do a "Ctrl+A" to "Select All" the files, do a "Ctrl+C" to "Copy" them, go back to your VWD 2008 Web site, and do a "Ctrl+V" to "Paste" them into "Solution Explorer" window.

    Copy the Contents of the "SampleWebSite" Folder to the New Site
    Copy the Contents of the "SampleWebSite" Folder to the New Site

    You can also drag and drop the files or use the menus to copy and paste them if you prefer. Alternatively, you can also simply copy the files to the appropriate location via Windows Explorer directly and then just click the "Refresh" button in VWD's "Solution Explorer" window.

    Whatever method you use, your Web site should look something like this after you've copied in the files.

    Contents of the New Site After the Copy
    Contents of the New Site After the Copy

  4. View the Sample Site in a Browser

    Now all that's left to do is view the sample site in your browser of choice. From VWD 2008, you can use use the "View in Browser" button on the "Standard" toolbar or from the "File" menu.

    Viewing the ASP.NET AJAX Control Toolkit Sample Site in a Browser
    Viewing the ASP.NET AJAX Control Toolkit Sample Site in a Browser

Spend some time playing with the different controls to find out how they work and which ones might be useful in your own development projects. Once you've done that you'll want to take a look at the code behind some of them. Thankfully the team that put the sample site together was very well organized and named everything pretty well. Things in the sample folders are pretty easy to find.

So now that you've had a look around and are comfortable with how the controls work, lets see how you can take the sample controls and use them in your own site.

Adding the Toolbox Tab to Visual Web Developer 2008

To make things easier for you when you're developing with the ASP.NET AJAX Control Toolkit, you'll probably want to add a tab for the controls to the "Toolbox" and add the controls to the tab.

  1. Run Visual Web Developer 2008

    If it's not still running, launch VWD 2008 again.

  2. Create a New "Empty Web Site"

    Just like last time around, I'm creating a new web site from scratch to use as my demo site. I'm once again going to be hosting it underneath "http://localhost/". I'm going to call this site "ToolkitTest".

  3. Create a New Web Form

    Visual Web Developer 2008 only shows you tools that apply to the type of document on which you're currently working. So you can see toolbox tab we'll be working with, it's best to create a new Web Form ("default.aspx" is fine) and open it.

  4. Add a New Tab Called "AJAX Toolkit" to the Toolbox

    Right-click in the "Toolbox" window and select the "Add Tab" option from the context menu. Name the new tab "AJAX Toolkit".

  5. Add Controls to the New Tab

    Right-click in the new "AJAX Toolkit" tab we just created and select the "Choose Items..." option from the context menu.

    Add Controls to the "AJAX Toolkit" Tab
    Add Controls to the "AJAX Toolkit" Tab

    This will launch the "Choose Toolbox Items" dialog box. Click the "Browse" button at the right side of the window and browse to the "AjaxControlToolkit.dll" in the "/Bin" folder of the sample Web site where you unzipped the toolkit. If you've been naming things the same as I have, it'll be here:
    C:\Program Files\Microsoft ASP.NET AJAX Control Toolkit\SampleWebSite\Bin\AjaxControlToolkit.dll.

    Once you select the DLL and click the "Open" button, you'll be back in the "Choose Toolbox Items" dialog box. All the controls will already be selected so you don't need to do anything more. Simply click the "OK" button to add the ASP.NET AJAX Control Toolkit controls to the new tab.

  6. That's It!

    When your done, your new "AJAX Toolkit" tab should look something like this.

    The "AJAX Toolkit" Tab After Controls Have Been Added
    The "AJAX Toolkit" Tab After Controls Have Been Added

Using the Sample Controls

Now that you've set up your development environment, I'm going to walk you through building a very simple Web page that uses one of the controls

  1. Open a Web Form

    Since I already created it in the last section, I'm going to use "default.aspx" for my demo. Feel free to use it or create a new file. You'll most likely want to create a few different files as you play with the different controls.

  2. Switch to Design Mode

    You can naturally do things in Source mode if you'd like, but doing things in Design mode handles a lot of the little details for you.

  3. Drag the Controls to the Form

    For this demo, we'll need to drag three controls from the toolbox onto the form. The first is the "ScriptManager" control from the "AJAX Extensions" tab. The second is a plain "TextBox" control from the "Standard" tab. The last is the "CalendarExtender" control from the "AJAX Toolkit" tab we added in the last section. You want to drop the "CalendarExtender" control right onto the "TextBox" control since that's the control it will extend. When you're done it'll look something like this

    Demo Page Design View
    Demo Page Design View

    I cleaned things up a bit, added some text, and named some of the controls, but that's optional and totally up to you.

  4. Take a Look at the Code (If You Want)

    Here's the "neatened up for publication" version of the code that Visual Web Developer generated for us.

    <%@ Page Language="VB" %>
    <%@ Register assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI" tagprefix="asp" %>
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>ASP.NET AJAX Control Toolkit Test Page</title>
    </head>
    <body>
    <form id="myForm" runat="server">
    <div>

        <asp:ScriptManager ID="myScriptManager" runat="server" />

        Date: <asp:TextBox ID="txtDate" runat="server" />

        <ajaxToolkit:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
            TargetControlID="txtDate"
        />

    </div>
    </form>
    </body>
    </html>

  5. View the Demo in a Browser

    Really! Just dragging and dropping those controls onto the form should get the basics working for you. The demo you just created lets a user enter a date into the textbox using a pop-up calendar instead of having to type it in by hand.

    Demo Page at Run Time in a Browser
    Demo Page at Run Time in a Browser

That's it. While it's true that fine tuning the controls to get them work exactly as you want may take some time, we did get an awful lot of really cool functionality without very much effort and without writing a line of code. And that's just one of the simple controls.

I'll leave it to you to play with the others!

Conclusion

That's all there is to it folks. Granted the ASP.NET AJAX Control Toolkit provides a lot more power and usefulness to developers who will be using it to create their own ASP.NET AJAX extenders and controls, but because of the many useful samples it includes, there's value to be had even if you've never touched AJAX before.



Comments

  • Jordan shoes mentioned Gene to buy the variety, a segment of Nike

    Posted by TaddyGaffic on 04/24/2013 05:09pm

    In focus groups conducted at 80 community-based organizations around the country, Motivational Educational Entertainment of Philadelphia [url=http://fossilsdirect.co.uk/glossarey.cfm]nike huarache[/url] identified disturbing trends among youths ages 16 to 20. The "Just Say No" message of abstinence-only campaigns has been lost on this group of young people, who grew up during an era when the hip-hop sensibility of getting cash and clothes did not incorporate values of conscientious sexual behavior or social responsibility. Rappers who mingle [url=http://markwarren.org.uk/property-waet.cfm]air max 90[/url] with glamorous-looking half-naked women rarely mention contraception while they're listing the number of compromising sexual situations they've been in lately. There are number of good brands in the market like Adidas, Nike, Reebok, Asics, Brooks, Puma etc. Most of these brands have shoes tailored for professional and amateur tennis players. New advanced technologies have made these shoes more player-friendly. After that, I eventually like to try to get down to the 150-160 range. I not entirely sure if that a healthy number for a gal my height or not, and I haven looked into it. But, I know that when I was 180 I still didn feel that [url=http://markwarren.org.uk/property-waet.cfm]nike air max 90[/url] fit, so I think an extra 20 or so will help with that.. Lotto sneakers selling price are generally liable along with using the form of sneakers you choose on. Your Lotto sneakers established fact because of their style along with good quality plus the create. That they create sneakers coming from all varieties much like the loafers,Puma II Shoes, new sandals, sneakers along with task tennis shoes or anything else

    Reply
  • Exactly what everybody else actually does in the matter of nike and specifically what youought to do different.

    Posted by icoppyapedcap on 04/21/2013 08:37am

    Wg [url=http://hunter-rain-boots.webnode.jp]レインブーツハンター[/url] tGp [url=http://hunterrainbootsjp.webnode.jp]ハンターレインブーツ[/url] h RzqTyg RkhW [url=http://hunter-boots8.webnode.jp]レインブーツハンター[/url] kf D [url=http://rain-boots-men.webnode.jp]ブーツ[/url] vl [url=http://hunter-rain-boots-ja.webnode.jp]レインブーツメンズ[/url] DjiAgmDqh T[url=http://rainshoesja.webnode.jp]長靴[/url] xuTakLeaZr [url=http://ja-hunter-rain-boots.webnode.jp]ハンター長靴[/url] a QpuMxc [url=http://rain-boots-popular.webnode.jp]レインブーツメンズ[/url] Cld [url=http://rain-boots-men6.webnode.jp]ハンターレインブーツ[/url] Jpt Zwn [url=http://jahunterrainboots.webnode.jp]ハンター長靴[/url] Msf

    Reply
  • Nike Air Max+instagram, wishes you take the color to wear on your feet!

    Posted by madytreathy on 04/20/2013 11:14pm

    Recollect in 2008, if not earlier, when Nike launched winning of the self-assured shoe color projects, the slogan "Scion Your Colours", "Nike PhotoiD" scheme, [url=http://fossilsdirect.co.uk/glossarey.cfm]nike huarache[/url] reply has not been as hearty as expected. Deem, 2008 Canon IXUS 80 IS Digital prankster arcade but contrariwise 8 million pixels, Nokia, the facile phone market-place is the only administration, NikeiD was boost to color in the photos as a underpinning someone is concerned sneakers levy color, although gripping, but does bother some. Instagram which sort this passion game of and fundamental, Nike PHOTOiD homeopathic upgrade customization services, recently [url=http://markwarren.org.uk/property-waet.cfm]air max 90 uk[/url] released a new plan. That such iD can you utensil pictures as instagram account shoe color, the meanwhile offer Nike Breeze Max shoes and Nike Style Max 1, Nike Affectedness Max 90 953 options. Interested in children's shoes, you [url=http://markwarren.org.uk/goodbuy.cfm]nike free uk[/url] can without exception go's valid website photoid.Nike.com, in beyond to flick through other people's artistic work, or you can try to upload your own instagram photo, physique your own Nike Air Max.

    Reply
  • Abercrombie & Fitch est la marque de vêtements originale et riche d'une histoire enracinée dans le unstinting dram et la c?te Est Ivy Confederation

    Posted by cnbpittwy on 03/22/2013 02:21am

    La Dog Jordan [url=http://www.hollistercoefrance.fr]hollister france[/url] V Be in abeyance Red, coloris White-Black-Fire Red, sortie originalement en 1990 et reedite en 2000 et 2008, fera son retour au mois de janvier [url=http://www.abercrombiefrancevparis.fr]abercrombie france[/url] . Le meme mois sortira laAir Jordan XIII ‘He Got Crossroads', qui a ete creee en 1997 et jamais reeditee.Un nouveau coloris de Intuit Jordan III sortira au mois de fevrier [url=http://www.airjordanfrpascherz.com]jordan[/url] (update: coloris Black-Bright Crimson) ainsi qu'un employees nouveau coloris de Puffery Jordan XIII. Francais de chaussures Louboutin meilleure [url=http://www.abercrombieafranceusolde.fr]abercrombie france[/url] id俥 re噓 de gourou a la rim exageree et la couleur by the bucketful exprimer leurs idees de crotchet, inhabituelles est toujours juste a droite sur la portee [url=http://www.hollisteruonlineshops.de]hollister[/url] mesuree, a la fois spew not at home attirer l'acclaim des gens, pas trop etrange explode etre reduit a l'heterogene. Forts contrastes de couleurs cette saison terminee Louboutin chaussures coupees en visuel, [url=http://www.hollisterfranceamagesin.fr]hollister france[/url] et le wise of countenance de l'orchestra, ils sont tres enthousiastes, se sont ensuite reunis dans les rues de l'ete devrait se sentir agreable moment. Lors de la planification et de la construction, ils devaient être le Styx-classe nommée après quatre chiffres américains, le général Ulysses S. Deliberate, le général Robert E. Lee, l'amiral David Farragut et le général Stonewall [url=http://www.abercrombiexandfitchukes.co.uk]abercrombie[/url] Jackson. Parce que les états-Unis était encore une puissance neutre, à ce moment-là, l'utilisation de ces noms auraient été peu diplomatique et ils ont été simplement appelé M1 à M4 avant de recevoir leur delineate finale names.The inclus [url=http://www.abercrombiesdeutschlandshopu.com]abercrombie deutschland[/url] un hydravion claque repérer les armes à feu, mais il a été constaté que terrestre avions étaient gain rationale efficaces, comme les moniteurs, ils n'auraient jamais fonctionner dans la mer, et le stockage de l'hydravion au-dessus de [url=http://www.abercrombiesdeutschlandshopu.com]abercrombie deutschland[/url] la tourelle signifiait qu'il devait être retiré squall cats éviter talk up dommage, même s'il n'est pas nécessaire avant que les canons pouvaient tirer.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Webinar Tuesday, August 26, 2014 1:00 PM EDT Customers are more empowered and connected than ever, and the customer's journey has grown more complex. Their expectations are growing and trust is diminishing as they may interact with multiple brands through web, mobile and social channels. Considering 70% of the buying process in a complex sale is already complete before prospects are willing to engage with a live salesperson -- it's critical to understand your customers and anticipate their needs.* …

  • Packaged application development teams frequently operate with limited testing environments due to time and labor constraints. By virtualizing the entire application stack, packaged application development teams can deliver business results faster, at higher quality, and with lower risk.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds