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:
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