ASP.NET AJAX 4.0 Preview 5 available

Friday, September 11, 2009

ASP.Net AXAJ

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>

Fantastic news Fredrik.
I have been playing a lot with preview 4 and is seriously considering using preview 5 for an internal site in my company.
I am still new to the Microsoft Ajax API, so I hope you can help me out a bit.
I have a observable array of customers objects ({ CustomerId: 1, DisplayName: xxx ... }) and want to put that in a select element. The challenge is that I would also like to insert an empty option as the first option in the select element, without adding the empty item to the original customer array, and still have the DataView auto update when a new customer is added to the array (e.g. I can not just make a copy of my customers array and add the empty item to the copy).

Egil Hansen - Friday, September 11, 2009 1:05:00 PM

Fantastic news Fredrik.

I have been playing a lot with preview 4 and is seriously considering using preview 5 for an internal site in my company.

I am still new to the Microsoft Ajax API, so I hope you can help me out a bit.

I have a observable array of customers objects ({ CustomerId: 1, DisplayName: xxx ... }) and want to put that in a select element. The challenge is that I would also like to insert an empty option as the first option in the select element, without adding the empty item to the original customer array, and still have the DataView auto update when a new customer is added to the array (e.g. I can not just make a copy of my customers array and add the empty item to the copy).

(my post did not show, so trying again)

egilofborg - Friday, September 11, 2009 1:06:56 PM

Here is what you can do:
   <select sys:attach="dataview"               class="sys-template"               dataview:data="{{ customers }}">
              <option sys:if="$index==0" sys:value="" selected="selected">Select and Item<//option>
           <option sys:value="{{ID}}">{{ Name }}<//option>
   </select>
Use the sys:if and check if $index==0.
Then when you add a new item to the array you simple write:
function AddCustomer(){    Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" });}

Fredrik N - Friday, September 11, 2009 2:15:43 PM

Neat, thanks.

One thing that is bugging me, the following works in Firefox, but not in IE or Chrome:

{{ DisplayName }}

Client:

{{ DisplayName }}

What it is suppose to do, is to show the selected Customers associated Clients in the second select element, when the customer is selected in the first select element.

Is it a known bug in or?

egilofborg - Friday, September 11, 2009 2:37:15 PM

Thanks for the explanations. Is there documentation for the xmlns declarations?

Mike - Monday, September 14, 2009 6:43:39 PM

code:before -> sys:codebefore
code:after -> sys:codeafter
class:foo -> sys:class-foo
style:font-size=”8” -> sys:style-font-size=”8”
I think the team needs to think about this some more. Moving all to sys doesn't make it any prettier or more intuitive...

Mike - Monday, September 14, 2009 6:53:03 PM

we meet a bug under IE, if we use the sys:innerhtml="{binding Description,convert=convertDescription}", It will meet an unknow exception under IE,
while you render the data view at the second time.

Ricky - Tuesday, September 15, 2009 3:36:24 AM

7 Comments