Ajax Control Toolkit Now Supports jQuery

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:

clip_image002

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:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ToggleButton/ToggleButton.aspx

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.

Because we want talented developers in the community to continue to contribute to the Ajax Control Toolkit, and because almost all JavaScript developers are familiar with jQuery, it makes sense to support jQuery with the Ajax Control Toolkit.

Also, we believe that the Ajax Control Toolkit is a great framework for Web Forms developers who want to build new ASP.NET controls that use JavaScript. The Ajax Control Toolkit has great features such as automatic bundling, minification, caching, and compression. We want to make it easy for ASP.NET developers to build new controls that take advantage of these features.

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.

In the past, adding an Ajax Control Toolkit to a page resulted in inline JavaScript being injected into the page. For example, adding the ToggleButton control to a page injected the following HTML and script:

<input 
     id="ctl00_SampleContent_CheckBox1" 
     name="ctl00$SampleContent$CheckBox1" 
     type="checkbox" 
     checked="checked" />

                
<script type="text/javascript">

//<![CDATA[

Sys.Application.add_init(function() {

$create(Sys.Extended.UI.ToggleButtonBehavior, {"CheckedImageAlternateText":"Check", "CheckedImageUrl":"ToggleButton_Checked.gif", "ImageHeight":19, "ImageWidth":19, "UncheckedImageAlternateText":"UnCheck", "UncheckedImageUrl":"ToggleButton_Unchecked.gif", "id":"ctl00_SampleContent_ToggleButtonExtender1"}, null, null, $get("ctl00_SampleContent_CheckBox1"));

});

//]]>

</script>

Notice the call to the JavaScript $create() method at the bottom of the page. When using the Microsoft Ajax Library, this call to the $create() method is necessary to create the Ajax Control Toolkit control.

This inline script looks pretty ugly to a modern JavaScript developer. Inline script! Horrible!

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&#39;t understand why you don&#39;t like ASP.NET', checkedImageAlternateText:'It&#39;s really nice to hear from you that you like ASP.NET'" />


Notice that there is no script! There is no call to the $create() method. In fact, there is no inline JavaScript at all.

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:

  1. 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.

  2. 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.

  3. Ajax Control Toolkit controls shield you from working with JavaScript

    I like writing code in JavaScript. However, not all developers like JavaScript and some developers want to completely avoid writing any JavaScript code at all. The Ajax Control Toolkit enables you to take advantage of JavaScript (and the latest features of HTML5) in your ASP.NET Web Forms websites without writing a single line of JavaScript.

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:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ToolkitScriptManager/ToolkitScriptManager.aspx

Other Fixes

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.

clip_image004

Twitter is in the process of retiring the first version of their API. You can read about their plans here:

https://dev.twitter.com/blog/planning-for-api-v1-retirement

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:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Twitter/Twitter.aspx

 

Summary

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.

Discussion

  1. khosroshid says:

    Great Job!
    Where can we find documentation about using “jQuery Extender” and its development model?
    Thanks in Advance.

  2. Esben says:

    Great job!

  3. dan says:

    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?

  4. Ashraf Sabry says:

    The instantiation using data-* attributes is a reproduction of an old feature then called “declarative syntax”
    http://weblogs.asp.net/bleroy/archive/2008/11/28/instantiating-components-on-template-markup.aspx
    http://weblogs.asp.net/bleroy/archive/2008/12/09/microsoft-ajax-client-templates-and-declarative-jquery.aspx

    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?

    • @Ashraf – Yep, I used to work with Bertrand at Microsoft and I am very familiar with the old declarative syntax. Realize that this old declarative syntax was created before data-* attributes were added into HTML5. Several JavaScript frameworks are now using the data-* attributes including Windows Store Apps and the ASP.NET MVC validation library. I’m not claiming that the Ajax Control Toolkit is doing anything innovative here — we just want to keep the Ajax Control Toolkit up to date with what other frameworks are doing.

  5. Uriah says:

    Great stuff! It’s a shame this wasn’t done long ago, but this definitely improves the viability of the ACT.

  6. Luis Harvey Triana Vega says:

    expected. naturally

  7. Gerson Florez Morales says:

    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.

  8. 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?

      • Sandy Gettings says:

        I’ve been trying to install 4.1.7.1002 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.

          • Sandy Gettings says:

            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.

          • Sandy Gettings says:

            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.

          • Sandy Gettings says:

            Still testing, but this problem looks like it’s fixed by update on 2013-Oct-06. Thanks for the quick response, Stephen!

  9. Roland says:

    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!

  1. […] Ajax Control Toolkit Now Supports jQuery, Stephen Walther […]

  2. […] Ajax Control Toolkit Now Supports jQuery – Stephen Walther announces the latest release of the Ajax Toolkit which now supports building Ajax Toolkit controls using jQuery. […]