As we know, ASP.NET AJAX 4.0 Preview 4 had earlier included outstanding client-centric development features like client-side data binding & client side templates ala XAML for WPF, implementation of observer pattern from scratch in JavaScript, data view controls, support for data sources like ADO.NET Entity Framework, LINQ to SQL etc..

In Preview 5 of ASP.NET AJAX 4.0 there has been improvement on the client-side data story (data binding et al.) introduced in previous previews of ASP.NET AJAX. In this release, there has been bug fixes and feature enhancements for the following:

ObservableData with JavaScript which has been implemented from scratch using the classic observer design pattern.

JSONP Usage.

Recursive Template Usage.

Two new script files have been included with the download for UpdatePanel compatibility issues basically:

MicrosoftAjaxWebForms.js
MicrosoftAjaxWebForms.debug.js

Changes

Here I am describing few of the major changes in this release as were outlined in the release notes:

Declarative Attribute Changes

It is no longer necessary to include a sys:activate attribute on the body of a page containing declarative markup.

Top Level Bindings

Support for “top level” expressions and bindings. Previously these were only supported within the context of a template marked with sys-template. For example, to bind the value of an input to a javascript object, you might do this:

<input sys:value="{binding bar,source={{foo}} }" />

This binds the value to the ‘bar’ field of a global ‘foo’ object. You can use other bindings to update the value, or directly with Sys.Observer:

Sys.Observer.setValue(foo, “bar”, “newValue”);

Binding the content of an element as text or HTML

You may bind to the content of a node using the new sys:innertext and sys:innerhtml attributes. Choose the appropriate attribute depending on whether or not you want to allow HTML in the value to be interpreted as HTML. For example, if you have a variable named ‘foo’ set to the value “<p>hello</p>”:

<div sys:innertext=”{{ foo }}”></div>

Will result in seeing <p>hello</p> in the browser.

<div sys:innerhtml=”{{ foo }}”></div>

Will result in the <p> tag being interpret as a paragraph tag.

The difference is in how the value is inserted. “sys:innertext” injects a text node with the given value. “sys:innerhtml” sets the innerHTML of the target element. Note that while “innerText” is an Internet Explorer only concept, “sys:innertext” is not an Internet Explorer only attribute. The name is semantically correct, despite it being implemented differently than IE’s native innerText field.

DataView Improvements

DataView now has the following events:rendering
itemRendering
itemRendered
rendered

Binding Converters and Expandos

Bindings now support the concept of named converters that are set onto the Sys.Binding.converters field. There are none out of the box, but you may now define your own and refer to them by name. For example:

// convert
}
In addition, you may now set expandos onto the binding object and refer to them from your converter. This allows you to semantically describe what you want in a binding in any custom way you require for any specific binding. It allows you to parameterize a converter function. For example, this example sets a ‘format’ expando on the binding object despite that not being a field or property the binding natively has:

Preview 4 was not compatible with UpdatePanel in ASP.NET 3.5 due to changes to the data format UpdatePanel renders, and the inline script it renders in ASP.NET 4.0. The 4.0 scripts are now designed to work with either 3.5 or 4.0 on the server. To support UpdatePanel with these scripts, you must replace the partial rendering script (MicrosoftAjaxWebForms.js) with the 4.0 version. If you do not use an update panel, you must disable partial rendering.