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.
