Asp.net web api routing issue?

Question

I am using web api in my mvc application. I have a problem while calling web api using jquey.get function. Consider the following scenario:

I have 2 controller name:

HomeMVCController
TestAPIController (using mvc style routing i.e. api/{controller}/{action}/{id})

HomeMVC controller contains 2 actions

Index
About

TestAPI controller contains 1 action

Get

When i was on Index view of HomeMVC controller i.e.

http://localhost:1025/Home

and when i call $.get("api/TestAPI/Get") from the browser it returns the expected json response.

But when i was on About view of HomeMVC controller i.e.

http://localhost:1025/Home/About

and when i call $.get("api/TestAPI/Get") from the browser it returns error, resource not found, and the resource it is trying to locate is:

http://localhost:1025/Home/About/api/TestAPI/Get

instead of

http://localhost:1025/api/TestAPI/Get

Why browser added Home/About in the url to api and why it is not added Home/Index when i was on Index view. On Index view why api call is working as expected and why not working on About view ??

Rui · Accepted Answer · 2014-02-17 10:32:12Z

1

You used a relative url when you should be using an absolute url.

You should instead use an absolute url by doing:

$.get("@Url.RouteUrl("@Url.RouteUrl("DefaultApi", new {httproute="", controller="TestAPI", action="Get"}))

If you want to keep your javascript in separate js files (and not in the razor files) what you can do is have an initialize method that is called from a razor view.

The .js file:

var myPageJsUrls = {};

var MyPageInitialize = function(getItemsUrl, saveItemUrl, editItemUrl){
    myPageJsUrls.getItemsUrl = getItemsUrl;
    myPageJsUrls.saveItemUrl = saveItemUrl;
    myPageJsUrls.editItemUrl = editItemUrl;
}


var getItems = function(){
    return $.get(myPageUrls.getItemsUrl);
}

...

In the razor file:

<script>
    myPageInitialize('@Url.Action("AllItems", "Items")', '@Url.RouteUrl("DefaultApi", new {httproute="", controller="TestAPI"}, ...)
</script>

edited Feb 17, 2014 at 10:32

answered Feb 17, 2014 at 10:09

Rui

4,9163 gold badges32 silver badges35 bronze badges

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

2 Comments

user1740381 Over a year ago

but you are using server syntax for generating absolute url, how i can using this in js file ??

Rui Over a year ago

What I usually do is I have an Initialize method that is called from a Razor view and with all the urls the javascript needs, e.g.: Initialize({testApiGet: '@Url.RouteUrl(...)', GetItems: '@Url.Action(...)'}). I'll update the answer with an example

Collectives™ on Stack Overflow

Asp.net web api routing issue?

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