Using Atlas to implement client-side Master-Detail dropdowns
After attending the PDC, I thought it would be cool to use Atlas for solving a common postback-overhead problem in ASP.NET : 2 connected Master-Detail dropdown lists.
Using plain ASP.NET 1.x, the way to implement this is by setting the 'AutoPostBack' property of the master dropdown to 'true' and then fill the detail dropdown after a postback. But we all know postbacks are slow and bad for user experience; a much better way to solve this problem is by using client-side JavaScript and XML.
An good example (e.g. used by Michael Schwarz for demonstrating Ajax.NET) is the case where the master dropdown shows a list of car brands, and the detail dropdown shows a list of available models for the selected brand. When the user selects a car brand, the car model dropdown is filled clientside, so no need for a postback to the webserver!
I've assembled an example project containing 4 techniques for implementing Master-Detail dropdowns in ASP.NET, which you can download here (including source code!!!). The 4 techniques in my example project are:
- Server-side using ASP.NET 1.x/2.0 AutoPostBack
- Client-side using ASP.NET 2.0 (beta 2) Client Script Callback
- Client-side using ASP.NET 1.x/2.0 Ajax.NET
- Client-side using ASP.NET 2.0 (beta 2) Atlas script
Note: For these examples to work, you need ASP.NET 2.0 beta 2 installed. For the examples to run on RC, some changes have to be made for the Client Script Callback example.
Note2: Thanks to Bertrand Le Roy for helping me out on the Atlas code!
A few things I haven't solved for the Atlas example yet:
- The databinding of the detail dropdown needs the selectedValue of the master dropdown. Someway, I can't just bind this value direct from the dropdown, so I used a hidden textbox for this (binded to the selectedValue of the master dropdown).
- I use the AtlasScript 'setProperty' to enable/disable the postback button. I want to enable the button when the selectedValue of the detail dropdown is unequal to an empty string, but I cant' seem to find a transformation function for a comparison like this.
Please give me feedback when you think my Atlas example could be improved.