Question

我有一个页面可以将结果添加到表单上的某个区域。我利用编辑器模板将结果分组到区域中，并允许从下拉列表中选择结果。我想为3种可能的结果中的两种显示一个可选的评论框。

主页如下：

@model DBS.ViewModels.OutcomeQuestionnaireVM

@{
ViewBag.Title = "Outcomes";
}

<h2>Add Outcomes</h2>
@if (Model.Error == true)
{
<h3 class="danger">You MUST select an outcome for at least 1 area.</h3>
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    @Html.HiddenFor(x => x.DebriefId)

    <hr />

    @Html.EditorFor(m => m.Groups, new { outcomes = Model.Outcomes })


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Next" class="btn btn-default" />
        </div>
    </div>
</div>
}

组编辑器模板是：

@model DBS.ViewModels.OutcomeQuestionGroupVM
@{
Layout = null;
} 

<h4>@Html.DisplayFor(m => m.Name)</h4>


@Html.EditorFor(m => m.Questions, new { outcomes = ViewData["outcomes"] })

结果的最终编辑器模板是：

@model DBS.ViewModels.OutcomeQuestionVM
@{
Layout = null;
}

<div class="form-group">
<div class="row">
    <div class="col-md-4">
        @Html.DisplayFor(m => m.Question)
    </div>
    <div class="col-md-4">
        @Html.HiddenFor(m => m.ID)
        @Html.DropDownListFor(m => m.OutcomeId,  (SelectList)ViewData["outcomes"], "Please Select if applicable", new { @class =  "form-control", @id = "OutcomeId" })
        @Html.ValidationMessageFor(m => m.OutcomeId, "", new { @class = "text-danger" })
    </div>
    <div class="col-md-4" id="Comments">
        @Html.HiddenFor(m => m.Comments)
        @Html.TextAreaFor(model => Model.Comments, htmlAttributes: new {   @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Comments, "", new { @class = "text-  danger" })
    </div>
</div>
</div>


@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">

    $(document).ready(function ()
    {
        document.getElementById('Comments').hide;
    });

    $(function () {
        $(".DropChange").change(function () {
            var valone = $('#OutcomeId').val();

            if (valone == 1 || valone == 2)
            {
                $('#Comments').show();
            }
            else if (valone == 3)
            {
                $('#Comments').hide();
            }
            else
            {
                $('#Comments').hide();
            }
        });
    });
</script>
}

然而，javascript并没有做任何事情。

Answer 1

部分视图中不支持节，这在您的情况下是幸运的，或者您将在jqueryval包中添加每个脚本的多个内联副本以及您自己的脚本（每次添加模板时都会添加一个））。

由于id和new { id = "OutcomeId" }生成的重复<div class="col-md-4" id="Comments">属性，您也会生成无效的html，这意味着该脚本无论如何都不会有效。

您还在同一属性的textarea之前为Comments生成隐藏输入，这意味着在提交表单时，Comments的值将是初始值（由@Html.HiddenFor(m => m.Comments)）<textarea>的值将被忽略。

视图负责包含脚本，而不是部分脚本，因此将脚本移动到主视图（或布局）并使用类名和相对选择器。

模板中的html应为

<div class="row">
    <div class="col-md-4">
        @Html.DisplayFor(m => m.Question)
    </div>
    <div class="col-md-4">
        @Html.HiddenFor(m => m.ID)
        // add class name to handle the .change() event
        @Html.DropDownListFor(m => m.OutcomeId,  (SelectList)ViewData["outcomes"], "Please Select if applicable", new { @class =  "form-control outcome" })
        @Html.ValidationMessageFor(m => m.OutcomeId, "", new { @class = "text-danger" })
    </div>
    <div class="col-md-4" class="comments"> // use class name
        @Html.TextAreaFor(model => Model.Comments, htmlAttributes: new {   @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Comments, "", new { @class = "text-  danger" })
    </div>
</div>

然后包含css，最初隐藏所有评论

.comments {
    display: none;
}

和主视图中的脚本

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(".outcome").change(function () {
            var valone = $(this).val();
            // get the associated comment
            var comment = $(this).closest('.row').find('.comments');
            if (valone == 1 || valone == 2) {
                comment.show();
            } else {
                comment.hide();
            }
        });
    </script>
}

请注意，我不清楚$(".DropChange")指的是什么，但我认为它是您模板中的下拉列表（我给了class="outcome"）

编辑器模板上的Javascript

1 个答案: