design pattern for related inputs

Question

My question is a design question :
let's say i have a data entry web page with 4 drop down lists, each depending on the previous one, and a bunch of text boxes.

• ddlCountry (DropDownList)
• ddlState (DropDownList)
• ddlCity (DropDownList)
• ddlBoro (DropDownList)
• txtAddress (TxtBox)
• txtZipcode(TxtBox)

and an object that represents a datarow with a value for each:

• countrySeqid
• stateSeqid
• citySeqid
• boroSeqid
• address

• zipCode

  naturally the country, state, city and boro values will be values of primary keys of some lookup tables.

when the user chooses to edits that record, i would load it from database and load it into the page. the issue that I have is how to streamline loading the DropDownLists.

i have some code that would grab the object,look thru its values and move them to their corresponding input controls in one shot. but in this case i will have to load the ddlCountry with possible values, then assign values, then do the same thing for the rest of the ddls.

I guess i am looking for an elegant solution. i am using asp.net, but i think it is irrelevant to the question. i am looking more into a design pattern.

Answer 1

I've designed screens like this before and asp.net really makes it difficult to do anything but postback after each selection so it matters a little.

This isn't so much a question of design patterns as of service-level contracts. How responsive does the site need to be? What kind of connection are you on? Will the users know exactly which dropdown selections they would like to make or will they spend some time browsing around? Does the form need to be mobile-device friendly?

These are questions that affect your design. Let me explain.

There are two things that you can do here. As always you will actually probably select a hybrid approach but the extremes are:

1. Each selection triggers a postback. The request is handled by querying a service for the next set of options and rebuilding the page with the new options populated. Obviously this is not particularly fast or streamlined, but it IS the most reliable and cross-platform.
2. When the page loads, it contains in javascript a structure depicting all the options that will populate the dropdowns. You only will ever have one postback at the end. Obviously this is very fast, but not conducive toward huge lists, not very portable and poses some difficulty if you need any sort of advanced logic in the selection chain.

A possibly good in-between might be to treat javascript as a sort of first-level cache and the server as a second-level cache. You have embedded on the page the most commonly selected country/states but if there's a miss you trigger an ajax post-back to fetch more data. Of course this is a lot more work for you.

So yeah. Hope that helped