Question

我正在构建一个购物车，我有一个成功的方法，可以将项目添加到ShoppingCart。但是，要删除这些项目，我使用的Ajax调用不成功，并出现以下错误：

POST http://localhost:62745/ShoppingCart/RemoveFromCart 500 (Internal Server Error)

remove按钮链接应调用ShoppingCart控制器中的RemoveFromCart（）方法，接收Json对象并更新多个页面元素。我在这个论坛上尝试了一些建议，但他们没有帮助：http://mvcmusicstore.codeplex.com/discussions/244052

我也遵循本教程来构建购物车：https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions/mvc-music-store/mvc-music-store-part-8

这是购物车页面中的Javascript：

<script src="/Scripts/jquery-3.1.1.min.js"
        type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");
            if (recordToDelete != '') {
                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteId).text(data.ItemCount);
                        }
                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });
    });
</script>

删除链接将与第四个<td>列的ShoppingCart页面中的每个新项目一起显示：

 @foreach (var item in Model.CartItems)
    {
        <tr id="row-@item.RecordId">
            <td>
                @item.Product.Name
            </td>
            <td>
                @item.Product.Price
            </td>
            <td id="item-count-@item.RecordId">
                @item.Count
            </td>
            <td>
                <a href="#" class="RemoveLink" data-id="@item.RecordId">Remove</a>
            </td>
        </tr>
    }

以下是ShoppingCartController中应该在javascript中调用的RemoveFromCart方法：

// AJAX: /ShoppingCart/RemoveFromCart/5
        [HttpPost]
        public ActionResult RemoveFromCart(int id)
        {
            var cart = ShoppingCart.GetShoppingCart(this.HttpContext);
            var productName = db.Carts.Single(c => c.ProductId == id).Product.Name;

            int itemCount = cart.RemoveItemFromCart(id);

            var results = new ShoppingCartRemoveViewModel
            {
                Message = Server.HtmlEncode(productName) +
                    " has been removed from your shopping cart.",
                CartTotal = cart.GetTotal(),
                CartCount = cart.GetCount(),
                ItemCount = itemCount,
                DeleteId = id
            };

            return Json(results);
        }

Answer 1

看起来你正试图调用Action传递id作为post请求主体的一部分。如果您查看操作// AJAX: /ShoppingCart/RemoveFromCart/5上方的注释，您会看到路由器期望它成为网址的一部分。

尝试更改

$.post("/ShoppingCart/RemoveFromCart/", { "id": recordToDelete }

到

$.post("/ShoppingCart/RemoveFromCart/"+recordToDelete,

Answer 2

RemoveFromCart（）方法中存在错误。此方法接受Cart对象的RecordId参数，该参数是要删除的购物车项目的主键。我假设该方法的参数是cart表的ProductId属性：

var productName = db.Carts.Single(c => c.ProductId == id).Product.Name;

我将c.ProductId更改为c.RecordId，因为它是Cart表的主键，它允许我从正在删除的购物车项目中获取产品名称。

Ajax发布到控制器操作会在Chrome控制台中出现“500（内部服务器错误）”错误

2 个答案: