2016-09-16 46 views
0

在我的頁面上我有一個圖像傳送帶。每個圖像拼貼是由圖像和產品數據組成的部分視圖。因此,旋轉木馬實際上是充滿部分意見,這是從父部分視圖通過循環加載...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只執行被點擊的項目(項目的索​​引)。

請幫忙

+0

當jquery構建dataObj時,它似乎只抓取來自第一個局部視圖的數據,而不管哪個元素被點擊。 – tony

回答

-1

問題是局部視圖。每個圖像都是局部視圖,並且所有圖像都加載到滑塊中......加載了部分視圖,並且每次都執行Ajax ...所以解決方案是將代碼從局部視圖中拉出,然後向上一級父視圖...插入代碼並解決了問題。所有加載的圖像和Ajax僅觸發一次,因爲父視圖只加載一次。