Load cascading dropdowns with knockout when editing db persisted rows

Question

I'm building an application using ASP.Net MVC 3 and one of the views has three DropDownLists (Countries, States and Cities) that are loaded on demand. The Create view is ok, but I have no idea on how to create the Edit view as the database table only stores CityId.

My database has the following structure:

CountriesTable = {CountryID, CountryName}
StatesTable = {StateID, StateName, Abbreviation, CountryID}
CitiesTable = {CityID, CityName, StateID}

When the user opens the Edit view, I need to get the previously chosen CityID to find the StateID, which will help me find the CountryID. This must guide the load of the three DropDowns.

CountriesDropDown = will load all countries and select the one with the CountryID of the selected city StatesDropDown = will load all states of the selected country CitiesDropDown = will load all cities of the selected state

Thank you

Answer 1

I'm not 100% sure that I understand your question correctly, but I will give it a shot :)

You write that:

CountriesDropDown = will load all countries...

Based on this, when you initialize your knockoutJS viewmodel you could initialize an observable array containing the possible values for the dropdown / select element representing the list of countries.

To do so you could make an AJAX request to get the data you need to populate the dropdown, e.g.:

// Get all countries
$.getJSON("/GetAllCountries", function(data) { 
    // Add the new data to the observable array holding the list of countries
});

It would be a good idea to use observable arrays in the viewmodel for data representation and options bindings in the view ( the observable arrays make any changes to the array affect the UI immediately ).

Then, you could have three observables to represent the selected value in each of the three dropdowns respectively - e.g.:

self.selectedCountry = ko.observable();
self.selectedState = ko.observable();
self.selectedCity = ko.observable();

( Remember that the options binding allow you to specify which "field" should contain the value selected using the value parameter. )

Continuing on the previous quote you write:

CountriesDropDown = will load all countries and select the one with the CountryID of the selected city

To accomplish this you could make an AJAX request asking the web-server which country the given city corresponds to. Using that result you could change the selected value of the country dropdown using knockout like this:

self.selectedCountry(theCountryToBeSelected);

Then you write:

StatesDropDown = will load all states of the selected country

To accomplish this you could take advantage of knockout's ability to subscribe to changes in observables, and when the selected country has changed you can change the content of the state dropdown - e.g. like this:

self.selectedCountry.subscribe(function(newSelectedCountry) {
    // Get all states based on the new selected country
    $.getJSON("/GetStatesForCountry/" + newSelectedCountry.id, function(data) { 
        // Add the new data to the observable array holding the list of states
    });
});

And finally, you write:

CitiesDropDown = will load all cities of the selected state

To accomplish this you can apply the same principle as above: make an AJAX request based on the id of the selected state and populate the observable array representing the list of cities using the data returned from the server.

If this is not what you are looking for I hope that I at least have been able to inspire you or point you into the right direction :)