Fill in one EnumDropDownListFor based on the selection in another EnumDropDownListFor

Question

I'm seeking for your help with ASP.NET MVC 5.

I have 3 enums:

    public enum Country
    {
        Canada = 1,
        USA = 2
    }

 public enum Provincies
    {
        Alberta,
        [Display(Name = "British Columbia")]
        BritishColumbia, 
        Manitoba,
        [Display(Name = "New Brunswick")]
        NewBrunswick,
        [Description("Newfoundlan And Labrador")]
        NewfoundlandAndLabrador,
        [Display(Name = "Nova Scotia")]
        NovaScotia, 
        Ontario,
        [Display(Name = "Prince Edward Island")]
        PrinceEdwardIsland, 
        Quebec,
        Saskatchewan
    }

public enum States
    {
        Alabama,
        Alaska,
        Arizona,
        Arkansas,
        California,
etc.
}

I'm using EnumDropDownListFor to populate those on a frontend, the only question is how can I make Province EnumDropDownListFor change based on the Country selection ? Do I need to use ajax (I think so but not sure how to populate EnumDropDownListFor with new values from another enum), or is there mo elegant way to do that that is there by default ? Thanks in advance !

Answer 1

The simplest thing you could do is use Jquery to show the correct dropdown based on the selected country enumeration. Here is an exaple in which I use a model with your enumerations

public class Info
{
    public Enumeration.Country Countries { get; set; }
    public Enumeration.States States { get; set; }
    public Enumeration.Provincies Provincies { get; set; }
}

In your view use

@Html.DisplayNameFor(u => u.Countries)
@Html.EnumDropDownListFor(u => u.Countries, "Select Country", new { id = "CountriesDroDownLst" })
<hr />
<div class="provinciesContainer hidden">
    @Html.DisplayNameFor(u => u.Provincies)
    @Html.EnumDropDownListFor(u => u.Provincies)
    <hr />
</div>
<div class="statesContainer hidden">
    @Html.DisplayNameFor(u => u.States)
    @Html.EnumDropDownListFor(u => u.States)
    <hr />
</div>

and finally a simple jquery script which will hide or show the enumeration dropdown based on the selected value. (CANADA:1, USA:2)

@section scripts{
    <script>
        $("#CountriesDroDownLst").change(function (e) {
            $(".statesContainer, .provinciesContainer").addClass("hidden");
            var container = ($(this).val() === "1") ? ".provinciesContainer" : ".statesContainer";
            $(container).toggleClass("hidden");
        });
    </script>
}

So everytime the user selects USA then the Canada dropdown will be hidden and the other way around. If you want to hide both dropdowns if nothing is selected then change your script like this

$("#CountriesDroDownLst").change(function (e) {
    var selectedValue = $(this).val();
    $(".statesContainer, .provinciesContainer").addClass("hidden");
    if (selectedValue === "0")
        return;
    $(".statesContainer, .provinciesContainer").addClass("hidden");
    var container = (selectedValue === "1") ? ".provinciesContainer" : ".statesContainer";
    $(container).toggleClass("hidden");
});