MVC 3:如何在选择下拉列表项时更新复选框列表
本文关键字:更新 复选框 列表 下拉列表 选择 MVC | 更新日期: 2023-09-27 18:30:35
在过去的两天里,我试图弄清楚当在 JavaScript 的帮助下选择下拉列表中的新项目时如何动态更新复选框列表。
一周前我做了同样的事情,我应该从下拉列表更新到下拉列表。
到目前为止,我得到了什么:
视图
@using (Html.BeginForm())
{
@Html.DropDownListFor(x => x.User, (IEnumerable<SelectListItem>)Model.UserList, "-- vælg bruger --")
if (Model.checkboxlist != null)
{
for (var i = 0; i < Model.checkboxlist.Count; i++)
{
<div class="editor-label">
@Html.CheckBoxFor(c => Model.checkboxlist[i].check)
@Html.LabelFor(c => Model.checkboxlist[i].Id, Model.checkboxlist[i].Id)
@Html.HiddenFor(c => Model.checkboxlist[i].Id)
</div>
}
}
}
<script type="text/javascript">
$('#User').change(function () {
alert('HEJ!');
var selectedUser = $(this).val();
alert(selectedUser);
if (selectedUser != null && selectedUser != '-- vælg bruger --' && selectedUser != '') {
$.getJSON('@Url.Action("getPdfCheckBoxList","Admin")', { username: selectedUser },
function (employee) {
var checkboxlist = $('#checkboxlist');
checkboxlist.empty();
$.each(employee, function (index, employee) {
checkboxlist.append($('<checkbox/>', {
checked = 'false'
}));
});
});
}
});
</script>
当我加载视图模型时,复选框列表为空,因为我不会返回任何内容来建模下拉列表项。
控制器操作 :
public ActionResult getPdfCheckBoxList(String username)
{
MethodService service = new MethodService();
var list = new List<PDFCheckBoxList>();
foreach (var pdfCheckBoxList in getPDFFileNames(username))
{
list.Add(new PDFCheckBoxList { check = false, Id = pdfCheckBoxList });
}
return Json(list, JsonRequestBehavior.AllowGet);
}
现在连警报("HEJ")都没有被解雇,我根本想不通为什么......请帮忙?
您可以使用分部视图,并让控制器操作返回分部并在服务器上构建标记,而不是在客户端上执行此操作:
@using (Html.BeginForm())
{
@Html.DropDownListFor(
x => x.User,
Model.UserList,
"-- vælg bruger --",
data_url = Url.Action("getPdfCheckBoxList", "Admin")
)
<div id="checkboxlist">
@if (Model.checkboxlist != null)
{
@Html.Partial("_checkboxlist", Model.checkboxlist)
}
</div>
}
然后定义_checkboxlist.cshtml
:
@model IEnumerable<PDFCheckBoxList>
@{
ViewData.TemplateInfo.HtmlFieldPrefix = "checkboxlist";
}
@Html.EditorForModel()
最后是编辑器模板~/Views/Shared/EditorTemplates/PDFCheckBoxList.cshtml
,它将为每个元素呈现:
@model PDFCheckBoxList
<div class="editor-label">
@Html.CheckBoxFor(c => c.check)
@Html.LabelFor(c => c.Id, Model.Id)
@Html.HiddenFor(c => c.Id)
</div>
现在你可以像这样修改你的JavaScript:
<script type="text/javascript">
// Now that we no longer have any server side
// code here we could externalize this script
// into a separate javascript file
$('#User').change(function () {
if (selectedUser != null && selectedUser != '') {
var selectedUser = $(this).val();
var url = $(this).data('url');
var data = { username: selectedUser };
$('#checkboxlist').load(url, data);
}
});
</script>
最后是你的getPdfCheckBoxList
动作:
public ActionResult getPdfCheckBoxList(String username)
{
var service = new MethodService();
var list = getPDFFileNames(username)
.Select(x => new PDFCheckBoxList
{
check = false,
Id = x
})
.ToList();
return PartialView("_checkboxlist", list);
}
如果你想在客户端上构建标记并让控制器操作返回JSON,我建议你使用一些javascript模板框架。
>要么选择器错误"#User"
,要么该ID在同一页面上多次使用
从浏览器查看生成的页面源代码,并查找 <select>
元素是否具有 id="User"
或有多个 ID 等于 "User"