Fredrik Normén : AXAJ

ASP.NET AJAX 4.0 Preview 5 – Working with Converters and the new CDN

Fredrik N — Wed, 16 Sep 2009 21:01:00 GMT

In this blog post I’m going to show you how you can use the new Converter feature during data binding, to make this post more special I have used the new Microsoft AJAX CDN (Content Delivery Network), so I don’t need to have the AJAX 4.0 script on my server. The example code I use in this post, will use the ASP.NET AJAX DataView and also Microsoft ADO.NET Data Services to retrieve data from the server. My fantasy isn’t so special good, but I decided to make a little “rental” application, where I will use ASP.NET AJAX to simply show a list of cars and the current rental status. The status of a rental car will be sent to the client as a string and can be of the following values, Approved, Not Approved and Pending. The little app I’m building for this post, will show the rental status as different colors for the user.

Green color will show that the rental of the car is approved, red will indicate not approved and yellow will indicate a pending status. My little database have one simple table, called Rental (lack of fantasy), with three columns, ID, Description and Status. I have used Entity Framework together with ADO.Net Data Source to get the data from the database. Here is the ADO.NET Data Service, I have added a Rental operation to only enable access to the operation to get Rental entities.

public class RentalWebDataService : DataService<RentalModel.RentalEntities>
{
    public static void InitializeService(IDataServiceConfiguration config)
    {
        config.SetEntitySetAccessRule("Rental", EntitySetRights.AllRead);
        config.SetServiceOperationAccessRule("Rental", ServiceOperationRights.AllRead);
    }

    [WebGet]
    public IQueryable<RentalModel.Rental> Rental()
    {
        return this.CurrentDataSource.Rental;
    }
}

To use ASP.NET AJAX 4.0 Preview 5, I have not used my local scripts, instead use the new Microsoft AJAX CDN. The Microsoft CDN service provides caching support for AJAX libraries (including jQuery and ASP.NET AJAX) and are composed of “edge cache” servers, they are strategically placed around the world to make sure your application will use the nearest server to get the ASP.NET AJAX scripts, isn’t that cool?! The service is free and both for commercial and non-commercial purpose. To get a JavaScript from the Microsoft CDN, you can simply use the <script> tag to include the script from ”http://ajax.microsoft.com/ajax”. Microsoft CND will use sub folders to versioning the different kind of scripts. The ASP.NET AJAX 4.0 Preview 5.0 script can be found under the /0909/ folder (the name of the folder represents the year and month when the ASP.NET AJAX was released). You can find the JavaScript and URLs here: http://www.asp.net/ajax/cdn/

Note: ScriptManger can automatically request JavaScript files form the Microsoft CDN if the EnableCdn property of the ScriptManager is set to true.

I have used the following code to include the ASP.NET AJAX 4.0 Preview 5.0 script in my demo, to make sure I can use Templates, and ADO.NET DataServices:

<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>

To use the ADO.NET Data Service (RentalWebDataSerivce) on the client-side, the ASP.NET AJAX $create shortcut can be used to create a ADO.Net DataContext object, the DataContex is the proxy class to access the ADO.Net Data Service:

var RentalService = {};

RentalService.dataContext = $create(Sys.Data.AdoNetDataContext,
                                         {
                                             serviceUri: "RentalWebDataService.svc",
                                             mergeOption: Sys.Data.MergeOption.appendOnly
                                         });

The following is the template I have used to list the cars:

 <table sys:attach="dataview"
        class="sys-template"
        dataview:dataprovider="{{ RentalService.dataContext }}"
        dataview:fetchoperation="Rental"
        dataview:autofetch="true">

        <tr sys:if="$index==0">
            <td>Booking No</td>
            <td>Description</td>
        </tr>
        
         <tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">
             <td>{{ ID }}</td>
             <td>{{ Description }}</td>
         </tr>
</table>

Yes, I know, I use a table instead of a DIV, shame on me..

To create a template the class=”sys-template” must be applied to the root element of the template, the sys:attached=”dataview” will indicate that I will use the ASP.NET AJAX 4.0 DataView features together with the template. To make sure the DataView will get its data from the RentalWebDataService, the dataview:dataprovider attribute is used and its value is set to the RentalService.dataContext object, the DataView’s autofecth property is also set to true, to automatically fetch data. The fetchoperation property will specify which operation of the RentalWebDataServices should be used when the DataView fetches the data.

