read ASP.net mvc Drop down list in .cshtml

Question

I would like to have a drop down list populated with different values depending on what country the user selects.

In my .cshtml file we make a dropdown list by binding to an enum

    @helper DropDownField(string binding, Type enumType)
    {
        <!-- ko with : @(binding) -->
        <div class="control-group" data-bind="css: { error: isInvalid }">
        <label class="control-label" for="@binding" data-bind="text: title">replace me</label>
        <div class="controls">
        <select id="@binding" name="@binding" data-bind="value: value">
            @{Dictionary<string, string> enumValues; }
                enumValues = EnumExtensionMethods.GetNameAndFriendlyNameDictionary(enumType);


            @foreach (KeyValuePair<string, string> kvp in enumValues)
                { 
                @:<option value="@kvp.Key">@(!String.IsNullOrWhiteSpace(kvp.Value) ? kvp.Value : "&nbsp;")</option>
            }
        </select>
        <span class="help-inline" data-bind="text: errorMessage"></span>
    </div>
</div>
<!-- /ko -->
}

Then I would the code to display the appropriate list depending on what country is selected. Of course this is not working. I am not sure of the syntax I can use to check the value of the country.

    @DropDownField("country")                                 
    if ($('#country').val() == "US") {
        @DropDownField("state", typeof(StateType))                         
    } else {
        @DropDownField("state", typeof(ProvinceTypeCA))
    }

Answer 1

Maybe make a JS Fiddle next time...

your code looks a wee bit complicated (I'm not much of a fan of < ! -- ko) if I were to make a dropdown which had it's values chosen via a country I would make a array of countries (obviously) then I would make your second drop down a computable. That compute would store a 2D array, one side being for the country it's for and the other being the data, ie

[{"Australia", "gday mate"}, {"Australia", "more dropdown stuff!!"}, {"America", "Howdy partner"}, {"Paris", "baguette are very nice"}]

Then you make the computed filter results depending on what country is selected at that time.

then when a country was selected your computed would update (because in the enable field of your second dropdown you would put the country as it's enable so it is disabled when no country is chosen) and therefore you would have an up to date dropdown

Or just follow the tutorials here where they show you how ;) http://ryanrahlf.com/building-cascading-dropdowns-with-knockout-js/ --- http://ryanrahlf.com/building-cascading-dropdowns-with-knockout-js-part-2-working-with-flat-data/

Not too sure how good they are because I havn't done them, but I eye balled them and they look right