Tales from the Evil Empire : Ajax Control Toolkit

Ajax Control Toolkit: new controls, bug fixes

Bertrand Le Roy — Thu, 01 Oct 2009 00:28:00 GMT

And we have a new release of Ajax Control Toolkit. I didn’t work on this one but there are some nice things in there nonetheless :)

First, new controls!

SeaDragon: I’ve blogged before about Seadragon, the JavaScript-only way to do Deep Zoom. It became a lot easier to use a few month ago when the need for tools disappeared and you can just point to any image on the web and immediately get the URL and script tag to put on your page:

Now with this release of Ajax Control Toolkit, including and controlling Deep Zoom from an ASP.NET page is also very easy:

<ajaxToolkit:Seadragon ID="Seadragon"
    CssClass="seadragon" runat="server"
    SourceUrl="sample.xml"/>

James Senior just released a screencast on how to create Deep Zoom contents for the new Seadragon control:
http://channel9.msdn.com/posts/jsenior/Seadragon-Ajax-Control-Quick-Start-Guide/

AsyncFileUpload: This is by far one of the most requested controls for ACT. File upload fields, while a part of HTML, do not work with Ajax/XHR requests (for security reasons, JavaScript can’t access the contents of the field). The only way to use them is to get the browser to do a real form post.

This new control makes it a lot easier to handle file uploads from your Ajax applications by providing an abstraction on top of the form posting:

<ajaxToolkit:AsyncFileUpload
    OnClientUploadError="uploadError"
    OnClientUploadComplete="uploadComplete" 
    runat="server" ID="AsyncFileUpload1"
    Width="400px" UploaderStyle="Modern" 
    UploadingBackColor="#CCFFFF"
    ThrobberID="myThrobber"/>

It works pretty much as advertised: just drop the control on the page, and you can upload files without a full postback. It looks just like Ajax and requires no plug-in of any kind.

The control has client and server-side events that get triggered when the file has been uploaded. On the server-side, you have access to the uploaded file’s byte stream, which you can save to disk (or database, or whatever).

Bug fixes: This release also has some new bug fixes (courtesy of Obout) for some of the top-voted issues.

Download the new release here:
http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Try the live demos here:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

Stephen's in-depth post about this release:
http://stephenwalther.com/blog/archive/2009/10/01/new-ajax-control-toolkit-release.aspx

Why is ASP.NET encoding &’s in script URLs? A tale of looking at entirely the wrong place for a cause to a non-existing bug.

Bertrand Le Roy — Sat, 06 Jun 2009 00:27:15 GMT

Several people have reported seeing errors in their logs that seem to be due to requests such as this:

/ScriptResource.axd?d=
[lots of junk]&
t=ffffffffee24147c

The important part here is the HTML-encoded “&” sequence, which stands for “&” of course. If this exact URL is sent to the server, the server won’t know what to do with the escape sequence (URLs are not supposed to be HTML-encoded on the wire) so the parameters won’t get separated as expected, potentially resulting in a server error. This bug in the toolkit is an example of that: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=13134

Of course, when people see 500 errors popping up in their server logs, they immediately assume the application is failing for some users. Or that some idiot at Microsoft did something incredibly stupid (that’s what we idiots at Microsoft do after all).

Case in point, a quick peek into the source code of the application’s pages immediately reveals that the script tags generated by ScriptManager do indeed generate these URLs:

So that’s where it came from! See? When I copy this URL into the browser’s URL bar, I do get the same error!

Then ensue various more or less rational reactions such as:

Correlate the user agent to the faulty requests (which correlates more or less with normal browser usage, i.e. lots of IE and then lots of Firefox, when there is a large enough sample).
Blame IE6 (lots of these requests come from IE6, hence it must be responsible: IE6 sucks).
“Fix” ScriptManager and remove the HTML encoding.

Well, by copying the URL from the source view into the URL bar, you did indeed reproduce the problem. A little too well. Better than you realize.

This is why. All of the errors in your server logs come from people doing precisely what you just did: copy the URL from the source view into the browser’s URL bar. They do it for various reasons: look at the source code for the scripts, understand what these weird URLs are, who knows?

But the point is, you will never be able to reproduce these errors during normal use of the application. There is nothing to fix here. The value that gets sent to the server never has the “&” sequence. You can verify it in IE6, you can verify it in any browser on any OS, it will just work.

