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

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

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

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的文本框。当用户选择下拉列表时，根据其值，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应该根据模型值自动显示或隐藏。如果我在视图上使用If条件，那么通过Javascript控件不可用，那么我如何实现这一点?

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