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

Microsoft Ajax 4.0 Preview 4 now available

The Microsoft Ajax team made the fourth preview of the 4.0 version available on CodePlex. This is an important release because it enables the full client data story, complete with the ability to get changes back to the server automatically.

Here’s a quick recap of some of the available features:

  • Getting a client representation of data from an ADO.NET and REST data service.
  • Rendering data on the client using templates.
  • Declarative instantiation of client components.
  • Live bindings, enabling changes in the UI and in the data to be automatically propagated.
  • Command bubbling for codeless wiring of events in template-driven controls.
  • Data identity and association management for efficient and consistent client-server data exchanges.
  • Sending changes back to ADO.NET and REST data services.

In a nutshell, it is probably the easiest way to build a data-driven client application. Check this out:

<div id="peopleView" sys:attach="dataview" class="sys-template"
     dataview:dataprovider="{{ $create(Sys.Data.AdoNetDataContext,
                               {serviceUri: 'PeopleIKnow.svc'})}}"
     dataview:fetchoperation="PeopleIKnow"
     dataview:autofetch="true">
    <fieldset>
        <legend>
            <span>{binding FirstName}</span>
            <span>{binding LastName}</span>
        </legend>
        <img code:if="{{ Photo }}"
             sys:src="{{ 'Images/' + Photo }}"
             alt="{{ FirstName + ' ' + LastName }}" />
        <br />
        <input type="text" id="{{ $id('firstName') }}"
               class="editInPlace name"
               value="{binding FirstName}"
               sys:attach="inplace" inplace:cssclass="editing"/>
        <input type="text" id="{{ $id('lastName') }}"
               class="editInPlace name"
               value="{binding LastName}"
               sys:attach="inplace" inplace:cssclass="editing"/>
    </fieldset>
</div>
<br />
<input id="saveButton" type="button" value="Save" />

