C# 一次触发多次的ajax调用

这个场景是，我基本上尝试创建4个下拉列表，当其中一个被更改时重新填充。也就是说，过滤器之间是级联的

所以我决定把它放在一个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);
    }

公共类过滤器
{
公共IEnumerable列表1；
公共IEnumerable列表2；
公共IEnumerable列表3；
公共IEnumerable列表4；
}
public ActionResult全局过滤器（字符串l1、字符串l2、字符串l3、字符串l4）
{
过滤器=新过滤器（）；
filter.List1=…selectList
filter.List2=…selectList
filter.List3=…selectList
filter.List4=…selectList
返回部分视图（过滤器）；
}

视图：

    <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>

@model ns.Controllers.HeaderController.Filter
@使用（Ajax.BeginForm（“GlobalFilter”、“Header”、新的AjaxOptions{UpdateTargetId=“filterPartial”}））
{ 
@Html.DropDownList（“l1”，Model.List1，new{}）
@Html.DropDownList（“l2”，Model.List2，new{}）
@Html.DropDownList（“l3”，Model.List3，新{}）
@Html.DropDownList（“l4”，Model.List4，new{}）
}
$（'#l1'）。更改（函数（）{
$（this.parents（'form'）.submit（）；
});

将此文件移到您的部分文件之外：

<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>

$（'filterPartial'）。关于（'change'，'l1'，函数（）{
$（this）.closest（'form'）.submit（）；
});

通过将更改脚本移到外部并使用“开”，您不必担心每次都重新布线，也不必担心可能会多次触发。