场景是我基本上试图创建4个下拉列表,当一个更改时重新填充。过滤器Aka相互层叠。
所以我决定把它放在一个Ajax调用中。基本上,它需要参数,决定应该返回哪些选择列表。然后用新的下拉列表替换旧的4个下拉列表。 (用新的部分替换当前部分)
除了,由于某种原因,我得到它一次调用控制器..然后两次..然后4次..等等,好像旧的没有被删除/替换。只是隐藏了吗?..
在视觉上,我看到了我的期望。下拉菜单会更改选择选项。
下面是代码。 (p.s.抱歉,如果一些变量名称是拼写错误,它们已被更改为在此处发布)
控制器:
public class Filter
{
public IEnumerable<SelectListItem> List1;
public IEnumerable<SelectListItem> List2;
public IEnumerable<SelectListItem> List3;
public IEnumerable<SelectListItem> List4;
}
public ActionResult GlobalFilter(String l1, String l2, String l3, String l4)
{
Filter filter = new Filter();
filter.List1 = ...selectList
filter.List2 = ...selectList
filter.List3 = ...selectList
filter.List4 = ...selectList
return PartialView(filter);
}
观点:
<div id="filterPartial">
@Html.Action("GlobalFilter", "Header")
</div>
局部视图:
@model ns.Controllers.HeaderController.Filter
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
@using (Ajax.BeginForm("GlobalFilter", "Header", new AjaxOptions { UpdateTargetId = "filterPartial" }))
{
@Html.DropDownList("l1", Model.List1, new { })
@Html.DropDownList("l2", Model.List2, new { })
@Html.DropDownList("l3", Model.List3, new { })
@Html.DropDownList("l4", Model.List4, new { })
}
<script type="text/javascript">
$('#l1').change(function () {
$(this).parents('form').submit();
});
</script>