ajax 应该 post 循环加载的局部视图的当前索引

Question

在我的页面上，我有一个图片轮播。每个图像块都是由图像和产品数据组成的局部视图。所以轮播实际上充满了部分视图，这些视图是通过循环从 parent 部分视图加载的...

当我 select 要将图像添加到购物车时，我使用 ajax 到 post 到控制器，这有效。

问题是 ajax 脚本为模型中的每个产品加载一次，即 for 循环的每次迭代和模型中的每个产品...脚本加载所以结果是每个产品加载到购物车中...这是一些代码

parent部分

    foreach (var p in Model)
{
    <div id="view-option">
        @Html.Partial("../Product/_ProductTitleHome", p)
    </div>
}

child partial 有一个包含多个输入的表单

                    <form id="addToCartForm" method="post" action="/Product/AddToCart">
                    <input type="hidden" name="ProductId" value="Model.ProductId" />
                    <input type="hidden" name="Sku" value="Model.Sku" />
                    <input type="hidden" name="Quantity" value="Model.MinQuantity" />
                    <input type="hidden" name="bundleItemsIds" value="Model.BundleItemsIds" />
                    <input type="hidden" name="SeoPageName" value="Model.SeoPageName" />
                     <button class="btn-card btn-add-cart red hvr-shadow" id="btn-addtocart-short" data-value="Model.ProductId"><i class="zf-cart"></i>ButtonAddToCart</button>
                    }
                </form>

并且 ajax 调用是这样的

$('#btn-addtocart-short').click(function (e) { event.currentTarget(); //var dataObj = $('#addToCartForm').serialize(); var dataObj = { ProductId: '@Model.ProductId', Sku: '@Model.Sku', Quantity: '@Model.MinQuantity', bundleItemsIds: '@Model.BundleItemsIds', SeoPageName: '@Model.SeoPageName' } if (dataObj != '') { $.ajax({ url: '/Product/AddToCart', type: "POST", data: dataObj, success: function (response) { alert('this worked'); }, }); } });

所以再次......如果我点击一个图像块将其添加到购物车 ajax 执行与模型中的产品一样多的时间......再次这是因为这部分通过循环加载...

所以我需要找到一种方法让 ajax 只对被点击的项目（项目的索引）执行。

请帮忙

Answer 1

问题是局部视图。每个图像都在局部视图中，并且对于加载到滑块中的所有图像...加载局部视图并且每次都执行 Ajax ...所以解决方案是将代码从局部视图中拉出并向上一级到父视图...插入代码，问题就解决了。所有图像都已加载并且 Ajax 仅触发一次，因为父视图仅加载一次。

ajax 应该 post 循环加载的局部视图的当前索引

ajax should post current index of partial view loaded by loop

ajax

foreach

post

partial-views