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.
