MVC 5 Razor視圖模板結合隱藏腳本模型單選按鈕

Question

目前具有動態填充基於剃刀頁進來的模型（）的自定義EditorTemplate。 目標是能夠隱藏個人div'Sub_Text'在編輯器模板中基於無線電值。

型號：Prime.cs

public class Prime{ 
    public List<QuestionModel> Questions { get; set; } 
} 

型號：QuestionModel.cs

public class QuestionModel{ 
    public int Id { get; set; } 
    public string Question { get; set; } 
    public string Answer { get; set; } 
    public string SubText { get; set; } 
} 

主視圖：_Reporting.cshtml

@model ViewModels.Prime 

@for (int i = 0; i < Model.Questions.Count(); i++) //Dynamically generate and model bind database PolicyHolderKeyQuestions 
{ 
    @Html.EditorFor(x => x.Questions[i], "QuestionModel") 
} 

EditorTemplate：QuestionModel.cshtml

@model ViewModels.QuestionModel 
@{ 
    <div class="col-lg-2"> 
     @Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes) 
     @Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.No) 
     @Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.NA) 
    </div> 
    <div class="col-lg-9"> 
     <div class="row"> 
      <p> 
        <strong>@Model.Question</strong> 
      </p> 
     </div> 
     <div class="row" name="**Sub_Text**"> @* **Hide Me!** *@ 
      @Model.SubText 
     </div> 
    </div> 
} 

到目前爲止，我已經找到了最近的想法是一個腳本這樣的事情添加到模板的底部：

<script type="text/javascript"> 
    $(':radio[name=Answer').change(function() { 
     // read the value of the selected radio 
     var value = $(this).val(); 
     var doc 
     if (value == 1) { 
      $('#Sub_Text').show(); 
     }else{ 
      $('#Sub_Text').hide(); 
     } 
    }); 
</script> 

這似乎是能夠使用一些更簡單的工作，而無需使用@ Html.EditorFor （）在一個循環中。

它看起來好像該腳本不遵循與RadioButtonFor元素髮生的相同的自動命名更改。導致這樣的事情： 收音機：

<input id="Questions_0__Answer" name="Questions[0].Answer" type="radio" value="No" /> 

雖然申報單和腳本只保留引用什麼直接輸入。

你怎麼能動態地隱藏「Sub_Text」的基礎上，當它被嵌套在這樣的單選按鈕DIV？

如果有一種方法可以做到這一點，而不需要爲每個編輯器輸入腳本，那麼對於更好的無線電組，但是所有解決方案都是受歡迎的。

Answer 1

裹在一個容器由EditorTemplate生成，這樣就可以使用相對選擇

@model ViewModels.QuestionModel 
<div class="question"> // container 
    <div class="col-lg-2"> 
     @Html.RadioButtonFor(Model => Model.Answer, YesNoNAOptions.Yes) 
     .... 
    </div> 
    <div class="col-lg-9"> 
     .... 
     <div class="row">@Model.SubText</div> 
    </div> 
</div> 

，然後腳本可以

$(':radio').change(function() { 
    // get the associated element containing the SubText value 
    var row = $(this).closest('.question').find('.row'); 
    if ($(this).val() == 1) { 
     row.show(); 
    } else { 
     row.hide(); 
    } 
}); 

旁註的HTML：如果您QuestionModel.cshtml是在/Views/Shared/EditorTemplates或/Views/yourControllerName/EditorTemplates文件夾（它應該是），那麼_Reporting.cshtml中的代碼應該只是

@model ViewModels.Prime 
@Html.EditorFor(x => x.Questions) 

無環路是必需的。 EditorFor()接受IEnumerable<T>併爲集合中的每個項目生成正確的html。