There are two ways to bind data within a template, for example the short {{ field }} expression or the {binding field} expression. As you can see I have used both expressions in the template, one for the background-color style (to bind a value to a specific style attribute, the sys:style-<style> attribute is used). The {{ ID }} and {{ Description }} shortcut will make sure to get the data from the Rental’s (The entity returned from the Rental operation of the RentalWebDataService ) ID and Description property. Take a look at the binding expression used for the <tr> background-color style:

<tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">

There is now an option to specify a Converter, a method which will take the bounded value and pass it as an argument to the specified method and do a conversion and return a new whole value. The Status property in my case returns a string with different kind of status, Approved, NotApproved and Pending. What I want to do, is to convert those values into different colors as I mention earlier in my post. To do that I have used the new Converter feature. To set up a converter is easy just use the Sys.Binding.converters property and assign a method to it with two arguments, the value to convert and a binding argument (holds information about the binding).

Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
     //do something then return the converted value
}

One great thing with the converter, is the possibility to use expandos, for example in my code I have added a ColorType expando to specify if the color that returned from the converter should be a name or not. The binding argument of the converter method can be used to get the expando, for example:

"{binding Status, convert=convertStatusToColor, ColorType=Name}"


Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
    if( binding.ColorName == 'Name')
          //....
     //do something then return the converted value
}

I have created the ugliest converter method ever made, here it is:

Sys.Binding.converters.convertStatusToColor = function(status, binding)
{
       if (binding.ColorType == 'Name')
      {
             if (status == 'Approved')
                    return 'green';
                else if (status == 'NotApproved')
                    return 'red';
                else if (status == 'Pending')
                    return 'yellow';
                else
                    return 'white';
        }
        else
       {
             if (status == "Approved")
                 return '#00ff00';
             else if (status == "NotApproved")
                 return '#ff0000';
             else if (status == 'Pending')
                 return '#ffff00';
             else
                 return '#ffffff';
        }
}

Well, it’s a simple method to convert the incoming string, and return a color for the <tr>’s background-color. Here is the whole client-side code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js" type="text/javascript"></script> 
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js" type="text/javascript"></script>


    <script type="text/javascript">

        var RentalService = {};

        RentalService.dataContext = $create(Sys.Data.AdoNetDataContext,
                                         {
                                             serviceUri: "RentalWebDataService.svc",
                                             mergeOption: Sys.Data.MergeOption.appendOnly
                                         });


        Sys.Binding.converters.convertStatusToColor = function(status, binding) {

            if (binding.ColorType == 'Name') {

                if (status == 'Approved')
                    return 'green';
                else if (status == 'NotApproved')
                    return 'red';
                else if (status == 'Pending')
                    return 'yellow';
                else
                    return 'white';
            }
            else {
                if (status == "Approved")
                    return '#00ff00';
                else if (status == "NotApproved")
                    return '#ff0000';
                else if (status == 'Pending')
                    return '#ffff00';
                else
                    return '#ffffff';
            }
        }

    </script>
    
    <style type="text/css">
        .sys-template { display:none; }
    </style>

</head>
<body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView">
    
    <table sys:attach="dataview"
        class="sys-template"
        dataview:dataprovider="{{ RentalService.dataContext }}"
        dataview:fetchoperation="Rental"
        dataview:autofetch="true">

        <tr sys:if="$index==0">
            <td>Booking No</td>
            <td>Description</td>
        </tr>
        
         <tr sys:style-background-color="{binding Status, convert=convertStatusToColor, ColorType=Name}">
             <td>{{ ID }}</td>
             <td>{{ Description }}</td>
         </tr>
    </table>
    
</body>
</html>

Summary

In this blog post you have seen how to data bind and use the DataView to do client-side binding to a ADO.NET Data Service, you have also got introduced to the Microsoft AJAX NDC, if you want to get more information about the NDC, check out Scott Guthrie's blog: http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx, you have also seen the new Preview 5 converter feature.

To find more information about ASP.NET AJAX 4.0 Preview 5.0, you can check out my two earlier posts:

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/asp-net-ajax-4-0-preview-5-available.aspx

