Fill DropDownLists with countries, states and cities without mantaining database for that task

Question

I am working on site something like job portal in ASP.NET C#. Here I need to fill few DropDownLists to provide choice to users. In one section I need to fill 3 DropDownLists each with countries, states and cities. Is there any way that I can fill all this lists without maintaining database for countries, states and cities? I have heard of some third party tool to perform this task but don't have any idea where to look for it.

In second section I need to fill DropDownLists with all possible qualifications and based on that selection another DropDownLists should be filled with specializations provided under that qualification.

Please advise me on the simplest solution.

Thanks to all.

Answer 1

I'm not aware of any web service that would provide country/state/city listings but I suppose they probably exist since this is really an every day rather common scenario.

I will provide information about your second problem. And that are related dropdowns.

Related drop downs are always tricky and best done when loading is done on the client without full page postbacks. But in the end it always boils down to the complexity and amount of your data that fills them.

Not much data

When you have something like 10-50 items in first drop down and for each of them another 10-50 items for the second drop down, we can say that you don't have much data. Or when there are more than two drop downs we can say that we don't have much data when there are less than x000 records all together (do some testing in various browsers to get some acceptable limit). In this case you could provide all this data in your HTML preloaded and Javascript can use that when user interacts with these fields.

I would do it this way. I would generate JSON on the server and provide it in my HTML as:

var qualifications = {
    "Manager": ["First", "Second", ...],
    "Developer": ["...", ...],
    ...
};

Then I'd either prepopulate my fist drop down on the server or populate it on the client side on page load (in jQuery that would be by using $(function(){...});). Handling change event would then populate the second drop down by using array in specialities that are part of the associative object described above (I'm using associative object instead of an array because it will be much easier to find corresponding specialities array to populate my second drop down by simply doing:

$("#FirstDropDown").change(function(){
    var specialities = qualifications[$(this).val()];
    ...
});

Lots of data

When we have lots of data (or frequently changing data) in each drop down it's not feasible to load them all upfront. It's only feasible when we have some user interface process when users usually select many combinations (so we would eventually load 90% of all data). Anyway.

1. preload the first drop down on the server (or on the client on page load)

2. attach a client side event to this first drop down, that issues an Ajax request to get the second drop down list data:

   $("#Country").change(function(){
       $.ajax({
           type: "GET",
           url: "Geo/GetStates",
           data: $(this).val(),
           success: function(data){
               // populate states dropdown
           },
           error: function(xhr, state, err){
               // display alert or something
           }
       });
   });
   

3. when data from the server is returned we can populate our second drop down and attach a similar behaviour on its change event.

4. Do a similar thing for the next drop down

This way we get fast page responses due to loading only a handful of data.

Answer 2

Any IEnumerable can be used for data source like IList. Make a list of country objects and set it as datasource. Set DisplayMember and ValueMember, and your list is populated.