Microsoft have recently released the Preview 5 of ASP.NET AJAX 4.0 on CodePlex.
In Preview 5 of ASP.NET AJAX 4.0 you can see some improvements to the lient-side data story introduced in previous previews of ASP.NET AJAX. In this release, Microsoft have add support for the following features:
Dynamic and recursive templates
Binding Converters
UpdatePanel support
Here are some changes made from Preview 4 to 5
Declarative Attribute Changes
There is no need to include the sys:active attribute on the <body> element of a page containing declarative markup.
<body
xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
When binding to attributes before we could write something like this:
<ul sys:attach="dataview"
class="sys-template"
dataview:data="{{ imagesArray }}">
<li>
<h3>{{ Name }}</h3>
<div>{{ Description }}</div>
<input type="text" value="{{Name}}" />
</li>
</ul>
Now all attributes that contain the {{..}} or {binding ..} must now use the “sys” prefix:
<input type="text" sys:value="{{Name}}" />
Some changes has also been made to the “code” and “class” attributes, they are moved to into “Sys”
code:if -> sys:if
<thead code:if="$index==0" sys:if="$index==0">
<tr>
<th>Image</th>
<th>Description</th>
</tr>
</thead>
code:before -> sys:codebefore
code:after -> sys:codeafter
The ‘class’ attributes have been moved into ‘sys’.
class:foo -> sys:class-foo
The ‘style’ attributes have been moved into ‘sys’.
style:font-size=”8” -> sys:style-font-size=”8”
Top Level Binding
In the previous version of ASP.NET AJAX 4.0, we could only use binding by using a template marked with sys-template, we can now instead use the sys:value=”{binding field, source={{source}}}” attribute, for example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript">
var customer = { Name : "John Doe" };
</script>
</head>
<body xmlns:sys="javascript:Sys">
<form id="form1" runat="server">
<div>
<input type="text" sys:value="{binding Name,source={{customer}} }" />
</div>
</form>
</body>
</html>
If we have two input field which is bound to the same source, for example
<input id="text" type="text" sys:value="{binding Name, source={{customer}}}"/>
<input id="Text1" type="text" sys:value="{binding Name, source={{customer}}}"/>
and we change the value of field “Text1”, the value of “text” will be automatically changed.
We can also use the Sys.Observer to update the binding value:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript">
var customer = { Name: "John Doe" };
function clickMe()
{
//Will not update the fields
customer.Name = "Hej";
//Will update the fields
Sys.Observer.setValue(customer, "Name", "Jane Doe");
}
</script>
</head>
<body xmlns:sys="javascript:Sys">
<form id="form1" runat="server">
<div>
<input id="myTemplate" type="text" sys:value="{binding Name, source={{customer}}}"/>
<input id="Text1" type="text" sys:value="{binding Name, source={{customer}}}"/>
<input type="button" onclick="clickMe()" value="Click Me" />
<div id="form" />
</div>
</form>
</body>
</html>
Binding Converters and Expandos
Bindings now support converters by using the Sys.Binding.converters field.
{ binding foo,convert=myconverter }
Note: There are no Converters out of the box
Here is an example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="Scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript">
var customer = { Name: "John Doe", Age : 31 };
Sys.Binding.converters.myconverter = function(valueToConvert, binding) {
if (valueToConvert >= 18)
return "checked";
else
return "";
}
</script>
<style type="text/css">
.sys-template { display:none; }
</style>
</head>
<body
xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView">
<form id="form1" runat="server">
<div>
<input id="isAdult" type="checkbox" sys:checked="{binding Age, source={{customer}}, convert=myconverter}" />
</div>
</form>
</body>
</html>
We can also set expandos, for example:
{binding foo,convert=format,format=MM/dd}
Sys.Binding.converters.format = function(value, binding) {
// binding.format === MM/dd
}
Binding Updates
We can now use the sys:innettext and sys:innerhtml to make sure it will show us the HTML code in the browser or as pure HTML. For example if we have a variable “foo” and withthe value “<p>Silverligth Rocks!</p>”, we maybe want it to be displayed as normal text in the browser, if that is the case we can use sys:innettext:
<div sys:innertext=”{{ foo }}”></div>
If we want it to result as a normal HTML we can instead use the innerhtml:
<div sys:innerhtml=”{{ foo }}”></div>
Compatibility with the ASP.NET UpdatePanel
Preview 4 of the ASP.NET AJAX 4.0 didn’t support UpdatePanel in ASP.NET 3.5. But in the preview 5 will now work with either 3.5 or 4.0 on the server. To make sure the Preview 5 should work with an UpdatePanel, you need to replace the partial rendering script MicrosoftAjaxWebForms.js wtih the 4.0 version.
<asp:ScriptManager runat=”server”>
<Scripts>
<asp:ScriptReference Name=”MicrosoftAjax.js” Path=”~/scripts/MicrosoftAjax.js” />
<asp:ScriptReference Name=”MicrosoftAjaxWebForms.js” Path=”~/scripts/MicrosoftAjaxWebForms.js” />
</Scripts>
</asp:ScriptManager>
Supported Browsers
The ASP.NET AJAX 4.0 Preview 5 is tested on the following browsers (I know a lot of people are asking this kind of questions ;))
Microsoft Internet Explorer 6
Microsoft Internet Explorer 7
Microsoft Internet Explorer 8 RC1
Mozilla Firefox 3 and 3.5
Apple Safari 4
Opera 10
Chrome 2
How to use the ASP.NET AJAX 4.0 Preview 5 in your applications
If we want to use the ASP.NET AJAX 4.0 Preview 5, we need to reference to the new script files, we can do this by using the <script> tag or adding ScriptReferernces to the ScriptManager control:
<asp:ScriptManager ID="sm" runat="server">
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js" Path="~/scripts/MicrosoftAjax.js" />
<asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxTemplates.js" />
<asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxAdoNet.js" />
<asp:ScriptReference ScriptMode="Inherit" Path="~/scripts/MicrosoftAjaxDataContext.js" />
</Scripts>
</asp:ScriptManager>
Example using <script> tags:
<script type="text/javascript" src="../scripts/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxTemplates.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxAdoNet.debug.js"></script>
<script type="text/javascript" src="../scripts/MicrosoftAjaxDataContext.debug.js"></script>