http://weblogs.asp.net/fredriknormen/archive/2009/09/11/keep-the-first-empty-item-in-a-listbox-when-using-asp-net-ajax-4-0-preview-5-and-observer.aspx

Jim, Dave and Bertrand Le Roy’s posts on Preview 5:
http://weblogs.asp.net/jimwang/archive/2009/09/11/asp-net-ajax-preview-5-and-updatepanel.aspx

http://weblogs.asp.net/infinitiesloop/archive/2009/09/10/microsoft-ajax-4-preview-5-the-dataview-control.aspx

http://weblogs.asp.net/bleroy/archive/2009/09/14/building-a-class-browser-with-microsoft-ajax-4-0-preview-5.aspx

Keep the first “empty” Item in a listbox when using ASP.NET AJAX 4.0 Preview 5 and Observer

Fredrik N — Fri, 11 Sep 2009 15:09:00 GMT

I got a question as a comment on my previous post about the new features and changes to ASP.NET AJAX 4.0 Preview 5. I hope I understood the question right ;) It was about using a listbox and add an empty item at the top of the list, and keep it there when adding new items to an array that is bounded to the list, and by using the Observer feature. Maybe some more have or will have the same question, so I decided to write a blog post about it.

In this blog post I will use a sys-template for the listbox, here is an example of a listbox template by using HTML <select> element:


<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
        <option sys:value="{{ID}}">{{ Name }}<//option>
</select>

I will in this example use the dataview feature to simply fill the Listbox with values form an array.

If we want to use ASP.NET AJAX 4.0 and the dataview feature, we need to add the sys and dataview namespace to the <body> tag:


<body
    xmlns:sys="javascript:Sys"
    xmlns:dataview="javascript:Sys.UI.DataView">

Note: We don’t need to add the sys:activate=”*” attribute to the <body> element anymore.

I will in this post use a simple hard coded javascript array for the customers bounded to the listbos, and here is my simple array together with a AddCustomer method:

<script type="text/javascript">

    var customers = [
                      { ID : "JD", Name : "John Doe" },
                      { ID : "JD2", Name : "Jane Doe"}
                    ];

    function AddCustomer()
    {
        Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" });
    }
    
</script>

The AddCustomer method will make sure to add a new customer to the customers array. The Sys.Observer is used to make sure the listbox which is bound to the customers array should be updated automatically when a new customer is added to the customers array.

Here is the code for the whole solution so far:

<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 customers = [
                            { ID : "JD", Name : "John Doe" },
                            { ID : "JD2", Name : "Jane Doe"}
                        ];

        function AddCustomer()
        {
            Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" });
        }
    
    </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>
    
    <select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option sys:value="{{ID}}">{{ Name }}<//option>
    </select>
    
   <input type="button" onclick="AddCustomer();" value="Add item" />
   
    </div>
    </form>
</body>
</html>

As you may already notice there is no empty item at the top of the listbox items. So we add one to the template:


<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option value=”” selected="selected">Select an Item<//option>
            <option sys:value="{{ID}}">{{ Name }}<//option>
    </select>

If we run the code, we will notice that several “Select an Item” will be added to the listbox. What we want to do is to keep the first and “empty” item when a new customer is added to the customers array, we don’t want to have the “empty” list repeatable for each item in the list. To solve this we can use the sys:if attribute. We simply use it to see if the index of the currently bounded item is 0, if so, we add the “empty” item. By doing that we will make sure to only have one “empty” item added, and it will only be added when the index is 0.

<select sys:attach="dataview"
        class="sys-template"
        dataview:data="{{ customers }}">
            <option sys:if="$index==0" sys:value="" selected="selected">Select an Item<//option>
            <option sys:value="{{ID}}">{{ Name }}<//option>
</select>

I hope this post may be useful for some of you, but I will be so happy to see more Silverlight developers ;)

ASP.NET AJAX 4.0 Preview 5 available

Fredrik N — Fri, 11 Sep 2009 07:39:00 GMT

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>

ASP.NET MVC Framework - Ajax

Fredrik N — Mon, 26 Nov 2007 16:00:00 GMT

Take look at Nikhil's blog about how AJAX can be used with the ASP.Net MVC Framework:

http://www.nikhilk.net/Ajax-MVC.aspx