I’m excited to announce the September 2013 release of the Ajax Control Toolkit, which now supports building new Ajax Control Toolkit controls with jQuery.
You can download the latest release of the Ajax Control Toolkit from http://AjaxControlToolkit.CodePlex.com or you can install the Ajax Control Toolkit directly within Visual Studio by executing the following NuGet command:
The New jQuery Extender Base Class
This release of the Ajax Control Toolkit introduces a new jQueryExtender base class. This new base class enables you to create Ajax Control Toolkit controls with jQuery instead of the Microsoft Ajax Library.
Currently, only one control in the Ajax Control Toolkit has been rewritten to use the new jQueryExtender base class (only one control has been jQueryized). The ToggleButton control is the first of the Ajax Control Toolkit controls to undergo this dramatic transformation.
All of the other controls in the Ajax Control Toolkit are written using the Microsoft Ajax Library. We hope to gradually rewrite these controls as jQuery controls over time.
You can view the new jQuery ToggleButton live at the Ajax Control Toolkit sample site:
Why are we rewriting Ajax Control Toolkits with jQuery? There are very few developers actively working with the Microsoft Ajax Library while there are thousands of developers actively working with jQuery.
Instantiating Controls with data-* Attributes
We took advantage of the new JQueryExtender base class to change the way that Ajax Control Toolkit controls are instantiated.
The jQuery version of the ToggleButton injects the following HTML and script into the page:
<input id="ctl00_SampleContent_CheckBox1" name="ctl00$SampleContent$CheckBox1" type="checkbox" checked="checked" data-act-togglebuttonextender="imageWidth:19, imageHeight:19, uncheckedImageUrl:'ToggleButton_Unchecked.gif', checkedImageUrl:'ToggleButton_Checked.gif', uncheckedImageAlternateText:'I don't understand why you don't like ASP.NET', checkedImageAlternateText:'It's really nice to hear from you that you like ASP.NET'" />
The jQuery version of the ToggleButton uses an HTML5 data-* attribute instead of an inline script. The ToggleButton control is instantiated with a data-act-togglebuttonextender attribute. Using data-* attributes results in much cleaner markup (You don’t need to feel embarrassed when selecting View Source in your browser).
Ajax Control Toolkit versus jQuery
So in a jQuery world why is the Ajax Control Toolkit needed at all? Why not just use jQuery plugins instead of the Ajax Control Toolkit?
For example, there are lots of jQuery ToggleButton plugins floating around the Internet. Why not just use one of these jQuery plugins instead of using the Ajax Control Toolkit ToggleButton control?
There are three main reasons why the Ajax Control Toolkit continues to be valuable in a jQuery world:
- Ajax Control Toolkit controls run on both the server and client
jQuery plugins are client only. A jQuery plugin does not include any server-side code. If you need to perform any work on the server – think of the AjaxFileUpload control – then you can’t use a pure jQuery solution.
- Ajax Control Toolkit controls provide a better Visual Studio experience
You don’t get any design time experience when you use jQuery plugins within Visual Studio. Ajax Control Toolkit controls, on the other hand, are designed to work with Visual Studio. For example, you can use the Visual Studio Properties window to set Ajax Control Toolkit control properties.
Better ToolkitScriptManager Documentation
With this release, we have added more detailed documentation for using the ToolkitScriptManager. In particular, we added documentation that describes how to take advantage of the new bundling, minification, compression, and caching features of the Ajax Control Toolkit.
The ToolkitScriptManager documentation is part of the Ajax Control Toolkit sample site and it can be read here:
This release of the Ajax Control Toolkit includes several important bug fixes. For example, the Ajax Control Toolkit Twitter control was completely rewritten with this release.
Twitter is in the process of retiring the first version of their API. You can read about their plans here:
We completely rewrote the Ajax Control Toolkit Twitter control to use the new Twitter API. To take advantage of the new Twitter API, you must get a key and access token from Twitter and add the key and token to your web.config file. Detailed instructions for using the new version of the Ajax Control Toolkit Twitter control can be found here:
We’ve made some really great changes to the Ajax Control Toolkit over the last two releases to modernize the toolkit. In the previous release, we updated the Ajax Control Toolkit to use a better bundling, minification, compression, and caching system. With this release, we updated the Ajax Control Toolkit to support jQuery. We also continue to update the Ajax Control Toolkit with important bug fixes. I hope you like these changes and I look forward to hearing your feedback.
Where can we find documentation about using “jQuery Extender” and its development model?
Thanks in Advance.
Thanks for the update, having a few issues with the re-written twitter control. I am sure I have followed the instructions carefully, but the There are no matching tweets message always appears. Is this something that has been reported to you?
@dan — make sure that you set the Twitter keys in the app settings section of the web.config file. The correct names of the keys are act:TwitterConsumerKey, act:TwitterConsumerSecret, act:TwitterAccessToken, act:TwitterAccessTokenSecret. Make sure that you include the act: prefix. For instructions, see: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Twitter/Twitter.aspx
Cheers Stephen, spot on. Just FYI, the instructions on the link don’t include the act prefix…
The instantiation using data-* attributes is a reproduction of an old feature then called “declarative syntax”
I don’t know why Microsoft deprecated all these good stuff (the templating engine, declarative syntax, MS Ajax library) and now they are reintroduced with new names?
Great stuff! It’s a shame this wasn’t done long ago, but this definitely improves the viability of the ACT.
Does it works with ASP.NET MVC ?
Gerson – Really great question! ASP.NET MVC is not our main audience. In theory, we could get the Ajax Control Toolkit to work with ASP.NET MVC by using the data-* attributes. You would just need to includes the Start.js script that is responsible for converting the data-* attributes into Ajax Control Toolkit controls. However, we have not tested using the Ajax Control Toolkit with ASP.NET MVC and we won’t be supporting ASP.NET MVC in the near future. Our core audience is Web Forms.
There is a problem with the AjaxControlToolkit throwing errors on the server (see Error – Collection was modified; enumeration operation may not execute, https://ajaxcontroltoolkit.codeplex.com/workitem/27516). We’re seeing it several times a day, as are others in the community. One of the participants has found a possible cause.
Has this issue been addressed?
@Sandy — My hope is that this issue was fixed with the release yesterday — the x.x.x.1002 update. We found and fixed an issue with statics. In our testing, we no longer get this error with the latest release. Are you still getting errors?
I’ve been trying to install 184.108.40.2062 on our dev system all day. It’s somehow loading jQuery 1.9.1 by magic (instead of 1.10.2), and the jQuery UI methods stopped working. Very odd, and I hope it’s just me. We installed with NuGet, and I have a test example to demonstrate the problem. Anyone else getting this?
@Sandy — we are using jQuery.noConflict () to prevent clashes between different versions of jQuery (see http://api.jquery.com/jQuery.noConflict/). In other words, the version of jQuery used by the Ajax Control Toolkit should be hidden from the page and should not conflict with another version of jQuery added to the same page. Can you please open an issue at http://Ajax.CodePlex.com and attach your repro to the issue? That way we can investigate. Thanks.
I’ve opened an issue at https://ajaxcontroltoolkit.codeplex.com/workitem/27539 and hopefully this is something you can fix or I can work around. Thanks for your help, Stephen.
Stephen, A little more info: It looks like the symbol “jQuery” refers to version 1.9.1, and the “$” alias refers to the version I intentionally loaded, 1.10.2. Also, the jQuery UI methods are available through the “$” alias (e.g., “$().accordion()”), but the UI methods are not available from the “jQuery” symbol.
My belief at this point is that “jQuery” refers to a separate copy loaded by the Ajax Control Toolkit, and this causes a lot of problems in our application code that needs to refer to our intended copy of jQuery plus the jQuery UI.
According your comments, the version of jQuery used by the Ajax Control Toolkit should be hidden. I don’t think this is true in the new Toolkit release. In my test case, the “jQuery” symbol is visible and refers to version 1.9.1, even when my code loads version 1.10.2, or doesn’t load jQuery at all.
Still testing, but this problem looks like it’s fixed by update on 2013-Oct-06. Thanks for the quick response, Stephen!
Even though I stepped away from using ASP.NET, it is great you are progressively refactoring the ACT to use jQuery. This just make sense. Good job!