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

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 ;)

1 Comment

  • You did indeed understand man question correctly.

    I would love to see some more advanced examples of what is possible with the templating engine, more examples of sys:codebefore/sys:codeafter/sys:if and things like grouping for example (ex: http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html).

    Keep up the good work Fredrik.

Comments have been disabled for this content.