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

Question

我运行遇到了 Ajax 表格的奇怪问题。当用户单击添加到购物车按钮时，我试图 post 到我的购物车控制器。我只是想 post 来自隐藏字段的产品 ID，和 return 一个字符串，并使用成功或失败消息更新 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" />
        }

在我的购物车控制器中，我将以下代码添加到购物车，return 一个字符串，我可以使用 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 中执行此操作的正确方法是什么，因为我对框架有点陌生，但我想避免在 [=] 中进行 AJAX 调用31=]如果有更好的方法。我不确定 dom 上的操作不正确导致事故的原因是什么。我怀疑它与我的 route.config 文件有关，就好像我更改了文件中的顺序或路由一样，它们会对操作结果产生影响。如果相关，我可以在更新中 post 这个，但我想我会把它扔给 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 的隐藏输入，因为它已作为 route/query 字符串值添加。

另请注意，默认的 HttpMethod 是 "Post"，因此无需添加该选项。

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

Ajax.Begin form not rendering correct action .NET mvc4

ajax

asp.net-mvc

jquery

ajax.beginform

asp.net-mvc-4