购物车未添加正确数量 EF 6 MVC 5答案

【问题标题】：Cart not adding correct quantity EF 6 MVC 5购物车未添加正确数量 EF 6 MVC 5
【发布时间】：2015-07-25 17:43:25
【问题描述】：

我知道我最近问了很多问题，对此我深表歉意，我正在学习 MVC 的来龙去脉。无论如何，当我选择一个数量并点击添加到购物车时，它不会添加我选择的数量，就像它只是抓取一个随机数并添加它一样。这是视图的代码：

 @model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>

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

<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.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"></div>
<p class="button">
    @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))
{
    <div id="container">
        <div class="scroll">

            @foreach (var item in Model)
            {
                <div class="scroll">
                    <div class="itemcontainer">
                        <table>
                            <tr>
                                <td id="@item.Id">
                                    <div class="DetailsLink"> &nbsp;&nbsp;&nbsp;@Html.ActionLink(@item.Name, "Details", new { id = item.Id })</div>
                                    <br />
                                    <div id="@item.Id"></div>
                                    <div class="divPrice" id="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
                                    <div class="divImg"><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 { @id = "quantity", @style = "width:50px;", @class = "formTextBox" })</div>
                                    <div class="divAddToCart">
                                        <p class="button">
                                            @Html.ActionLink("Add to cart", "AddToCart", "Orders", new { id = item.Id }, new { @class = "AddToCart" })
                                        </p>
                                    </div>
                                    <div style="height:15px;"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                    }
                    <div class="button">@Html.ActionLink("Back To Categories","Categories")</div>
                    <br />
       </div>        
    </div>
}
@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
                });
            });
    </script>
}

这是我的控制器中 AddToCart 的代码：

// GET: /Orders/AddToCart/5
public ActionResult AddToCart(int id)
{
    // Retrieve the product from the database
    var productAdded = db.Products
        .Single(p => p.ProductId == id);

    // Add it to the shopping cart
    var cart = ShoppingCart.GetCart(this.HttpContext);

    cart.AddToCart(productAdded);

    // Go back to the main store page for more shopping
    return RedirectToAction("Index");
}

最后是 ShoppingCart 模型中的 AddToCart 代码：

 public void AddToCart(Product item)
    {
        // Get the matching cart and product instances
        var order = entities.Orders.FirstOrDefault(
            c => c.OrderGUID == ShoppingCartId
            && c.OrderItems.Where(p=>p.ProductId == item.ProductId).FirstOrDefault().ProductId == item.ProductId);

        if (order == null)
        {
            // Create a new order since one doesn't already exist
            order = new Order
            {
                InvoiceNumber = Guid.NewGuid().ToString(),
                OrderDate=DateTime.Now,
                OrderGUID = ShoppingCartId,
                IsShipped = false
            };
            entities.Orders.Add(order);

            // Save changes
            entities.SaveChanges();

            //add the OrderItem for the new order
            OrderItem oi = new OrderItem()
            {
                OrderId = order.OrderId,
                OrderGUID = ShoppingCartId,
                ProductId = item.ProductId,
                ProductQuantity = item.Quantity,
                ProductPrice = item.ProductPrice
            };

            entities.OrderItems.Add(oi);
            entities.SaveChanges();
        }
        else
        {
            // If the item does exist in the cart, 
            // then add one to the quantity
            order.OrderItems.Where(p => p.ProductId == item.ProductId).FirstOrDefault().ProductQuantity++;
            entities.SaveChanges();
        }            
    }

DisplayProductsViewModel的代码：

使用 AccessorizeForLess.Data;

using System.ComponentModel.DataAnnotations;

namespace AccessorizeForLess.ViewModels
{
    public class DisplayProductsViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        [DisplayFormat(DataFormatString = "{0:C}")]
        public decimal? Price { get; set; }
        public ProductImage Image { get; set; }

        public int ProductQuantity { get; set; }
    }
}

谁能看到我做错了什么

编辑

这是我在使用调试工具时看到的

编辑 '这是添加了提交按钮的新视图

@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"></div>
<p class="button">
    @Html.ActionLink("Create New", "Create")
