MVC 5 Razor 视图模板将隐藏脚本绑定到模型单选按钮

Question

目前有一个自定义的 EditorTemplate，它根据 Razor 页面中传入的 Model () 动态填充。目的是为了能够隐藏 individual 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")
}

编辑器模板：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" />

虽然 div 和脚本只引用直接输入的内容。

如何根据radiobutton动态隐藏“Sub_Text”div以这种方式嵌套？

如果有一种方法可以在不为每个 EditorFor 广播组输入脚本的情况下执行此操作，那会更好，但欢迎所有解决方案。

Answer 1

将 EditorTemplate 生成的 html 包装在容器中，以便您可以使用相对选择器

@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();
    }
});

旁注：如果您的 QuestionModel.cshtml 在 /Views/Shared/EditorTemplates 或 /Views/yourControllerName/EditorTemplates 文件夹中（应该是），那么 _Reporting.cshtml 中的代码应该只是

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

不需要循环。 EditorFor() 接受 IEnumerable<T> 并为集合中的每个项目生成正确的 html。

MVC 5 Razor 视图模板将隐藏脚本绑定到模型单选按钮

MVC 5 Razor view template binding hide script to a model radiobutton

javascript

model

editorfor

razor

asp.net-mvc-5