How do I create my own webapi action and call it using jquery?

Question

I am learning ASP.NET MVC4 Web APIs. I would like to create a new method that would be which receives two parameters

[HttpPost] 
public string MarkAsSeen(int objectID, long userID)

I would like to consume it using jquery:

$.ajax({
        type: "POST",
        url: "/api/tutorial/MarkAsSeen",
        data: JSON.stringify({ objectID: _obj, profileID: _pid }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            alert(_tutorial + ' seen');
        },async: true
});

I have my route configured this way

config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}"
            );

But it just doesn't work:

No HTTP resource was found that matches the request URI 'http://local.dev.unation.com/api/tutorial/MarkAsSeen'.","MessageDetail":"No action was found on the controller 'Tutorial' that matches the request.

IF I change the route's template to api/{controller}/{action}/{objectID}/{profileID} and the jquery method to add this info on the url: /api/tutorial/MarkAsSeen/ + _obj + / + _pid it works.

I would not like to perform these changes because:

I would like to have one general route to all actions (so their parameter names/quantity shouldn't matter)
This url appending is just ugly, I would like to use the data attribute

Can you tell me what I am doing wrong?

tks!

nemesv · Accepted Answer · 2013-01-04 14:38:40Z

3

Web.Api doesn't really like multiple parameters. The easiest solution is to create a new type which holds your data:

public class MarkAsSeenRequest
{
    public int objectID { get; set; }

    public int profileID { get; set; }
}

And use that in your controller action:

[HttpPost] 
public string MarkAsSeen(MarkAsSeenRequest request)
{
    //...
}

It should work fine with your original route:

config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}"
        );

For further reading:

answered Jan 4, 2013 at 14:38

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JSBach Over a year ago

worked, thanks a lot, I would never find out this "trick" :) If it is a get request, how could I use this when calling using the url?

nemesv Over a year ago

So if you want have a GET action with complex type parameter you need to use the [FromUri] attribute: [System.Web.Http.HttpGet] public string MarkAsSeen([FromUri]MarkAsSeenRequest request) { } then you can call this action with the url: e.g. /api/tutorial/MarkAsSeen?objectID=1&profileID=2

Collectives™ on Stack Overflow

How do I create my own webapi action and call it using jquery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related