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.