When putting a URL in an HTML attribute, you should *always* HTML-encode it. It’s the standard, and for good reason (it enables the browser to tell between “&”, “&” and “&amp;”, it enables quotes to be embedded into attributes, etc.).

A consequence of that is that if you’re going to copy the value of one of these attributes from the source view, you should do what the browser does when parsing the HTML: decode the value first (in other words, replace “&” with “&”).

So yes, people do fail to do that and copy the URL without decoding. Well, they are not supposed to do that, nor do they need to do it. The error is normal, it results from a bad URL having been entered manually. Nobody would be surprised to get an error when querying foo.aspx?somenumber=thisisnotanumber for example. Same thing here. Pretty much.

Of course, this is not entirely trivial to figure out and I did pull my remaining hair a bit trying to understand what was going on, and you tend to trust people when they tell you there is a problem, especially when the description seems to make sense. There is some sort of confirmation bias going on there. But the more I looked at the different pieces of evidence, the more this explanation looked like the most likely, by far.

But of course, I may be missing something…

Survey: Ajax usage among .NET developers

Bertrand Le Roy — Fri, 22 May 2009 19:13:20 GMT

If you haven’t already and you are a .NET developer, please take a couple minutes and answer this survey, whether you use Ajax or not. There are a number of Ajax surveys around, but Simone’s is the only one that focuses on .NET developers.

The survey:
http://www.zoomerang.com/Survey/?p=WEB22973CYKW2H

Simone’s post:
http://codeclimber.net.nz/archive/2009/05/21/ajax-usage-among-.net-developers-in-2009.aspx

New release of the Ajax Control Toolkit

Bertrand Le Roy — Thu, 14 May 2009 05:19:00 GMT

A new version of the AJAX Control Toolkit is now available for download from the CodePlex website. It contains three new controls:

HTMLEditor - allows you to easily create and edit HTML content. You can edit in WYSIWYG mode or in HTML source mode. The control exists as a server-side extender but can also be instantiated purely on the client-side with a single line of code. Many thanks to Obout for building this.

ComboBox - provides a DropDownList of items, combined with TextBox. Different modes determine the interplay between the text entry and the list of items. this control behaves very much like a Windows combo. Many thanks to Dan Ludwig for building this.

ColorPicker - can be attached to any ASP.NET TextBox control to provide client-side color-picking functionality from a popup. Many thanks to Alexander Turlov for building this.

The ASP.NET website has been updated with new videos and tutorials for these controls.

This new release also includes fixes for over 20 of the most voted bugs in existing AJAX Control Toolkit controls and now features minimized release versions of the script files.

The release can be downloaded as a server dll or as a set of files for use with pure client-side applications.

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326

Putting more than one behavior on one element

Bertrand Le Roy — Sat, 22 Nov 2008 07:15:31 GMT

Microsoft Ajax has the interesting ability to combine more than one component onto a single element. In the previous talk, I alluded to this possibility and one of the commenters (Tiamat) asked me to show how this is done.

Here is an example that combines the new EditInPlace behavior I showed yesterday with an AutoComplete and a Watermark from the Ajax Control Toolkit:

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit" TagPrefix="act" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Many behaviors on a textbox</title>
    <link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <act:ToolkitScriptManager runat="server" ID="sm1"
                              EnablePartialRendering="false">
        <Scripts>
            <asp:ScriptReference Path="~/Script/EditInPlace.js" />
        </Scripts>
    </act:ToolkitScriptManager>
    <script type="text/javascript">
        Sys.Application.add_init(function() {
            $create(Bleroy.Sample.EditInPlace,
                { cssClass: "editInPlace" },
                {}, {}, $get('<%= tb1.ClientID %>'));
        });
    </script>
    <div>
        <h1>Many behaviors on a textbox</h1>
        <asp:TextBox runat="server" ID="tb1" />
        <act:TextBoxWatermarkExtender runat="server"
            TargetControlID="tb1" WatermarkText="Click me..."/>
        <act:AutoCompleteExtender runat="server"
            TargetControlID="tb1"
            ServicePath="Words.asmx" ServiceMethod="GetWords"
            BehaviorID="AutoCompleteEx"
            ID="autoComplete1" 
            MinimumPrefixLength="3" 
            CompletionInterval="500"
            EnableCaching="true"
            CompletionSetCount="20"
            CompletionListCssClass=
                                "autocomplete_completionListElement" 
            CompletionListItemCssClass="autocomplete_listItem" 
            CompletionListHighlightedItemCssClass=
                                "autocomplete_highlightedListItem"
            DelimiterCharacters=";, :"
            ShowOnlyCurrentWordInCompletionListItem="true" >
            <Animations>
                <OnShow>
                    <Sequence>
                        <OpacityAction Opacity="0" />
                        <HideAction Visible="true" />
                        <FadeIn />
                    </Sequence>
                </OnShow>
                <OnHide>
                    <FadeOut />
                </OnHide>
            </Animations>
        </act:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>

