Question

问题背景：

我有一个MVC应用程序，其视图包含3个面板。在每个相应的Panel中，单个按钮在单击时需要将Panel中传递的Model对象的数据集传递给名为＆＃39; AddToCart＆＃39;的控制器上的方法。

问题：

以下是视图的代码：

   <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个面板上的按钮，第一个面板中的模型数据集总是被发送到控制器＆＃39; AddToCart＆＃39;方法

我尝试了以下但是这不起作用：

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

任何帮助都会很棒。

编辑 - 2015年2月12日

立即查看通过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 Button点击：

我已删除了将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) { ...
});

你的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);
}

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

1 个答案: