Отображать только определенные критерии поиска в HTML-форме

Question

Мне нужна форма, содержащая поля критериев.Эти критерии могут быть типа «дело» или «набор».Для этого выбора я использую выпадающий список (см. Скриншот ниже).Основываясь на этом типе, я хотел бы отображать только определенные поля критериев.

Для типа "дело" у меня есть следующие критерии:

• Уставное дело
• Свободное дело
• Количество поверенных
• Поверенное в делах
• Записка по делу

Для типа "suite" у меня есть следующие критерии:

• Statut suite
• Libellé suite
• Numéro de suite
• Titre de la suite
• Note de la suite

В настоящий момент в моей форме отображаются только критерии "affaire".Примерно так:

@using (Html.BeginForm("SearchAffaires", "Search", FormMethod.Post)) { 

    @Html.LabelFor(m => Model.SearchType)
    @Html.DropDownListFor(m => Model.SearchType, Model.Type)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdAffaire)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.IdAffaire)


    @Html.LabelFor(m => Model.SearchCriteriaAffaire.IdStatus)
    @Html.DropDownListFor(m => Model.SearchCriteriaAffaire.IdStatus, Model.Status)

    @Html.LabelFor(m => Model.SearchCriteriaAffaire.Title)
    @Html.TextBoxFor(m => Model.SearchCriteriaAffaire.Title)

    <input type="submit" id="buttonSubmit" value="Submit" />
    <input type="button" id="buttonClear" value="Clear" />

}

Первый DropDownListFor (... Model.Type) используется для различения поиска типа "affaire" или "suite".Я хотел бы иметь возможность скрыть поля критериев "affaire" и показывать поля критериев "suite" на основе значения этого раскрывающегося списка.Каков наилучший способ добиться этого?

Спасибо.

Answer 1

Я бы, вероятно, просто использовал обработчик событий на стороне клиента и переключал бы видимость элементов ..

$('#searchType').change(function() {
    var value = $('#searchType option:selected').val();
    if (value === 'affaire') {
        $('.affaireCriteria').show();
        $('.suiteCriteria').hide();
    }
    else {
        $('.affaireCriteria').hide();
        $('.suiteCriteria').show();
    }
});

Просто пример кода ... еще много можно сделать, чтобы сделать его более элегантным.