@if 在更改其他表单元素时不呈现表单选项答案

【问题标题】：@if not rendering form options on change of other form element@if 在更改其他表单元素时不呈现表单选项
【发布时间】：2019-03-19 06:31:59
【问题描述】：

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

【问题讨论】：

标签： asp.net .net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

这是预期的行为，因为视图在将数据发送到浏览器之前在服务器上呈现一次。但是，为了显示额外的输入，您可以使用两种方法 - js 或部分视图（如果需要，甚至可以使用 ajax），您必须仅使用 JavaScript 来显示/隐藏表单的其他元素。

【讨论】：

【解决方案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>

【讨论】：