JQuery-无法访问多个视图元素的数据

问题背景：

我有一个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>

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

这方面的任何帮助都会很好

编辑-2015年2月12日

视图现在通过for循环生成面板-当前设置为9，这是我希望在视图上显示的项目数：

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

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

---

首先，您应该使用loop来显示您的产品（不要给元素一个

id

属性，因为这会生成无效的html）

你发布的方法是

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

---

您正在生成具有重复

id

属性的无效html

$（“#productId”）.val（）

将始终使用

id=“productId”

返回第一个元素的值。删除

id

属性（改为使用类名），并使用选择器获取值，该选择器可获取与单击按钮相关的元素。@StephenMuecke感谢您的回复。我删除了

id

属性，并添加了类名。在我的JQuery中，我仍在调用此函数，并尝试使用以下函数使用

.prodName

选择器-

var productName=$（“.prodName”）.text（）获取数据

这再次为我提供了视图中带有

.test

类名的所有数据。当您说“获取与单击按钮相关的元素”时，您能详细说明一下吗？当您单击其中一个值为“添加到购物车”的按钮时，是否要触发此操作？有点难理解为什么你不只是在循环中生成html而不是重复3次，为什么你甚至有隐藏的输入。还有，为什么你要发回所有的数据-当然你只需要发回产品ID（通常你也会发回数量，但你似乎没有任何输入）@StephenMuecke这纯粹是一个测试，我可以——在其他视图中也可以——将产品项对象列表从我的控制器发送到视图，然后使用for循环构建面板。您是对的，我希望每次单击“AddToCart”按钮时调用都会触发。在发布所有数据方面，是的，我可以只发布ID，然后在controller方法中查询产品项的DB，然后将其添加到我的后端购物车对象中，但我认为由于我已经准备好了视图中的数据，所以我会将其发回。非常感谢您的示例。我已经对我的视图进行了更改，但问题仍然存在，第一个产品ID将从模型传递到购物车。我已经更新了我的问题以显示我的更改。这是因为您按钮总是使用

数据ID=“@Model.ElementAt（0.ID）”将ID设置为
1
（应该是
@Model.ElementAt（I）.ID
，或者更简单地说
@Model[I].ID
）畏缩！真不敢相信我错过了！将所有其他元素更改为
i
条的值！非常感谢您在这方面的时间，斯蒂芬！
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);
}