Question

在我的页面上，我有一个图像旋转木马。每个图像区块是由图像和产品数据组成的局部视图。因此，轮播实际上充满了部分视图，这些视图是通过循环从父部分视图加载的......

当我选择要添加到购物车的图片时，我使用ajax发布到控制器，这是有效的。

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

父部分

    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应该发布循环加载的局部视图的当前索引

1 个答案: