编辑器模板上的 Javascript

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

部分 View 中不支持部分，这​​对您来说很幸运，否则您将在 jqueryval 中添加每个脚本的多个内联副本 bundle 以及您自己的脚本(每次添加模板时一个)。

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

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

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

模板中的 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" )