根据另一个EnumDropDownListFor中的选择填充一个EnumDropDownListFor

Question

我正在寻求ASP.MVC 5的帮助。

我有3个枚举：

    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.
}

我正在使用EnumDropDownListFor在前端填充这些，唯一的问题是如何根据国家/地区选择更改省份EnumDropDownListFor？我是否需要使用Ajax（我认为是这样，但不确定如何用另一个枚举中的新值填充EnumDropDownListFor），还是有一种优雅的方法来默认执行该操作？预先感谢！

Answer 1

您可以做的最简单的事情是使用Jquery根据所选国家/地区枚举显示正确的下拉列表。这是一个示例，其中我使用了带有您的枚举的模型

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

您认为使用

@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>

最后是一个简单的jquery脚本，它将基于所选值隐藏或显示枚举下拉列表。 （加拿大：1，美国：2）

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

因此，每当用户选择USA时，Canada下拉列表将被隐藏，反之亦然。如果您想在没有选择任何内容的情况下同时隐藏两个下拉菜单，请像这样更改脚本

$("#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");
});