This creates a DataView that queries the PeopleIKnow.svc ADO.NET data service, and repeats the markup in the div over the data. The legend contains two spans that will respond to live changes to the data ({binding FirstName and {binding LastName}). The image will only be rendered if there is a photo to show (code:if). It builds the image path using a simple JavaScript expression: {{ ‘Images/’ + Photo }}.

The two input tags are augmented by a custom edit in place behavior (sys:attach=”inplace”) and are bound to the FirstName and LastName data columns so that any change to the value of the field will be propagated to everything that depends on the same data: the data itself of course but also the legend of the fieldset (see video below).

The save button is hooked to the following handler:

$addHandler($get("saveButton"), "click", function() {
    $find("peopleView").get_dataProvider().saveChanges();
}, true);

This handler is super-simple as it only has to call saveChanges on the data provider of the DataView. This is enough because any changes made in the input fields have been propagated to the client data model already, which tracked all changes and can build a simple JSON object to send back to the data service. Here is an example of the kind of JSON object that travels back to the server after I’ve changed Simon’s name through the UI:

{
"__metadata":{
"uri":"http://127.0.0.1:26402/Asp.Net_Ajax_Preview_4/
PeopleIKnow.svc/PeopleIKnow(1)",
"type":"PeopleIKnowModel.PeopleIKnow"
},
"ID":1,
"FirstName":"Simon",
"LastName":"Calvert",
"Photo":"simoncal.jpg" }

Here’s the application running:

<br/><a href="http://video.msn.com/video.aspx?vid=140e8d2a-8d01-49ab-b96f-77e219f93e40" target="_new" title="ASP.NET Ajax 4.0 Preview 4 ">Video: ASP.NET Ajax 4.0 Preview 4 </a>

The source code can be downloaded from here (contains code licensed under MS-PL):
http://weblogs.asp.net/blogs/bleroy/Samples/Asp.Net_Ajax_Preview_4.zip

But wait, there’s more in stock for the next preview… I’ll post more details about some of those features in the following weeks… Stay tuned…

http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24645

Comments

Bhakthan said:

I'm all for checking out preview 4!. Great work.

# March 18, 2009 6:55 AM

ETF Screener said:

I like the attribute-based declaration of javascript behaviors and bindings. The "code:if" would be very useful in templates.

One question: how well will this integrate with jQuery (or other JS libraries)? Instead of $addHandler and $get, would it be possible to use jQuery's version of getting and adding event handlers to elements?

# March 18, 2009 11:33 AM

Bertrand Le Roy said:

@ETF Screener: you can use any JavaScript you want in {{ }} expressions, as well as to create handlers and stuff. So yes, this works with jQuery and others. We are also experimenting with other ideas related to interacting with other libraries. Stay tuned for preview 5...

# March 18, 2009 1:58 PM

JKong said:

This is great. I'm excited about this!

# March 18, 2009 2:43 PM

Andy said:

Client side change tracking and batched updates with the DataProviders is amazing.

What's the status of using these Previews (I realise unsupported) scripts in Live/Production deployments?

I'd be interested if HtmlHelpers could be authored for ASP.NET MVC that either generate vanilla HTML for input controls and forms when javascript is switched off, or add the binding syntax when javascript is on. As the layout/html for a form would have to be authored twice for live/static versions.

# March 23, 2009 10:03 AM

gramic said:

I didn't get what is the role of sys-key in the declarative markup. Is it some kind of global variable or what.

# March 23, 2009 12:31 PM

Bertrand Le Roy said:

@Andy: The preview is perfectly fine to use in production (at your own risks, of course). The license can be found here: aspnet.codeplex.com/license and is the same as all other ASP.NET previews. Eventually, the final version will be available under MS-PL.

Not sure how you'd know from the server if javascript is off, except for a few known user agents such as search engines.

@gramic: sys-key is creating a local variable that is a reference to the current element or component, making it easier for an expression to refer to a component without having to generate a unique id or using $find.

# March 23, 2009 12:43 PM

Shane said:

How would you modify this to work with a non-WCF web service? I've tried to follow your example calling an asmx service and get a bad request error.

# April 21, 2009 12:38 PM

Bertrand Le Roy said:

@Shane: you'd have to implement everything that ADO.NET Data Services give you for free. It's definitely possible but it's a lot more work. It's hard to guess where a "bad request" error could come from without seeing your code...

# April 21, 2009 1:40 PM

Shane said:

I prefer less work. I changed to a WCF service and it works great. Can't wait to dig deeper into this stuff...

# April 21, 2009 6:53 PM

dwhite said:

How would you access a WCF REST service?  I was able to get to a very simple one without any params by setting httpverb to GET, but I'm stuck when adding a parameter.  I've tried various combinations without luck.

Thanks,

-Damien

# April 25, 2009 8:37 PM

dwhite said:

Please disregard my last question.  I ended up getting it to work like this:

dataview:httpverb="GET"

dataview:dataprovider="SampleService.svc"

dataview:fetchoperation="getItem/1"

I'm loving the new AJAX preview, can't wait to see what's next :)

Thanks,

-Damien

# April 25, 2009 8:46 PM

Shane said:

Hello,

I'm trying to pass the "event" keyword to a javascript function in the "onkeydown" event like this:

<input type="text" id="{{$id('ChargeCode_')}}" value="{binding ChargeCode }" onkeydown="ChargeCdKeyDown(event, this)"/>

This causes an error "event is not defined" at line 2618 of MicrosoftAjaxTemplates.debug.js. Any idea how I can get this to work?

# May 12, 2009 6:52 PM

Bertrand Le Roy said:

@Shane: mmh. Works for me. Maybe add a semicolon after the closing paren. What version of Microsoft Ajax are you using? What browser is it failing on?

# May 12, 2009 7:37 PM

Shane said:

I'm seeing the error in Firebug on Firefox 3.0.1. Just tried IE8 and it works. I'm developing this with VS 2008, .NET 3.5 SP1.

# May 13, 2009 11:10 AM