Ajax sollte aktuellen Index der Teilansicht von loop geladen

Question

Auf meiner Seite habe ich ein Karussell von Bildern. Jede Bildkachel ist eine Teilansicht, die aus den Bild- und Produktdaten besteht. Also das Karussell ist tatsächlich voll von Teilansichten, die von einer übergeordneten Teilansicht über Schleife geladen wird ...

wenn ich ein Bild auswählen, um in den Warenkorb hinzuzufügen, verwende ich Ajax, um auf den Controller zu posten und das funktioniert.

Das Problem ist, dass das Ajax-Skript einmal für jedes Produkt im Modell geladen wird, dh für die Iteration der for-Schleife und für jedes Produkt im Modell ... das Skript wird geladen, so dass jedes Produkt in den Warenkorb geladen wird ... hier ist ein Code

Elternteil

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

Kind teilweise ein Formular mit mehreren Eingängen

    <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> 

und der ajax-Aufruf hat dies ist

$('#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'); }, }); } });

so wieder ... wenn ich auf einem Bild Kachel klicken, um es den Warenkorb hinzugefügt wird die Ajax so oft ausführen, wie es in dem Modell ... und wieder ist dies, weil Dieser Teil wird über die Schleife geladen ...

Also muss ich einen Weg finden, Ajax nur ausführen für das Element (der Index des Elements), die geklickt wurde.

Bitte helfen

Answer 1

Das Problem war die Teilansicht. Jedes Bild war in einer Teilansicht und für alle Bilder, die in den Slider geladen wurden ... die Teilansicht geladen und das Ajax jedes Mal ausgeführt ... also war die Lösung, den Code aus der Teilansicht zu ziehen und eine Ebene nach oben zu gehen Elternansicht ... fügen Sie den Code ein und das Problem wurde gelöst. Alle geladenen Bilder und der Ajax wurden nur einmal ausgelöst, da die übergeordnete Ansicht nur einmal geladen wurde.