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.
<bodyxmlns:sys="javascript:Sys"xmlns:dataview="javascript:Sys.UI.DataView"sys:activate="*">
When binding to attributes before we could write something like this:
<ulsys:attach="dataview"class="sys-template"dataview:data="{{ imagesArray }}"><li><h3>{{ Name }}</h3><div>{{ Description }}</div><inputtype="text"value="{{Name}}"/></li></ul>
Now all attributes that contain the {{..}} or {binding ..} must now use the “sys” prefix:
<inputtype="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
<theadcode: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:
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scripttype="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><bodyxmlns:sys="javascript:Sys"><formid="form1"runat="server"><div><inputtype="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
<inputid="text"type="text"sys:value="{binding Name, source={{customer}}}"/><inputid="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:
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scripttype="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><bodyxmlns:sys="javascript:Sys"><formid="form1"runat="server"><div><inputid="myTemplate"type="text"sys:value="{binding Name, source={{customer}}}"/><inputid="Text1"type="text"sys:value="{binding Name, source={{customer}}}"/><inputtype="button"onclick="clickMe()"value="Click Me"/><divid="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:
<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scripttype="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";elsereturn""; }</script><styletype="text/css"> .sys-template { display:none; }</style></head><bodyxmlns:sys="javascript:Sys"xmlns:dataview="javascript:Sys.UI.DataView"><formid="form1"runat="server"><div><inputid="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:
<divsys:innertext=”{{ foo }}”></div>
If we want it to result as a normal HTML we can instead use the innerhtml:
<divsys: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:ScriptManagerrunat=”server”><Scripts><asp:ScriptReferenceName=”MicrosoftAjax.js” Path=”~/scripts/MicrosoftAjax.js” /><asp:ScriptReferenceName=”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:ScriptManagerID="sm"runat="server"><Scripts><asp:ScriptReferenceName="MicrosoftAjax.js"Path="~/scripts/MicrosoftAjax.js"/><asp:ScriptReferenceScriptMode="Inherit"Path="~/scripts/MicrosoftAjaxTemplates.js"/><asp:ScriptReferenceScriptMode="Inherit"Path="~/scripts/MicrosoftAjaxAdoNet.js"/><asp:ScriptReferenceScriptMode="Inherit"Path="~/scripts/MicrosoftAjaxDataContext.js"/></Scripts></asp:ScriptManager>
Example using <script> tags:
<scripttype="text/javascript"src="../scripts/MicrosoftAjax.debug.js"></script><scripttype="text/javascript"src="../scripts/MicrosoftAjaxTemplates.debug.js"></script><scripttype="text/javascript"src="../scripts/MicrosoftAjaxAdoNet.debug.js"></script>
<scripttype="text/javascript"src="../scripts/MicrosoftAjaxDataContext.debug.js"></script>