Why I got an 404 error when I try to post data to a WebAPI action?

Question

Why I got an 404 error when I try to post data to a WebAPI action?

C#:

public class ProductsController : ApiController
{
    [HttpPost]
    public List<Product> GetProductsByCategoryId(int categoryId, string title)
    {
        return new List<Product>
        {
            new Product { Id = 1 , Name = "Test" }
        };
    }
}

jQuery:

$.ajax({
    url: '/api/products',
    type: 'POST',
    data: {
        categoryId: 12,
        title: 'ABC'
    },
})

you're not calling to the method, if your path is `/api/products` you have still to call the method name: `/api/products/GetProductsByCategoryId` — kosmos, Jan 05 '17 at 07:23
@kosmos my route config is `config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } );` — Mohamad Shiralizadeh, Jan 05 '17 at 07:25
but you're still getting a 404... try commeting the route map line and call directly the method — kosmos, Jan 05 '17 at 07:31

score 1 · Accepted Answer · edited May 23 '17 at 11:46

I found the answer here.

It's been quite sometime since I asked this question. Now I understand it more clearly, I'm going to put a more complete answer to help others.

In Web API, it's very simple to remember how parameter binding is happening.

if you POST simple types, Web API tries to bind it from the URL

if you POST complex type, Web API tries to bind it from the body of the request (this uses a media-type formatter).

If you want to bind a complex type from the URL, you'll use [FromUri] in your action parameter. The limitation of this is down to how long your data going to be and if it exceeds the url character limit.

public IHttpActionResult Put([FromUri] ViewModel data) { ... }

If you want to bind a simple type from the request body, you'll use [FromBody] in your action parameter.

public IHttpActionResult Put([FromBody] string name) { ... }

as a side note, say you are making a PUT request (just a string) to update something. If you decide not to append it to the URL and pass as a complex type with just one property in the model, then the data parameter in jQuery ajax will look something like below. The object you pass to data parameter has only one property with empty property name.
var myName = 'ABC';
$.ajax({url:.., data: {'': myName}});
and your web api action will look something like below.
public IHttpActionResult Put([FromBody] string name){ ... }
This asp.net page explains it all. http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

tnx @Amila

moribvndvs · Answer 2 · 2017-01-05T07:51:55.337

0

By default, Web API tries to match simple parameters from the URI, but you are supplying them in the body. In my original answer, I forgot you can't use FromBodyAttribute more than once. In this case, I'd create a model class to contain the values. Web API will then read this "complex" type from the body.

public class ProductCategoryModel
{
   public int CategoryId { get; set; }
   public string Title { get; set; }
}

public class ProductsController : ApiController
{
    [HttpPost]
    public List<Product> GetProductsByCategoryId(ProductCategoryModel model)
    {
        return new List<Product>
        {
            new Product { Id = 1 , Name = "Test" }
        };
    }
}

edited Jan 05 '17 at 07:51

answered Jan 05 '17 at 07:41

moribvndvs

42,191
11
135
149

you can't put two `[FromBody]` attribute. Error: `Can't bind multiple parameters ('categoryId' and 'title') to the request's content.` – Mohamad Shiralizadeh Jan 05 '17 at 07:46
This is correct. My mistake in my deleted answer was not making it clear this should be a model as opposed to a parameter. – G0dsquad Jan 05 '17 at 07:50

Why I got an 404 error when I try to post data to a WebAPI action?

2 Answers2