根据另一个 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 在前端填充这些内容，唯一的问题是如何根据 Country 选择更改 Province 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>
}

因此，每次用户选择美国时，加拿大下拉菜单都会被隐藏，反之亦然。如果您想在未选择任何内容的情况下隐藏两个下拉菜单，请像这样更改您的脚本

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