在我的頁面上我有一個圖像傳送帶。每個圖像拼貼是由圖像和產品數據組成的部分視圖。因此,旋轉木馬實際上是充滿部分意見,這是從父部分視圖通過循環加載...ajax應該發佈循環加載的部分視圖的當前索引
當我選擇圖像添加到購物車我使用ajax發佈到控制器,這個工程。
問題是,ajax腳本正在爲模型中的每個產品加載一次,即對於for循環的每次迭代以及模型中的每個產品...腳本加載的結果是每個產品都加載到購物車...這裏是一些代碼
母公司部分
foreach (var p in Model)
{
<div id="view-option">
@Html.Partial("../Product/_ProductTitleHome", p)
</div>
}
孩子局部有多個輸入
<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只執行被點擊的項目(項目的索引)。
請幫忙
當jquery構建dataObj時,它似乎只抓取來自第一個局部視圖的數據,而不管哪個元素被點擊。 – tony