IIS Virtual directory creates path issue - asp.net-mvc-5

Question

I am using VS 2013 and MVC5
To host the application in IIS, i have used Properties-> Web ->Servers ->Local IIS and clicked on Create Virtual directory.
So this created a VD for "MyPortal"
But now i have a path problem.
I have an api controller in my application.
When i was using VS development server it was being accessed using the url : localhost:1553/api/menuapi and the data was getting accessed correctly.
But once it is hosted to IIS, it stopped working.
When checked, it is trying to fetch the data from url i.e :
localhost/api/menuapi and it gives a 404 error.
But actually the api is fine and the data is accessible from the url :
localhost/MyPortal/api/menuapi
Why and how is this path problem created?
The below is how i am doing the api call :
1. In javascript file :
$http.get('/api/menuapi/' + menuid).success(function (data) {});
Please suggest if any alternatives.

Answer 1

The problem is that your javascript will only works if the application is deployed on the top level of the webserver (/), as you are using an absolute url.
If your javascript is executed at the top level of your application, you could just change your url as relative:
$http.get('api/menuapi/' + menuid).success(function (data) {});
but if your javascript in a view, a better approach would be to retrieve the proper full url with:
#Url.Content("~/api/menuapi/")
like:
$http.get('#Url.Content("~/api/menuapi/")' + menuid).success(function (data) {});