Ajax ViewComponent 多次触发答案

【问题标题】：Ajax ViewComponent triggering multiple timesAjax ViewComponent 多次触发
【发布时间】：2018-03-17 22:35:51
【问题描述】：

我遇到了关于单击 Ajax 事件的问题，它多次触发控制器操作/视图组件。

我在点击按钮时使用 Ajax 来调用 Controller Action，它将一些数据插入到数据库中，然后重定向到 Controller Index action/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);
            }
        });
    });

购物车控制器：

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

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

CartViewComponent ~ "购物车":

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

我将我的 JS 文件加载到共享的 _Layout.cshtml 中。我确实使用了一个 PartialView，从那里点击了 Add to Cart 按钮，但我认为这没关系，或者这是否会导致这个问题？

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

谢谢！

【问题讨论】：

我认为您以某种方式将多个点击事件添加到同一个元素。我建议在向元素添加新的点击事件之前清除事件。您可以在单击事件之前使用 .off() 。这将删除所有点击事件并确保您只添加一个。这通常发生在单页应用程序中
最后，我发现一位同事加载了一个脚本，该脚本与我的冲突并正在添加重复事件。您的评论帮助我解决了这个问题，还找到了一些错误的代码，如果您写了一个答案，我很乐意接受，谢谢 Maistrenko Vitalii！
很高兴它为您提供了解决方案的提示 :) 我将复制并粘贴我的评论作为答案，以便您关闭此问题

标签： javascript jquery asp.net ajax asp.net-core-viewcomponent

【解决方案1】：

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

【讨论】：