Tales from the Evil Empire

Bertrand Le Roy's blog

News


Bertrand Le Roy

BoudinFatal's Gamercard

Tales from the Evil Empire - Blogged

Blogs I read

My other stuff

Archives

September 2008 - Posts

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);
    });
};
And here’s how you can use it to create instances of a (pretty lame) sample behavior to limits the number of characters in all text inputs with a specific class on them:
$("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" sys:value="{binding FirstName}" /></td>
      <td><input type="text" sys: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:

ClientTemplateInput

will get reflected here:

TemplatePhotoLegendChanged

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 the Microsoft Ajax Library Preview 6, which you can download here:
http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766
http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488

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

UPDATE: fixed the code to use Preview 6 instead of preview 2.

More Posts