JQuery的 - 無法訪問多個視圖元素

Question

問題背景的數據：

我有，其具有包含3個面板的視圖的MVC應用程序。在每個面板中都有一個按鈕，單擊按鈕時需要將面板中傳遞的Model對象的數據集傳遞給名爲「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> 

的問題是，它物質dosent予壓在3個面板模型數據中的第一面板中設置的按鈕總是發送給控制器的AddToCart方法。

我嘗試以下，但這並沒有工作：

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

任何幫助，這將是巨大的。

編輯 - 2015年12月2日

立即查看通過生成面板for循環 - 目前設定爲9這就是我要多少項目顯示在視圖：

<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的按鈕點擊：

我已經刪除了邏輯的ID居然張貼到控制器上的AddToCart方法這樣我就可以檢查ID的時候按鈕被點擊。

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

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

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

Answer 1

首先，應該使用循環來顯示您的產品（和不給你元素的id屬性，因爲產生的無效的html）

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

注產品ID值已被加入到該按鈕作爲data-屬性。請注意，您可以添加其他屬性data-productprice = "@product.ProductPrice"但由於您已經呈現了這些值，您還可以使用相對選擇器訪問這些值（似乎沒有多少意義重複它們）。無論如何，其唯一的產品ID無論如何都應該被髮回（通常是指示所需數量的文本框的值）。

然後處理按鈕

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) { ... 
}); 

的單擊事件並在發佈的方法是

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