Best approach for a multi-tab ASP.NET AJAX control?

Looking for some implementation advice:

I have a page that has a 3-tab ajaxToolkit:TabContainer. The purpose of the page is to expose a calculator that has two basic inputs: geo-location and date. The three tabs are labeled "City and State", "Postal Code", and "GPS Coordinates". The layout of each tab container is the same for each tab, with the excep开发者_运维知识库tion of the location section; the location section changes because each type of location has different inputs. For example, to specify city/state, there will be three fields: city, country, and state (country and state will use cascading drop-down lists). But Postal code requires only one field (which will validate via regular expression for allowed countries).

See the example design mockup:

So, what I WOULD LIKE to do (in order to minimize duplicate code), is to have a common control that contains the layout and structure of the calculator without specifying anything about the location section. Then, I'd like to be able to pull in each of the unique location controls based on what tab is selected. The tab structure exists at the page level, not in a control.

Any advice?

I was looking at templated controls (see MSDN article here), but I'm not convinced that it's the right solution. If I HAVE to create three separate controls with similar layouts and common elements, then that's what I have to do. But REALLY, I'd prefer a more elegant, inheritance-based solution.

Any advice would be greatly appreciated. Thanks.

I wound up using jQuery UI for this. It's tab feature is very nice.