Ajax.Begin 表单未呈现正确的操作.NET mvc4

Question

我的 Ajax 表单遇到了一个奇怪的问题。当用户单击添加到购物车按钮时，我正在尝试发布到我的购物车控制器。我只是想从隐藏字段中发布产品 ID，并返回一个字符串并使用失败消息成功更新一个 div。我认为以下 Razor 标记...

@using (Ajax.BeginForm("AddToCart", "Carts", new AjaxOptions { OnSuccess="OnSuccess", HttpMethod="Post", Url="/Carts/AddToCart/"  }, new { @style = "display:inline-block"}))
        {
            @Html.HiddenFor(model => model.Product_ID)
            <input type="submit" class="button round large primary" value="Add To Cart" />
        }

在我的购物车控制器中，我将以下代码添加到购物车，并返回一个字符串，我可以使用 javascript 更新我想要显示消息的 div 或让框架为我处理。

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult AddToCart(int product_ID)
        {
            if (db.Products.Any(product => product.Product_ID == product_ID))
            {
                //var successfulAddToCart = false;
                var cartItem = new Cart();

               // cartItem.CartID = Guid.NewGuid();

                if (Request.IsAuthenticated)
                {
                    cartItem.Customer = db.Customers.FirstOrDefault(customer => customer.Email == User.Identity.Name);
                }                    
                else//not logged in, need to remember them somehow
                {

                    var CartCookie = new HttpCookie("CartID", Guid.NewGuid().ToString());
                    CartCookie.Expires.AddDays(2);
                    Request.Cookies.Add(CartCookie);
                    cartItem.Customer = new Customer();
                }


                cartItem.IsCheckedOut = false;
                cartItem.Quantity = 1;
                cartItem.Sku = db.SKU_Table.FirstOrDefault(sku => sku.Product_ID == product_ID);

                db.Cart.Add(cartItem);
                db.SaveChanges();


                return Content("Add to cart was successful");
            }
            else
                return Content("Add to cart was not successful");


        }

现在我遇到的主要问题是表单正在以错误的操作呈现。这是在 html 中呈现的内容。

现在我不知道在 MVC 中执行此操作的正确方法是什么，因为我对框架有点陌生，但如果有更好的方法，我想避免在 javascript 中进行 AJAX 调用。我不确定 dom 上的操作不正确导致事故的原因是什么。我怀疑它与我的 route.config 文件有关，就好像我更改了文件中的顺序或路由一样，它们会对操作的结果产生影响。如果相关，我可以在更新中发布它，但我想我会把它扔给 Stack Overflow 专家。谢谢。

Answer 1

您使用了错误的重载，其中第二个参数是路由值，这就是您得到 ....?Length=5 的原因（string 有一个名为 Length 的属性，并且 'Carts' 中有 5 个字符）。使用this overload（并删除不必要的Url选项）

@using (Ajax.BeginForm("AddToCart", "Carts", new { product_ID = Model.Product_ID }, 
    new AjaxOptions { OnSuccess="OnSuccess", HttpMethod="Post" }, 
    new { @style = "display:inline-block"}))
{
    <input type="submit" class="button round large primary" value="Add To Cart" />
}

另请注意，您不需要 Product_ID 的隐藏输入，因为它已作为路由/查询字符串值添加。

还要注意默认的HttpMethod 是"Post"，因此不需要添加该选项。