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.
