Question

我遇到点击式Ajax事件的问题，多次触发Controller动作/ ViewComponent。

我在单击按钮时使用Ajax来调用Controller Action，它将一些数据插入到数据库中，然后重定向到Controller Index操作/ ViewComponent。

每次单击该按钮时，都会触发越来越多的Ajax事件（插入重复数据）。

这是我的设置：

添加到购物车按钮：

<a asp-action="Add" asp-controller="Cart" asp-route-id="@x.ItemID" 
  ajax-call="y" ajax-res="cart" class="btn btn-info">Add to Cart</a>

JS：

 $("a[ajax-call='y']").click(function (event) {
        $(this).attr("ajax-call", "n");
        event.preventDefault();
        var urlCall = $(this).attr("href");
        var divRes = $(this).attr("ajax-res");

        $.ajax({
            type: "GET",
            url: urlCall ,
            async: true,
            success: function (data) {
                $("#" + divRes).html(data);
            }
        });
    });

CartController：

public IActionResult Index() => ViewComponent("Cart");

public IActionResult Add(int id)
{
    ... adds into db ...
    return RedirectToAction("Index");
}

CartViewComponent~“Cart”：

public IViewComponentResult Invoke()
{
    ... populates view model ...
    return View(Model);
}

我在共享_Layout.cshtml中加载我的JS文件。我确实使用了部分视图，其中点击了添加到购物车按钮，我认为没关系，或者是否会导致此问题？

我最近才开始学习ASP.NET，所以我希望我不会错过很简单的东西。

谢谢！

Answer 1

我认为你在某种程度上将多个点击事件添加到同一个元素中。我建议在向元素添加新的click事件之前清除事件。您可以在单击事件之前使用.off（）。这将删除所有点击事件，并确保您只添加一个。这通常发生在单页面应用程序中

Ajax ViewComponent多次触发

1 个答案: