Install the Ajax Control Toolkit from NuGet

Posted by Stephen Walther on Stephen Walter See other posts from Stephen Walter or by Stephen Walther
Published on Mon, 23 May 2011 17:30:02 GMT Indexed on 2011/06/20 16:36 UTC
Read the original article Hit count: 1102

Filed under:

JavaScript

The Ajax Control Toolkit is now available from NuGet. This makes it super easy to add the latest version of the Ajax Control Toolkit to any Web Forms application.

If you haven’t used NuGet yet, then you are missing out on a great tool which you can use with Visual Studio to add new features to an application. You can use NuGet with both ASP.NET MVC and ASP.NET Web Forms applications. NuGet is compatible with both Websites and Web Applications and it works with both C# and VB.NET applications.

For example, I habitually use NuGet to add the latest version of ELMAH, Entity Framework, jQuery, jQuery UI, and jQuery Templates to applications that I create. To download NuGet, visit the NuGet website at:

http://NuGet.org

Imagine, for example, that you want to take advantage of the Ajax Control Toolkit RoundedCorners extender to create cross-browser compatible rounded corners in a Web Forms application. Follow these steps.

Right click on your project in the Solution Explorer window and select the option Add Library Package Reference.

In the Add Library Package Reference dialog, select the Online tab and enter AjaxControlToolkit in the search box:

Click the Install button and the latest version of the Ajax Control Toolkit will be installed.

Installing the Ajax Control Toolkit makes several modifications to your application. First, a reference to the Ajax Control Toolkit is added to your application. In a Web Application Project, you can see the new reference in the References folder:

Installing the Ajax Control Toolkit NuGet package also updates your Web.config file. The tag prefix ajaxToolkit is registered so that you can easily use Ajax Control Toolkit controls within any page without adding a @Register directive to the page.

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <pages>
      <controls>
        <add tagPrefix="ajaxToolkit" 
            assembly="AjaxControlToolkit" 
            namespace="AjaxControlToolkit" />
      </controls>
    </pages>
  </system.web>
</configuration>

You should do a rebuild of your application by selecting the Visual Studio menu option Build, Rebuild Solution so that Visual Studio picks up on the new controls (You won’t get Intellisense for the Ajax Control Toolkit controls until you do a build).

After you add the Ajax Control Toolkit to your application, you can start using any of the 40 Ajax Control Toolkit controls in your application (see http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ for a reference for the controls).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>Rounded Corners</title>

    <style type="text/css">
                
        #pnl1 {
            background-color: gray;
            width: 200px;
            color:White;
            font: 14pt Verdana;
        }        
    
        #pnl1_contents {
            padding: 10px;  
        }
    
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <asp:Panel ID="pnl1" runat="server">
        <div id="pnl1_contents">
        
        I have rounded corners!

        </div>
    </asp:Panel>

    <ajaxToolkit:ToolkitScriptManager ID="sm1" runat="server" />

    <ajaxToolkit:RoundedCornersExtender TargetControlID="pnl1" runat="server" />

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

The page contains the following three controls:

Panel – The Panel control named pnl1 contains the content which appears with rounded corners.
ToolkitScriptManager – Every page which uses the Ajax Control Toolkit must contain a single ToolkitScriptManager. The ToolkitScriptManager loads all of the JavaScript files used by the Ajax Control Toolkit.
RoundedCornersExtender – This Ajax Control Toolkit extender targets the Panel control. It makes the Panel control appear with rounded corners. You can control the “roundiness” of the corners by modifying the Radius property.

Notice that you get Intellisense when typing the Ajax Control Toolkit tags. As soon as you type <ajaxToolkit, all of the available Ajax Control Toolkit controls appear:

When you open the page in a browser, then the contents of the Panel appears with rounded corners.

The advantage of using the RoundedCorners extender is that it is cross-browser compatible. It works great with Internet Explorer, Opera, Firefox, Chrome, and Safari even though different browsers implement rounded corners in different ways. The RoundedCorners extender even works with an ancient browser such as Internet Explorer 6.

Getting the Latest Version of the Ajax Control Toolkit

The Ajax Control Toolkit continues to evolve at a rapid pace. We are hard at work at fixing bugs and adding new features to the project. We plan to have a new release of the Ajax Control Toolkit each month.

The easiest way to get the latest version of the Ajax Control Toolkit is to use NuGet. You can open the NuGet Add Library Package Reference dialog at any time to update the Ajax Control Toolkit to the latest version.

Developer IT