Question

我已经在这里待了几天，我知道问题是什么（我相信）但是我找不到解决问题的方法，所以我转向你。在我的产品列表中，我遍历我的模型来填充页面，每个项目都有一个添加按钮，用于添加到购物车，无论我选择哪种产品，它总是添加列表中的第一件事。

我的AJAX之所以有效，是因为它确实会像我想的那样添加到我的购物车中，但它从未添加我选择的确切项目，始终是列表中的第一项。所以我可能会错过一个循环，循环查看哪个按钮被点击，这是偶数可能还是必要的？这是我的观点中的代码：

@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>

@{
    ViewBag.Title = "Products > Necklaces";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.fancybox.css?v=2.1.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-buttons.css?v=1.0.5" rel="stylesheet" />
<link href="~/Content/jquery.fancybox-thumbs.css?v=1.0.7" rel="stylesheet" />
<h2>Products > Necklaces</h2>
<div id="update-message">&nbsp;</div>
<p class="button">
    @Html.ActionLink("Create New", "Create")
</p>
    <div id="container">
        <div id="sending" style="display:none;"><img src="~/Content/ajax-loader.gif" /></div>
        <div style="color:red" id="ItemAdded"></div>
        <div class="scroll">

            @foreach (var item in Model)
            {
                <div class="scroll2">
                    <div class="itemcontainer">
                        <table>
                            <tr>
                                <td id="@item.Id" class="divId">
                                    <div clss="divCategory" id="Necklces"></div>
                                    <div class="DetailsLink" data-id="@item.Id"> &nbsp;&nbsp;&nbsp;@Html.ActionLink(item.Name, "ShowDetails", "Products", new { id = item.Id }, new { @class = "iframe" })</div>
                                    <br />
                                    <div id="@item.Id"></div>
                                    <div class="divPrice" data-price="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
                                    <div class="divImg" data-image="@item.Image.ImagePath"><a class="fancybox-thumbs" href="@item.Image.ImagePath" title="@item.Image.AltText" data-fancybox-group="thumb"><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" /></a></div>
                                    <div>&nbsp;</div>
                                    <div class="divQuantity">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @style = "width:50px;", @class = "formTextBox quantity" })</div>
                                    <div class="form-group">
                                        <div class="col-md-offset-2 col-md-10">
                                            <input type="button" value="AddToCart" class="btn btn-default AddToCart" />
                                        </div>
                                    </div>
                                    <div style="height:15px;"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                    }
                    <div class="button">@Html.ActionLink("Back To Categories","Categories")</div>
                    <br />
       </div>        
    </div>

这是我的AJAX

@section scripts {
    <script src="~/Scripts/jQuery-jScroll.js"></script>
    <script src="~/Scripts/jquery.fancybox.js?v=2.1.5"></script>
    <script src="~/Scripts/jquery.fancybox-thumbs.js?v=1.0.7"></script>
    <script src="~/Scripts/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript">
            //$(function () {
            //    $('.scroll').jscroll({
            //        autoTrigger: true
            //    });
                $('.fancybox-thumbs').fancybox({
                    prevEffect: 'none',
                    nextEffect: 'none',

                    closeBtn: true,
                    arrows: false,
                    nextClick: false
                });

                $(".iframe").fancybox({
                    type: 'iframe'
                });

                // Document.ready -> link up remove event handler
                $(".AddToCart").click(function () {
                    $("#sending").css("display", "block");
                    $("#ItemAdded").text("");
                    //first disable the button to prevent double clicks
                    $(this).prop("disbled", true).prop("value", "Adding...");

                    var td = $(this).closest('td')

                    //traverse DOM and find relevant element 
                    var price = $('.divPrice').data("price"),
                        quantity = parseInt(td.find(".quantity").val()),
                        id = $('.DetailsLink').data('id'),
                        category = td.find(".divCategory").val(),
                        path = $(".divImg").data("image");

                    $.ajax({
                        url: "@Url.Action("AddToCartAJAX", "Orders")",
                        type: "POST",
                        data: { "id": id, "quantity": quantity, "price": price, "category": category, "path": path },
                        //if successful
                        success: function (result) {
                            successfulCall(result)
                        },
                        error: function (data) {
                            errorCall(data);
                        }
                    });

                    function successfulCall(result) {
                        //enable the send button
                        $(".AddToCart").attr("disbled", false);

                        //hide the sending gif
                        $("#sending").css("display", "none");

                        //change the text on the button back to Send
                        $(".AddToCart").prop("value", "Add to Cart");

                        //display the successful message
                        $("#ItemAdded").html("<p class='itemAdded'><strong>" + result.Name + "</strong> has been added to your order.</p>");

                        //clear out all the values
                        $("input#quantity").val("0");

                        window.location.href = result.Url;
                    }

                    function errorCall(data) {
                        $(".AddToCart").attr("disbled", false);
                        $(".AddToCart").prop("value", "Add to Cart");
                        $("#sending").css("display", "none");
                        $("#ItemAdded").text(data.message);
                    }
                    //alert('Clicked!');
                });
            //s});
    </script>
}

如果我需要显示我的添加到购物车的方法让我知道，有人可以帮我解决这个问题吗？

Answer 1

您需要引用与所点击的按钮位于同一td的元素。

所以改变

var price = $('.divPrice').data("price"),
quantity = parseInt(td.find(".quantity").val()),
id = $('.DetailsLink').data('id'),
category = td.find(".divCategory").val(),
path = $(".divImg").data("image");

到

var price = td.find('.divPrice').data("price"),
quantity = parseInt(td.find(".quantity").val()),
id = td.find('.DetailsLink').data('id'),
category = td.find(".divCategory").val(),                        
path = td.find(".divImg").data("image");

始终将列表中的第一项添加到购物车EF 6，MVC 5＆amp; jQuery的

1 个答案: