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.
