Tales from the Evil Empire

Alt.NET podcast on jQuery

We had an interesting conversation with the good people from the Alt.NET podcast on jQuery and what it means for .NET developers. Check it out:

http://altnetpodcast.com/episodes/11-jquery-in-asp.net

A possible cause of “‘Sys’ is undefined” explained

Clay Compton explains on the ASP.NET QA blog how bad web.config overrides can lead to the Microsoft Ajax Library not loading and the “‘Sys’ is undefined” error being thrown when the page loads. It’s a great read and hopefully will unblock some of you.

http://weblogs.asp.net/asptest/archive/2008/10/06/asp-net-ajax-and-http-handlers-a-cautionary-tale.aspx

Client templates in MSDN Magazine

My first full-length article in MSDN Magazine is out with the October issue and it’s about Microsoft AJAX client templates. Check it out…

http://msdn.microsoft.com/en-us/magazine/cc972638.aspx

jQuery now officially part of the .NET developer’s toolbox

You may have read that from John Resig or Scott Guthrie. I’m very excited to announce that Microsoft has decided to ship, adopt and support using jQuery on top of ASP.NET. This may come as a surprise to some of you but I hope you’ll agree with me that it makes total sense. jQuery is a fantastic JavaScript library that focuses on DOM querying and manipulation, whereas the Microsoft Ajax Library focuses on building reusable components and interacting with ASP.NET web services.

A lot has been written already on this new partnership so I’ll just go ahead and show some code that hopefully will show how great jQuery and ASP.NET AJAX work together.

As my first piece of code using both frameworks, I’ve built a very simple plug-in for jQuery that instantiates a specific control on all elements in a jQuery result set. Here’s the full code for the plug-in:

jQuery.fn.create = function(type, properties, events) {
    return this.each(function() {
        Sys.Component.create(type, properties, events, {}, this);
    });
};

$("input[type=text].nomorethantwenty")
    .create(Bleroy.Sample.CharCount, { maxLength: 20 });

This is the kind of super-simple code that we hope will make your life easier as an ASP.NET developer.

More of that stuff later…

I’m super-excited about this. How about you?

The sample code for this post:
http://weblogs.asp.net/blogs/bleroy/Samples/jQueryMicrosoftAjax.zip

The original announcement by John Resig:
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/
and Scott Guthrie:
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

Q/A about the partnership:
http://cooney.typepad.com/lauren_cooneys_blog/2008/09/jquery-and-microsoft-the-qa.html

And here’s some cool code from Scott Hanselman:
http://www.hanselman.com/blog/jQueryToShipWithASPNETMVCAndVisualStudio.aspx

And this older post where I show how to use the ScriptManager with jQuery (and without Microsoft Ajax):
Using ScriptManager with other frameworks

JavaScript and client templates on Hanselminutes

I'm sharing a spot with Scott Cate (of CloudDB fame, and by the way CloudDB is a fantastic product built entirely using ASP.NET AJAX) this week on Hanselminutes.

I had lots of fun discussing with Scott (Hanselman) on various topics ranging from JavaScript to the Microsoft Ajax Library and our new client template feature.

Check it out! The first to spot the mistake I'm making during the show (assuming I made only one) gets a free book and DVD on Real World Ajax.

http://www.hanselman.com/blog/HanselminutesPodcasts128And129AjaxWithScottCateAndJavaScriptWithBertrandLeRoy.aspx

"Reality has a well-known liberal bias"

I've been thinking about this famous Stephen Colbert quote quite often lately. Having been raised in a country where there are no political ads on TV, I find it quite shocking to see how candidates here in the U.S. sling mud at each other through disgusting little ads that insult the viewer's intelligence with really outrageous claims.

In this depressing climate, it's really refreshing to see sites like FactCheck.org do the necessary work that every self-respecting journalist should be doing. Thank FSM for this, the Daily Show and Stephen Colbert...

http://www.factcheck.org/

Using client templates, part 2: Live Bindings

In part 1, we saw how to use DataView to render JavaScript data using a simple template. In this post, we'll see how rich bindings unlock richer scenarios where user changes automatically propagate back to the data and to all UI that is bound to it.

In part 1, we used the simplest type of binding, one-way, one-time bindings. These bindings are created using the {{ expression }} syntax, which is both simple and rich in that it enables arbitrary JavaScript expressions. This is made possible by the fact that templates are compiled by the Ajax framework into a JavaScript function and these bindings get embedded right into that generated function. Because of that, the binding gets evaluated only once, when the template is instantiated.

For more complex scenarios where you need changes to the data to be automatically reflected by the UI or where you need bidirectional bindings, we are also supporting WPF's binding syntax. Let's use that syntax to modify the way the template in part 1 displays a person's name:

<legend>
  <span>{binding FirstName }</span>
  <span>{binding LastName }</span>
</legend>

In order to be able to make changes to the data, I'll add a second DataView to the page, this one with input fields for the first and last names of each person in the data set:

<table>
  <thead><tr><td>First name</td><td>Last name</td></tr></thead>
  <tbody id="peopleTable" class="sys-template">
    <tr>
      <td><input type="text" value="{binding FirstName}" /></td>
      <td><input type="text" value="{binding LastName}" /></td>
    </tr>
  </tbody>
</table>

And now, without having written a single line of JavaScript code other than the DataView controls instantiation and data property setting, our boring read-only template became read-write. Any time the data in one of the input boxes changes, the binding will pick up the change and propagate it to the data. Our first template, because it was bound to the same data, will also get the changes automatically so that any change here:

will get reflected here:

as soon as you focus out of the input field. One thing to notice is that even though you can explicitly set the binding direction on a binding, the framework does the right thing here by default by making bindings on input fields bidirectional and bindings on text node values unidirectional.

Oh, one last thing: just for fun, I took the screen shots in Google Chrome, where the new template stuff already works great.

The code in this post uses ASP.NET Ajax Codeplex Preview 2, which you can download here:
http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766

The sample code for this post can be downloaded from here:
http://weblogs.asp.net/blogs/bleroy/Samples/TemplateLiveBindings.zip

IE8: now with search that doesn't suck

I installed IE8 Beta 2 and tried CTRL+F this morning and here's what I got:

Finally.

Quite a lot of nice things in this beta actually...

Using the Ajax Control Toolkit in ASP.NET MVC

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

http://weblogs.asp.net/stephenwalther/archive/2008/08/22/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://weblogs.asp.net/stephenwalther/archive/2008/08/23/asp-net-mvc-tip-37-create-an-auto-complete-text-field.aspx

Ajax Control Toolkit released for .NET 3.5 SP1

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.