JQuery - Невозможно получить доступ к данным нескольких Просмотров элементов

Question

Вопрос Справочной информации:

У меня есть приложение MVC, который имеет вид, содержащий 3 панель. В каждой соответствующей панели есть отдельная кнопка, которая при щелчке должна передать данные, переданные из переданного объекта модели в пределах Панели, методу на контроллере с именем «AddToCart».

Выпуск:

Вот код зрения:

<div class="row mePadding" id="features"> 
    <input id="productId" type="hidden" value="@Model.ElementAt(0).Id"> 
    <input id="productImage" type="hidden" value="@Model.ElementAt(0).ProductImage"> 
    <input id="productBrand" type="hidden" value="@Model.ElementAt(0).ProductBrand"> 
    <div class="col-sm-4 feature"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title boldFeatures" id="productName">@(Model.ElementAt(0).ProductName)</h3> 
      </div> 
      <div class="panel-body"> 
       <a href="@Url.Action("ProductDetail", "Product", new { id = @Model.ElementAt(0).Id })"><img src="~/Images/@(Model.ElementAt(0).ProductImage)" class="img-circle" id="featuresImages" alt="Work"></a> 
       <p>@(Model.ElementAt(0).ProductSummary)</p> 
       <p id="productPrice">@(Model.ElementAt(0).ProductPrice)</p> 

       <input class="btn btn-primary btn-block AddToCart" type="button" data-name="@Model.ElementAt(0).ProductName" data-price="@Model.ElementAt(0).ProductPrice" value="Add to Cart" id="addToCart" /> 

      </div> 
     </div> 
    </div> 
    <input id="productId" type="hidden" value="@Model.ElementAt(1).Id"> 
    <input id="productImage" type="hidden" value="@Model.ElementAt(1).ProductImage"> 
    <input id="productBrand" type="hidden" value="@Model.ElementAt(1).ProductBrand"> 
    <div class="col-sm-4 feature"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title boldFeatures" id="productName">@(Model.ElementAt(1).ProductName)</h3> 
      </div> 
      <div class="panel-body"> 
       <a href="@Url.Action("ProductDetail", "Product", new { id = @Model.ElementAt(1).Id })"><img src="~/Images/@(Model.ElementAt(1).ProductImage)" class="img-circle" id="featuresImages" alt="Work"></a> 
       <p>@(Model.ElementAt(1).ProductSummary)</p> 
       <p id="productPrice">@(Model.ElementAt(1).ProductPrice)</p> 

       <input class="btn btn-primary btn-block AddToCart" type="button" data-name="@Model.ElementAt(1).ProductName" data-price="@Model.ElementAt(1).ProductPrice" value="Add to Cart" id="addToCart" /> 

      </div> 
     </div> 
    </div> 
    <input id="productId" type="hidden" value="@Model.ElementAt(2).Id"> 
    <input id="productImage" type="hidden" value="@Model.ElementAt(2).ProductImage"> 
    <input id="productBrand" type="hidden" value="@Model.ElementAt(2).ProductBrand"> 
    <div class="col-sm-4 feature"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title boldFeatures" id="productName">@(Model.ElementAt(2).ProductName)</h3> 
      </div> 
      <div class="panel-body"> 
       <a href="@Url.Action("ProductDetail", "Product", new { id = @Model.ElementAt(2).Id })"><img src="~/Images/@(Model.ElementAt(2).ProductImage)" class="img-circle" id="featuresImages" alt="Work"></a> 
       <p>@(Model.ElementAt(2).ProductSummary)</p> 
       <p id="productPrice">@(Model.ElementAt(2).ProductPrice)</p> 

       <input class="btn btn-primary btn-block AddToCart" type="button" data-name="@Model.ElementAt(2).ProductName" data-price="@Model.ElementAt(2).ProductPrice" value="Add to Cart" id="addToCart" /> 

      </div> 
     </div> 
    </div> 
</div> 

