@if не отображает параметры формы при изменении другого элемента формы - PullRequest
Новая
       48

@if не отображает параметры формы при изменении другого элемента формы

0 голосов
/ 14 октября 2018

На мой взгляд, у меня есть поле выбора.Если выбрано определенное значение, я хочу, чтобы дополнительные параметры формы отображались ниже с помощью @if.

@model App.ViewModels.JobVM    

<div class="row">
     <div class="form-group">
         @Html.Label("Job Type", new { @class = "control-label" })
         @Html.DropDownListFor(model => model.JobId, 
                               new SelectList(App.ViewModels.JobVM.GetJobs(),
                                              "Value", "Text"), 
                               "--Choose Job Type--", 
                               new { @class = "form-control"})
      </div>
 </div>
...

 @if (Model.JobId == 1)
 {
  .... more form options
 }

Однако при запуске, если выбрана опция, которая дает Job ID 1;параметры формы не отображаются.

Есть ли причина, по которой параметры формы не отображаются при изменении параметра Выбрать?Или мне придется использовать javascript для достижения этой цели?

Ответы [ 2 ]

0 голосов
/ 15 октября 2018

Оператор @if и Model.JobId выполняются на стороне сервера, поэтому значение Model.JobId не изменяется при изменении выбранного значения в раскрывающемся списке, поскольку на стороне клиента произошло событие change.Обрабатывая событие change с JS, вы можете использовать вызов AJAX, чтобы установить значение и отобразить дополнительные параметры формы, которые содержатся в частичном представлении:

JQuery AJAX call 

$('#JobId').change(function () {
    var jobId = $(this).val();
    if (jobId == 1) {
        $.ajax({
            type: 'GET', // or 'POST'
            url: '@Url.Action("ActionName", "ControllerName")',
            data: { JobId : jobId },
            success: function (result) {
                $('#formoptions').html(result);
            },
            // other stuff
        });
    }
    else {
        $('#formoptions').empty();
    }
});

Действие контроллера 

public ActionResult ActionName(int JobId)
{
    // do something

    return PartialView("_FormOptions", viewmodel);
}

Если параметры формы уже визуализированы вместе внутри представления, вместо использования блока @if на стороне сервера, просто используйте заполнитель <div> ипереключить его видимость следующим образом: 

$('#JobId').change(function () {
    var jobId = $(this).val();
    if (jobId == 1) {
        $('#formoptions').show(); // show form options
    } else {
        $('#formoptions').hide(); // hide form options
    }
});

HTML 

<div id="formoptions">
   <!-- more form options -->
</div>
0 голосов
/ 14 октября 2018

Ожидаемое поведение, поскольку представление отображается на сервере один раз перед отправкой данных в браузер.Однако для отображения дополнительных входных данных вы можете использовать оба метода - js или частичные представления (даже с ajax, если вам нужно), вам нужно использовать только JavaScript, чтобы показать / скрыть другие элементы формы для необходимых случаев.

...