ajax调用一次触发多次

Question

场景是我基本上试图创建4个下拉列表,当一个更改时重新填充.过滤器Aka相互层叠.

所以我决定把它放在一个Ajax调用中.基本上,它需要参数,决定应该返回哪些选择列表.然后用新的下拉列表替换旧的4个下拉列表.(用新部分替换当前部分)

除了,由于某种原因,我得到它一次调用控制器..然后两次..然后4次..等等,好像旧的没有被删除/更换.只是隐藏？..

在视觉上,我看到了我期待的东西.下拉菜单会更改选择选项.

下面是代码.(抱歉,如果某些变量名称是拼写错误,它们已在此处发布更改)

控制器:

   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>

Answer 1

把它移到你的部分之外:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

我还将更改脚本移动到partial之外,并将其更改为处理动态内容,如下所示:

<script type="text/javascript">
    $('#filterPartial').on('change', '#l1', function () {
        $(this).closest('form').submit();
    });
</script>