Today, we released a new version of the Ajax Control Toolkit that contains several important bug fixes and new features. The new release contains a new Tabs control that has been entirely rewritten in jQuery.
You can download the December 2013 release of the Ajax Control Toolkit at http://Ajax.CodePlex.com. Alternatively, you can install the latest version directly from NuGet:
The Ajax Control Toolkit and jQuery
The Ajax Control Toolkit now contains two controls written with jQuery: the ToggleButton control and the Tabs control. The goal is to rewrite the Ajax Control Toolkit to use jQuery instead of the Microsoft Ajax Library gradually over time.
The motivation for rewriting the controls in the Ajax Control Toolkit to use jQuery is to modernize the toolkit. We want to continue to accept new controls written for the Ajax Control Toolkit contributed by the community. The community wants to use jQuery. We want to make it easy for the community to submit bug fixes. The community understands jQuery.
Using the Ajax Control Toolkit with a Website that Already uses jQuery
But what if you are already using jQuery in your website? Will adding the Ajax Control Toolkit to your website break your existing website? No, and here is why.
The Ajax Control Toolkit uses jQuery.noConflict() to avoid conflicting with an existing version of jQuery in a page. The version of jQuery that the Ajax Control Toolkit uses is represented by a variable named actJQuery. You can use actJQuery side-by-side with an existing version of jQuery in a page without conflict.Imagine, for example, that you add jQuery to an ASP.NET page using a <script> tag like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestACTDec2013.WebForm1" %>
<!DOCTYPE html>
<html >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<ajaxToolkit:ToolkitScriptManager runat="server" />
<ajaxToolkit:TabContainer runat="server">
<ajaxToolkit:TabPanel runat="server">
<HeaderTemplate>
Tab 1
</HeaderTemplate>
<ContentTemplate>
<h1>First Tab</h1>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server">
<HeaderTemplate>
Tab 2
</HeaderTemplate>
<ContentTemplate>
<h1>Second Tab</h1>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
The page above uses the Ajax Control Toolkit Tabs control (TabContainer and TabPanel controls). The Tabs control uses the version of jQuery that is currently bundled with the Ajax Control Toolkit (jQuery version 1.9.1).
The page above also includes a <script> tag that references jQuery version 2.0.3. You might need that particular version of jQuery, for example, to use a particular jQuery plugin.
The two versions of jQuery in the page do not create a conflict. This fact can be demonstrated by entering the following two commands in the JavaScript console window:
actJQuery.fn.jquery
$.fn.jquery
Typing actJQuery.fn.jquery will display the version of jQuery used by the Ajax Control Toolkit and typing $.fn.jquery (or jQuery.fn.jquery) will show the version of jQuery used by other jQuery plugins in the page.
Preventing jQuery from Loading Twice
So by default, the Ajax Control Toolkit will not conflict with any existing version of jQuery used in your application. However, this does mean that if you are already using jQuery in your application then jQuery will be loaded twice. For performance reasons, you might want to avoid loading the jQuery library twice.
By taking advantage of the <remove> element in the AjaxControlToolkit.config file, you can prevent the Ajax Control Toolkit from loading its version of jQuery.
<ajaxControlToolkit>
<scripts>
<remove name="jQuery.jQuery.js" />
</scripts>
<controlBundles>
<controlBundle>
<control name="TabContainer" />
<control name="TabPanel" />
</controlBundle>
</controlBundles>
</ajaxControlToolkit>
Be careful here: the name of the script being removed – jQuery.jQuery.js – is case-sensitive.
If you remove jQuery then it is your responsibility to add the exact same version of jQuery back into your application. You can add jQuery back using a <script> tag like this:
<script src="Scripts/jquery-1.9.1.min.js"></script>
Make sure that you add the <script> tag before the server-side <form> tag or the Ajax Control Toolkit won’t detect the presence of jQuery.
Alternatively, you can use the ToolkitScriptManager like this:
<ajaxToolkit:ToolkitScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jQuery.jQuery.js" />
</Scripts>
</ajaxToolkit:ToolkitScriptManager>
The Ajax Control Toolkit is tested against the particular version of jQuery that is bundled with the Ajax Control Toolkit. Currently, the Ajax Control Toolkit uses jQuery version 1.9.1. If you attempt to use a different version of jQuery with the Ajax Control Toolkit then you will get the exception jQuery 1.9.1 is required in your JavaScript console window:
If you need to use a different version of jQuery in the same page as the Ajax Control Toolkit then you should not use the <remove> element. Instead, allow the Ajax Control Toolkit to load its version of jQuery side-by-side with the other version of jQuery.
Lots of Bug Fixes
As usual, we implemented several important bug fixes with this release. The bug fixes concerned the following three controls:
Tabs control – In the course of rewriting the Tabs control to use jQuery, we fixed several bugs related to the Tabs control.
AjaxFileUpload control – We resolved an issue concerning the AjaxFileUpload and the TMP directory.
HTMLEditor control – We updated the HTMLEditor control to use the new Ajax Control Toolkit bundling and minification framework.
Summary
I would like to thank the Superexpert team for their hard work on this release. Many long hours of coding and testing went into making this release possible.