</p>
@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))
{
    <div id="container">
        <div class="scroll">

            @foreach (var item in Model)
            {
                <div class="scroll2">
                    <div class="itemcontainer">
                        <table>
                            <tr>
                                <td id="@item.Id">
                                    <div class="DetailsLink"> &nbsp;&nbsp;&nbsp;@Html.ActionLink(@item.Name, "Details", new { id = item.Id })</div>
                                    <br />
                                    <div id="@item.Id"></div>
                                    <div class="divPrice" id="@item.Price">@Html.DisplayFor(modelItem => item.Price)</div>
                                    <div class="divImg"><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 { @id = "quantity", @style = "width:50px;", @class = "formTextBox" })</div>
                                    <div class="divAddToCart">
                                        <input type="submit" value="Add To Cart" class="btn btn-default" /> @*@Html.ActionLink("Add to cart", "AddToCart", "Orders", new { id = item.Id }, new { @class = "AddToCart" })*@

                                    </div>
                                    <div style="height:15px;"></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                    }
                    <div class="button">@Html.ActionLink("Back To Categories","Categories")</div>
                    <br />
       </div>        
    </div>
}
@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
                });

                // Document.ready -> link up remove event handler
                //$(".AddToCart").click(function () {
                //    alert('Clicked!');
                //});
            //s});
    </script>
}

还有AddToCart

[HttpPost]
public ActionResult AddToCart(DisplayProductDetailsViewModel model)
{
    // Retrieve the product from the database
    var productAdded = db.Products
        .Single(p => p.ProductId == model.Id);

    // Add it to the shopping cart
    var cart = ShoppingCart.GetCart(this.HttpContext);

    cart.AddToCart(productAdded);

    // Go back to the main store page for more shopping
    return RedirectToAction("Index");
}

当我在 AddToCart 模型中设置断点时始终为空，我在这里缺少什么？

【问题讨论】：

当您在此运行调试器时，item.Quantity 对吗？ POST AddToCart 的网络请求向您显示了什么？
另外，GET AddToCart 可以被浏览器缓存。你应该做一个 POST。
@Jasen item.Quantity 始终为 1（我逐步完成），就好像它没有从视图中的文本框中获取值
好的，现在网络请求是否反映了表单中输入的内容？
@Jasen 不，我输入的数量始终为 1 并不重要

标签： asp.net-mvc-5 entity-framework-6

【解决方案1】：

您总是发送相同的数量，因为您总是触发仅传递查询字符串参数id 的 ActionLink 的 GET 请求。表单中的数量字段永远不会发送，因为这是 POST 表单正文提交的一部分。

// you are not triggering this submission: POST AddToCart
@using(Html.BeginForm("AddToCart", "Orders", FormMethod.Post))
{
    // quantity is passed on the request's body
    @Html.TextBoxFor(modelItem => item.Quantity)

    // but GET AddToCart/id is send instead
    @Html.ActionLink("Add to cart", "AddToCart", "Orders", new { id = item.Id }, new { @class = "AddToCart" })
}

如您的屏幕截图所示

Request URL: http://localhost:24177/Orders/AddToCart/21
Request Method: GET
Status Code: 302 Found

请注意您的请求中缺少“表单数据”或“请求正文”。

每次调用GET AddToCart 时，您都会从数据存储中查询相同的产品并将数量属性设置为相同的值。

您应该改为send this GET request as POST，因为：

可以被浏览器缓存，不会再向服务器
网络爬虫可以触发 ActionLink 请求

所以在您的表单中添加一个提交按钮并执行一个 POST 操作。然后确保从表单中分配一个新的数量。

[HttpPost]
public ActionResult AddToCart(FormModel model)
{
    var product = db.Products.Where(... && p => p.Id == model.ProductId);
    var quantity = model.ProductQuantity;

    cart.AddToCart(product, quantity);

    return RedirectToAction("Index");
}

【讨论】：

@Jansen 我正在努力追随你要去的地方，我真的在这里。我更改了视图并对 AddToCart 进行了一些更改，您可以查看最新的编辑并告诉我这里哪里出错了吗？
尝试不使用 foreach 循环的提交。然后确保模型属性名称与表单的输入名称匹配（使用呈现的 html 源进行验证）。
AddToCart中model的所有属性都是空的，甚至没有数量的属性。我检查了呈现的 HTML 并更改了我所有的属性 naes 以匹配视图中的 id，但仍然没有。
再一次，网络请求是否与您对服务器的期望相符？将输入 name 属性而不是 id 属性与模型属性匹配。
@Jansen 我想回到这个问题，感谢您在这个问题上为我提供的所有帮助。我想让你知道我是多么感激你花时间教我一些我不知道但现在知道的事情。客户决定走 AJAX 路线，但不要认为我不欣赏你和你教给我的东西。