AJAX Control Toolkit Tutorial: Introduction - Part One

In this article you will learn about AJAX Control Toolkit.

Ajax Control Toolkit is an open source library for web development. The ASP.net Ajax Control toolkit contains highly rich web development controls for creating responsive and interactive AJAX enabled web applications. ASP.Net Ajax Control Toolkit contains 40 + ready controls which is easy to use for fast productivity. Controls are available in the Visual Studio Toolbox for easy drag and drop integration with your web application. Some of the controls are like AutoComplete, Color Picker, Calendar, Watermark, Modal Popup Extender, Slideshow Extender and more of the useful controls.

The ASP.Net AJAX Control toolkit is now maintained by DevExpress Team. The Current Version of ASP.Net AJAX Toolkit is v16.1.0.0. There are lot of new enhancement in the current version from new controls to bug fixes in all controls. You can check the full new list of features and fixes from here. The good thing is that now officially they moved to Github from Codeplex.

Browser Support

It supports all new, updated and stable versions of Firefox, Chrome, Opera, Apple Safari and internet Explorer > 8 Version.

Visual Studio Support

It supports Visual studio version greater than 2010, and it integrates the toolbox items from running the executable file while it also supports to install through Nuget Package Manager. You can find the installer and Nuget Package. The supported Editions of the visual studio are Community, Professional, Premium and Ultimate.

System Requirements:

  • .Net Framework 4.0 or higher is required.
  • Visual Studio 2010 or higher with Editions enlisted in visual studio support.

Setup the Environment for AJAX Control Toolkit

Step 1 - Install by Adding Visual Studio Extension.

Download the Executable file from HERE.


Run the File.


Now after running the executable file it will show the download manager for AJAX Control Toolkit.

 

The Installer wizard installs the VSIX package file while is the add-on file of the visual studio extensions. It installs them on the all Editions installed on your System and also creates a demo website containing all the demo of the controls and the extenders. But before proceeding to install it close all the instances of the visual studio.


Now after closing all the instances click continue and accept the Terms.

 

Now it starts installing for all visual studio instances.


After successful installation it will give you confirmation screen.


Press Finish, now we will check by verifying the instance of Visual studio. For this Purpose we will create new web application by going to File è Website and create application.


Press Ok it will create application with its all files. Now to check we have successfully installed Ajax control toolkit or not we well open the web form .aspx page and check by going into the Toolbox for available Ajax control toolkit controls and extenders.


To open Toolbox Go to the View è Toolbox or Press Ctrl + Alt + X key combination.


Now it open the view of toolbox and check for the new Tab Added namely AJAX Control ToolKit v16.1.


We have successfully verified that Ajax control toolkit is properly installed by performing the above mentioned procedures. Now we will move next to add the one control to the page by drag and drop to the desired location of the page and check its output. Before proceeding we will check the Reference folder before and after drag and drop, what’s new has been added in this after adding control to the page.

Before Control added:


There is no reference present for Ajax control toolkit, now we will drag and drop control and see what happens to the page and reference folder.

After Control Added:


Looking Nice as we have Ajax control toolkit dll in the reference folder as well as control has been registered in the page by adding Register Tag and it added accordion control to the page.

Output:

This is the installation by using Extension for Visual Studio. Now we will look how we can Add Ajax Control Toolkit through Nuget Package Manager.

Step 2: Using Nuget Manager

Note: By installing in this way it will not add controls to toolbox. Need to add reference to page.

Create new asp.net web application and Right Click the Solution and select Manage Nuget Packages...


After selecting the menu it will show Nuget Package Manger Window search the keyword Ajax control.

It will populate the result and click install.


After Installation it will add tick icon which means installation of package is successful.


And the project look like this which has Reference in bin directory namely AjaxControlToolKit.dll.


Note

You should add register reference in page to register the Ajax control toolkit and it also is not present in toolbox items list. This is all about the installation steps of Ajax control toolkit via Visual studio extension with executable file and with nuget package manager. This is the intro of AJAX Control Toolkit, in the coming lectures we will see the toolkit controls and extenders in action.