404 error when send request to web api controller

Question

The Problem

I am creating a ASP.NET MVC web site and as the title say i am trying to send a POST request to a Web Api controller with jquery, but am always receiving a 404 error. The crazy thing is that in the .NET framework 4.5 the exact same thing worked, but in the .NET framework 4.6.2 it really doesn't. I have found a lot of threads in google explaining what it might go wrong, but none of these worked. So, here is my code now:

My Web Api controller:

[Authorize]
public class CartController : ApiController
{
    private ApplicationDbContext _context;

    public CartController()
    {
        _context = new ApplicationDbContext();
    }

    [HttpPost]
    public IHttpActionResult AddToCart(string productId)
    {
        if (!ModelState.IsValid || !ItemIsValid(productId))
            return BadRequest();

        var newCartItem = new ShoppingCartItem
        {
            ProductId = productId,
            UserId = User.Identity.GetUserId()
        };

        _context.ShoppingCartItems.Add(newCartItem);
        _context.SaveChanges();

        return Ok();
    }

    private bool ItemIsValid(string productId)
    {
        return Enumerable.Any(_context.Products, contextproduct => contextproduct.Id.ToString() == productId && contextproduct.NumberAvailable > 0);
    }
}

My jQuery code:

$(".buy-button").click(function() {
            if (@User.Identity.IsAuthenticated.ToString().ToLower() === true) {
                $.ajax({
                    url: "/api/cart",
                    method: "POST",
                    data: $(this).next().val()
                }).done(function() {
                    alert("Product succesfully added to cart!");
                });
            } else {
                window.location.href = "@Url.Action("Login", "Account")";
            }
        });

My Global.asax code:

        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);

What i have tried

1) Some threads said that the order of the "calls" in the Global.asax matters, so i changed the position of RouteConfig.RegisterRoutes(RouteTable.Routes) in every possible way.

2) Added Route Attributes in my Web Api action([Route("api/Cart/AddToCart")]) which i know from experience that is redundant and changed my jQuery code accordingly.

3) Instead of adding attributes, i added the Routes directly to the Web Api Config.

4) I also tried to call the Api with Postman directly(i removed the Authorize attribute of course from the Web Api controller first).

Any help on this problem is appreciated. Thanks.

Answer 1

I know you talked about changing route config but as i dont know specifics have you tried mapping to action as well like

config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } );

and then in ur ajax call

     $.ajax({
                url: "api/Cart/AddToCart",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify($(this).next().val())
            }).done(function() {
                alert("Product succesfully added to cart!");
            });

also if you would like to send productid there is one another way where you can assign that value to data-rowId attribute of button like

HTML Code

button type="button" value="Add to cart" data-RowId="@item.productID"

and in ur jquery get that value as

var productID = $(this).attr('data-RowId');

and pass it as data: {productId : productID }

Assuming you have a item object and it has ProductID