Web Api: PUT/ POST method does not work

Question

Here is my controller;

public class ProductionStateController : ApiController
    {
        private readonly IFranchiseService _franchiseService;
        public ProductionStateController(IFranchiseService franchiseService)
        {
            _franchiseService = franchiseService;
        }

        [DataContext]
        public string PutProductionState(int id, FranchiseProductionStates state)
        {
          _franchiseService.ChangeProductionState(id, state);

           var redirectToUrl = "List";

           return redirectToUrl;
        }
    }

My ajax call;

self.selectState = function (value) {
                $.ajax({
                    url: "/api/ProductionState",
                    type: 'PUT',
                    contentType: 'application/json',
                    data: "id=3&state=Pending",
                    success: function (data) {
                        alert('Load was performed.');
                    }
                });
            };

My route;

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

I am getting a 404 File not found error.

Same if I replace the method to be POST.

If I make it GET everyting works.

I am missing something here. Any help will be greatly appreciated.

Answer 1

<script>
function CallData(ids) {
    debugger;
    if (ids != null) {
        $.ajax({
            url: "EVENT To Call (Which is in Controller)",
            data: {
                SelId: $("#Control").val()
            },
            dataType: "json",
            type: "POST",
            error: function () {
                alert("Somehitng went wrong..");
            },
            success: function (data) {
                if (data == "") {
                    //Do Your tuff
                }
            }
        });
    }
}

//In Controller

[HttpPost]
public ActionResult EVENT To Call (Which is in Controller) (int ids)
{
  //Do Your Stuff
 return Json(Your Object, JsonRequestBehavior.AllowGet);
}

Answer 2

The web api framework matches action methods which start with the http verb. So PutProductionState is ok as a name.

I was able to make this work. The problems are the following: the second parameter of the action method should be marked with the [FromBody] attribute:

public string PutProductionState(int id, [FromBody] FranchiseProductionStates state)
        {
             _franchiseService.ChangeProductionState(id, state);

            var redirectToUrl = "List";

            return redirectToUrl;
        }

And the ajax call should look like this:

self.selectState = function (value) {
                $.ajax({
                    url: "/api/ProductionState/3",
                    type: 'PUT',
                    contentType: 'application/json',
                    data: "'Pending'",
                    success: function (data) {
                        alert('Load was performed.');
                    }
                });
            };

Note the id parameter added to the url and the stringified data.

Thanks!