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.
