Ajax 调用一次触发多次

ajax call triggering multiple times at once

本文关键字：一次 Ajax 调用      更新时间：2023-09-26

情况是我基本上试图创建 4 个下拉列表，当一个被更改时会重新填充。又名过滤器是层叠的，彼此。

所以我决定把它放在Ajax电话中。基本上，它接受参数，决定应该返回哪些选择列表。然后用新的下拉列表替换旧的 4 个下拉列表。（用新的部分替换当前的部分）

除了，由于某种原因，我让它调用控制器一次......然后两次......然后是4次......等等。好像旧的没有被移除/更换。只是隐藏了?..

在视觉上，我看到了 Id 的期望。下拉列表会更改选择选项。

下面是代码。（附言抱歉，如果某些变量名称是错别字，它们已被更改以在此处发布）

控制器：

   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>

将其移出您的部分：

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

我还将更改脚本移到了部分之外，并将其更改为处理动态内容，如下所示：

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