Question

在我看来，我有一个选择框。如果选择了某个值，我希望使用@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
 }

但是在运行时，如果选择选项赋予作业ID 1；表单选项不呈现。

是否有一个原因，当“选择”选项更改时，表单选项没有出现？还是我必须使用JavaScript才能实现此目标？

Answer 1

这是预期的行为，因为在向浏览器发送数据之前在服务器上呈现了一次视图。但是，要显示其他输入，您可以使用两种方法-js或局部视图（如果需要，甚至可以使用ajax），您只需要使用JavaScript即可显示/隐藏所需情况下的表单其他元素。

Answer 2

@if语句和Model.JobId在服务器端执行，因此，当下拉选择值更改时，Model.JobId的值不会更改，因为客户端中发生了change事件，侧。通过使用JS处理change事件，您可以使用AJAX调用来设置值并显示部分视图内包含的其他表单选项：

jQuery AJAX调用

$('#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>

@如果未更改其他表单元素，则不呈现表单选项

2 个答案: