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:
<selectsys:attach="dataview"class="sys-template"dataview:data="{{ customers }}"><optionsys: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:
<bodyxmlns: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:
<scripttype="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:
<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 customers = [ { ID : "JD", Name : "John Doe" }, { ID : "JD2", Name : "Jane Doe"} ];function AddCustomer() { Sys.Observer.add(customers, { ID: "JD2", Name: "Some Doe" }); }</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><selectsys:attach="dataview"class="sys-template"dataview:data="{{ customers }}"><optionsys:value="{{ID}}">{{ Name }}<//option></select><inputtype="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:
<selectsys:attach="dataview"class="sys-template"dataview:data="{{ customers }}"><option value=””selected="selected">Select an Item<//option><optionsys: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.
<selectsys:attach="dataview"class="sys-template"dataview:data="{{ customers }}"><optionsys:if="$index==0"sys:value=""selected="selected">Select an Item<//option><optionsys: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 ;)