Как сделать форму адаптивной (показать / скрыть часть формы) на основе выбранных элементов из выпадающего списка?

Question

Я работаю над бритвой в проекте c # mvc, и мне бы хотелось, чтобы элементы (текстовые поля и т. Д.) Реагировали на выбранные значения из выпадающего списка.

Это раскрывающийся список в моем представлении бритвы:

 <div class="form-group">
    @Html.LabelFor(a=> a.pm_main_rep.PM_Event_CategoriesId)
    @Html.DropDownListFor(a=>a.pm_main_rep.PM_Event_CategoriesId, new SelectList(Model.pm_evt_catgrss, "Id","type_of_event"), "Select a category", new { @class="form-control"})
</div>

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

Все, что я хочу на данный момент, - это то, чтобы текстовое поле ниже, используемое для выбора даты, появилось, если пользователь выбирает собрание из раскрывающегося списка.

    @if(?????)
    {
    <div class="form-group">
        @Html.LabelFor(a => a.pm_main_rep.Estimated_Start_Date)
        @Html.TextBoxFor(a => a.pm_main_rep.Estimated_Start_Date, "Start Date", new { @class = "form-control", @readonly = "readonly", @style = "cursor :default;" })
    </div> 
    }

Какой должна быть логика внутри блока if (), или, если есть лучший подход, скажите, пожалуйста, ребята. Спасибо

Answer 1

Существует два варианта - в зависимости от , где вы хотите выполнить действие, на стороне сервера или на стороне клиента. Я рекомендую использовать сторону сервера, если существует много данных для отправки клиенту для каждого выбора, и сторону клиента, которая не требует делать запрос к серверу, в противном случае.

1) На стороне сервера вы должны публиковать форму каждый раз, когда пользователь выбирает другую опцию из списка. Я показываю, как сделать это через ajax с отправкой HTML с сервера, но вы также можете отправить JSON с сервера и проанализировать его с помощью js. Я использую jquery:

ЯШ:

$('#Estimated_Start_Date').change(function() {
  $.post('/.../gethtmlfordropdown', { selection: $('#Estimated_Start_Date').val() }, function(html) {
    $('#Choice').html(html);
  });
});

cshtml:

<div class="form-group">
    @Html.LabelFor(a=> a.pm_main_rep.PM_Event_CategoriesId)
    @Html.DropDownListFor(a=>a.pm_main_rep.PM_Event_CategoriesId, new SelectList(Model.pm_evt_catgrss, "Id","type_of_event"), "Select a category", new { @class="form-control"})
</div>
<div id="Choice"><!-- Content from ajax --></div>

Сервер:

public ActionResult GetHtmlForDropDown(string selection)
{
    string html = ...; // Get the html depending on 'selection'
    return PartialView(html);
}

2) На стороне клиента - присваивайте идентификаторы каждому контенту, будет проще, если идентификатор будет равен значению выбора в раскрывающемся списке или что-то вроде:

cshtml:

<div class="form-group">
    @Html.LabelFor(a=> a.pm_main_rep.PM_Event_CategoriesId)
    @Html.DropDownListFor(a=>a.pm_main_rep.PM_Event_CategoriesId, new SelectList(Model.pm_evt_catgrss, "Id","type_of_event"), "Select a category", new { @class="form-control"})
</div>
<div class="choice" id="Value1" style="display: none;">...</div>
<div class="choice" id="Value2" style="display: none;">...</div>
<div class="choice" id="Value3" style="display: none;">...</div>

ЯШ:

$('#Estimated_Start_Date').change(function() {
  var selection = $('#Estimated_Start_Date').val();
  $('.choice').css({ 'display': 'none' })
    .filter('#' + selection).css({ 'display': 'block' });
});