Как заполнить выпадающий список на другой выпадающий список, выбранный asp .net mvc

Question

(извините, но я искал похожие вопросы, но я нашел это только без ответа: Раскрывающийся список, не заполняющий другие элементы управления )

все в порядке, поэтому сначала я застрял здеськроме того, я - тупой бэкэнд-разработчик .net, но я нахожусь в ситуации, когда мне нужно помочь, хорошо, проблема в том, что я не знаю, как заполнить второе поле со списком, которое зависит от первого, например, есть клиенты иконтакты, у каждого клиента есть свои контакты, поэтому в зависимости от того, какого клиента вы выбираете, нам нужно показать его контакты: как это сделать?на платформе wpf у нас просто есть событие изменения выбранного элемента, что-то в этом роде, и при изменении мы обновляем второе поле со списком, но я понятия не имею, как это сделать в asp.net mvc, я выписываю первое поле со спискомкак это:

<div class="form-group">
            @Html.LabelFor(model => model.ClientID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ClientID", TempClass.GetClients, "Select Client")
            </div>
        </div>

Где TempClass.GetClients возвращает

IEnumerable<SelectListItem>

со значениями: ID и именем клиента.

Надеюсь, вы понимаете, спасибо ввперед.

Answer 1

Как правило, вам необходимо выполнить следующий шаг:

Использование Jquery для отслеживания события изменения в раскрывающемся списке http://api.jquery.com/change/

$("#Dropdown1").on("change", function(){
    var selectedValue = $(this).val();
    AjaxCall(selected);
})

Затем используйте Ajax для вызовак действию на контроллере, который заполняет значения для второго раскрывающегося списка.

function AjaxCall(value){
    $.ajax({
        type: "GET",
        url : 'UrlToAction',
        data: { value: value },
        success: function(data) {
            PopulateValueForSecondDropdown(data);
        }
    });
}

После получения данных от Ajax в методе успеха используйте jquery для заполнения значений для второго раскрывающегося списка

function PopulateValueForSecondDropdown(data) {
    $('#DROPDOWN2').empty(); 
    data.forEach(function(item){
        $('#DROPDOWN2').append('<option value="' + item.KEY+ '">' + item.VALUE + '</option>');
    });
}