Заполните один EnumDropDownListFor на основе выделения в другом EnumDropDownListFor - PullRequest
Новая
       39

Заполните один EnumDropDownListFor на основе выделения в другом EnumDropDownListFor

0 голосов
/ 30 апреля 2020

Я ищу вашу помощь с 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 для заполнения тех на Фронтенд, единственный вопрос, как я могу сделать провинцию EnumDropDownList для изменения на основе выбора страны? Нужно ли мне использовать ajax (я так думаю, но не уверен, как заполнить EnumDropDownListFor новыми значениями из другого перечисления), или есть более элегантный способ сделать это, что есть по умолчанию? Заранее спасибо!

1 Ответ

0 голосов
/ 02 мая 2020

Самое простое, что вы можете сделать, это использовать 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");
});
...