我有一个页面可以将结果添加到表单上的区域。我利用编辑器模板将结果分组到各个区域,并允许从下拉列表中选择结果。我想为 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 不执行任何操作。
最佳答案
部分 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"
)
关于编辑器模板上的 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40918242/