The sample page here is using the extenders that the toolkit provides to instantiate the AutoComplete and Watermark behaviors but you really could include the script references and $create yourself. The edit in place behavior doesn’t have an associated server-side extender (but it would be quite easy to build one) so I’m just including the script and calling $create from client script. If you run this sample, you’ll see something like this:

If you view source in the browser, you’ll see that the code that the extender generates for the browser to run isn’t magical in any way, it’s just script tags and $create like we’d do manually.

One thing to note is that I hit a bug in the Toolkit while building that sample: AutoComplete assumes the element it attaches to is visible when it calls focus on it, which is usually OK but fails here when used with the edit in place behavior. I fixed this bug by surrounding the focus call with a try/catch block. A build of the toolkit with this fix is included in the zip file for this sample.

Bottom line is that more than one behavior on a single tag works great and makes for a formidable composition model.

Download the code for this sample:
http://weblogs.asp.net/blogs/bleroy/Samples/ManyBehaviors.zip

PDC 2008 ASP.NET AJAX Futures talk available online

Bertrand Le Roy — Mon, 03 Nov 2008 18:10:00 GMT

The full 83 minutes of my PDC talk are available on the Channel 9 web site. You can watch the session online (using Silverlight) or download the video in a number of formats. Slides and source code for the demo are also available.

Watch online:
http://channel9.msdn.com/pdc2008/PC32/

Download MP4 / iPod, Zune, WMV or WMV-HQ.

Slides:
http://mschnlnine.vo.llnwd.net/d1/pdc08/PPTX/PC32.pptx

Demo code (contains MIT and MS-PL licensed JavaScript files):
http://mschnlnine.vo.llnwd.net/d1/pdc08/ZIP/PC32.ZIP

Another talk you may be interested in is Stephen Walther's. Stephen did an amazing job explaining how jQuery and ASP.NET Ajax work and fit together. The talk is very accessible even if you have no prior knowledge of jQuery: http://channel9.msdn.com/pdc2008/PC31/.

Using the Ajax Control Toolkit in ASP.NET MVC

Bertrand Le Roy — Mon, 25 Aug 2008 19:20:00 GMT

Stephen Walther has a pretty cool post on using the new file-only version of the Ajax Control Toolkit from an MVC application:

http://stephenwalther.com/blog/archive/2008/08/23/asp-net-mvc-tip-36-create-a-popup-calendar-helper.aspx

UPDATE: the problem with Stephen is that he writes quite fast. So pretty much in the time it took me to link to his first post, he wrote a second one, this time on using the AutoComplete behavior:

http://stephenwalther.com/blog/archive/2008/08/24/asp-net-mvc-tip-37-create-an-auto-complete-text-field.aspx

Ajax Control Toolkit released for .NET 3.5 SP1

Bertrand Le Roy — Thu, 21 Aug 2008 18:05:00 GMT

I just released the latest version of the Ajax Control Toolkit for .NET 3.5 SP1.

This is an intermediary release that provides a version of the Toolkit that is built against the .NET Framework 3.5 SP1. It contains a new control, MultiHandleSlider, built by Daniel Crenna (thanks, Daniel, you're the hero of this release) and integrates patches contributed by the community. A big thank you to all who contributed (see their names in the hall of fame).
The sample web site is not yet updated to this new release, this will be done in a couple of days. I will update this post once this is done.

~~In the very short term, we will provide~~ We are also providing a client-side only version of the toolkit, similar to the Microsoft Ajax Library, that enables the development of Toolkit-based applications that do not rely on server-side ASP.NET. This version can also be used in performance-intensive scenarios where resource-based scripts and resources are not desirable, or if you simply prefer to work with files.

What's next?

Our top priority following this release is bug fixing in order to get back to a stable and low number of bugs. We also have a number of contributors working on new controls, following the priorities the community communicated us.
As usual, all feedback is very welcome.

http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=16488

UPDATE: the file-only version of the toolkit is now available from the release page. I also added a dll-only download for people who just want the executable and no source or sample code.