Question

我正在尝试为此创建一个最佳解决方案，但因为这是我第一次遇到这种情况所以我不确定如何最好地实现这一点。

我有一个非常简单的模型，

public class Feedback
{       
[Required]
[Display(Name = "Current ID")]
public int? PreviousID { get; set; }

[Required]
[Display(Name = "Next ID")]
public int? NextID { get; set; }

[Required]
public int ScenarioID { get; set; }

[Display(Name = "Select you scenario")]
public IEnumerable<SelectListItem> YourScenario { get; set; }

}

当用户首次加载视图时，仅显示YourScenario的下拉列表和PreviousID的TextBox。当用户选择下拉列表时，然后根据其值向用户显示TextBox for NextID。这是我的观点，

<div class="form-group">
   @Html.LabelFor(m => m.YourScenario, new { @class = "col-sm-3 control-label" })
      <div class="col-sm-9">
        @Html.DropDownListFor(m => m.ScenarioID, m.YourScenario, "Choose Scenario", new { @class = "form-control chosen-select" })
    </div>
</div>

<div class="form-group">
   @Html.LabelFor(m => m.PreviousID, new { @class = "col-sm-3 control-label" })
   <div class="col-sm-9">
       @Html.TextBoxFor(m => m.PreviousID)
   </div>
</div>

<div class="form-group" style="display:none">
   @Html.LabelFor(m => m.NextID, new { @class = "col-sm-3 control-label" })
   <div class="col-sm-9">
       @Html.TextBoxFor(m => m.NextID)
   </div>
</div>

显示/隐藏NextID我在视图上使用Jquery，

   $('#YourScenario').change(function () {
        var selectedValue = $(this).val();
        var nextID = $('#NextID');

        if (selectedValue = "3") {
            nextID .show();
        }
        else {
            nextID .hide();
        }
    });

这一切都很棒。现在使用相同的视图作为编辑模式我将模型传递给控制器的视图。我想要的是应该根据模型值自动显示或隐藏NextID的TextBox。如果我在View上使用if条件，那么通过Javascript无法使用控件，那么我该如何实现呢？

Answer 1

以下是一个简单示例：https://jsfiddle.net/jma71jf7/

当您运行代码时，它将隐藏输入，因为没有选定的值，此行将触发更改事件功能：

$('#YourScenario').trigger('change');

但是在编辑时，select会有一些值，它会根据值隐藏/显示输入。

显示和隐藏控制器和视图中的控件

1 个答案: