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

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>