destructi6n destructi6n - 11 months ago 82
Ajax Question

Ajax.Begin form not rendering correct action .NET mvc4

I'm running into a bizarre issue with my Ajax form. I am trying to post to my cart controller when a user clicks an add to cart button. I simply want to post the product ID from a hidden field, and return a string and update a div with either a success of fail message. The following Razor markup is in my view...

@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" />

And in my cart controller, I have the following code to add to cart, and return a string that I can either use javascript to update the div that I want to display the message or have the framework handle for me.

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());
cartItem.Customer = new Customer();

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


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


Now the main problem that I'm running into is the form is being rendered with the wrong action. Here is what is rendered in html.

Rendered html of the markup

Now I don't know what the right way to do this in MVC is, as I'm a bit new to the framework, but I would like to avoid making an AJAX call in javascript if there is a better way. I'm not sure what the cause of the mishap with the action being incorrect on the dom. I suspect that it has to do with my route.config file as if I change the order or routes in the file, they have an impact on the result of the action. I can post this in an update if it's relevant but I figure I'd throw this out to the Stack Overflow expertise. Thank you.

Answer Source

You using the wrong overload, where the 2nd parameter is the route values which is why you get ....?Length=5 (string has one property named Length and there a 5 characters in 'Carts') . Use this overload (and remove the unnecessary Url option)

@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" />

Note also that you do not need the hidden input for the Product_ID since its already been added as a route/query string value.

Note also the default HttpMethod is "Post" so its not necessary to add that option.