<script> 

    $(this).click(function (e) { 

    $.ajax({ 
     url: '@Url.Action("AddToCart")', 
     type: 'POST', 
     data: { 
      "id": $('#productId').val(), 
      "name": $('#productName').text(), 
      "qty": "1", 
      "price": $('#productPrice').text(), 
      "brand": $('#productBrand').val(), 
      "image": $('#productImage').val() 
     } 
    }); 
    }); 
</script> 

Проблема заключается в том, что она доцент независимо от того, какую кнопку жму на 3 панели данных модели, установленные в первой панели всегда отправляется методу контроллера AddToCart.

Я попытался следующие, но это не сработало:

"id": $(this).get('#productId').val() 

Любая помощь с этим было бы здорово.

EDIT - 12/02/2015

View теперь генерирует панели через цикл - в настоящее время установлен в 9, как Thats, сколько элементов я хочу, отображаемых на представлении:

<div class="row mePadding" id="features"> 
    @for (int i = 0; i < 9; i++) 
    { 
     <div class="col-sm-4 feature"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3 class="panel-title boldFeatures">@(Model.ElementAt(i).ProductName)</h3> 
       </div> 
       <div class="panel-body"> 
        <a href="@Url.Action("ProductDetail", "Product", new { id = @Model.ElementAt(i).Id })"><img src="~/Images/@(Model.ElementAt(i).ProductImage)" class="img-circle" id="featuresImages" alt="Work"></a> 
        <p class="summary">@(Model.ElementAt(i).ProductSummary)</p> 
        <p class="price">@(Model.ElementAt(i).ProductPrice)</p> 

        <input class="btn btn-primary btn-block AddToCart" type="button" data-id="@Model.ElementAt(0).Id" value="Add to Cart" /> 

       </div> 
      </div> 
     </div> 
    } 
</div> 

JQuery Button click:

Я удалил логику, чтобы фактически отправить идентификатор на метод AddToCart на контроллере, поэтому я могу просто проверить идентификаторы, когда нажата кнопка.

<script> 
$(".AddToCart").click(function() { 

    var id = $(this).data('id'); 

    alert(id); 
}); 
</script> 

Answer 1

Во-первых, вы должны использовать цикл, чтобы отобразить вам продукты (и не дают вам элементы атрибут id как этот генерируемой недействительных HTML) значение продуктов ID была добавлена ​​кнопка

@foreach(var product in Model) 
{ 
    <div class="panel panel-default"> 
    <h3 class="panel-title boldFeatures">@product.ProductName</h3> 
    <a href="@Url.Action("ProductDetail", "Product", new { id = product.Id })">.....</a> 
    <p calss="summary">@product.ProductSummary)</p> 
    <p class="price">@product.ProductPrice)</p> 
    <input class="btn btn-primary btn-block AddToCart" type="button" data-id="product.ID" value="Add to Cart" /> 
    </div> 
} 

Примечание как атрибут data-. Обратите внимание, что вы можете добавить дополнительные свойства, например. data-productprice = "@product.ProductPrice", но поскольку вы уже отобразили эти значения, вы также можете получить к ним доступ с относительными селекторами (не похоже на то, что они дублируют их). В любом случае, его единственный идентификатор продукта, который должен быть отправлен обратно в любом случае (и обычно это значение из текстового поля, указывающего желаемое количество).

Затем обрабатывать событие нажатия кнопки

var url = '@Url.Action("AddToCart")'; 
$('.AddToCart').click(function() { 
    // Get the product ID 
    var id = $(this).data('id'); 
    // Could extract other values using above method or using relative selectors, for example 
    var price = $(this).closest('panel-default').find('.price').text(); 
    // Post back the product ID 
    $.post(url, { id: id }, function(data) { 
    // do something with the returned value? 
    }); 
    // or $.post(url, { id: id, price: price, etc }, function(data) { ... 
}); 

И POST метод будет

[HttpPost] 
public JsonResult AddToCart(int ID) // add other parameters as required 
{ 
    // Add the product to the cart 
    // Return something indicating success? 
    return Json(true); 
}