Route to api work wrong

Question

When i make GET request from http://localhost:5086/ it work great it send to api/FileBrowser, but when i try to make request from http://localhost:5086/Home/Index to api, to url added controller Home and request send to /Home/api/FileBrowser

Please help what i'm doing wrong?

ApiController with 2 methods

public FileBrowserModel Get()
    {
        var result = new FileBrowserModel();
        List<string> drives = new List<string>();
        foreach (var drive in DriveInfo.GetDrives())
        {
            var path = drive.Name;
            FileManagerCounter fmCounter = new FileManagerCounter(path);
            result.CountTo10Mb += fmCounter.CountTo10Mb;
            result.Countfrom10To50Mb += fmCounter.Countfrom10To50Mb;
            result.CountFrom100Mb += fmCounter.CountFrom100Mb;
            drives.Add(path);
        }
        result.SubDirectories = new List<string>(drives);
        return result;
    }
    [CacheOutput(ServerTimeSpan = 150)]
    [System.Web.Http.HttpGet]
    public FileBrowserModel Get(string path)
    {
        var result = new FileBrowserModel();

        try
        {
            try
            {
                result.ParentPath  = Directory.GetParent(path).FullName;
            }
            catch (Exception)
            {

            }

            var files = Directory.GetFiles(path).ToList();
            result.Files = new List<string>(files);
            result.CurrentPath = path;
            FileManagerCounter fmCounter = new FileManagerCounter(path);
            result.CountTo10Mb = fmCounter.CountTo10Mb;
            result.Countfrom10To50Mb = fmCounter.Countfrom10To50Mb;
            result.CountFrom100Mb = fmCounter.CountFrom100Mb;

            var subDirectories = Directory.GetDirectories(path).ToList();
            result.SubDirectories = new List<string>(subDirectories);
        }
        catch (Exception ex)
        {
            throw new HttpResponseException(HttpStatusCode.InternalServerError);
        }

        return result;
    }

js File

angular.module("FileBrowserApp", [])
.controller("fileBrowserController", function($scope, $http) {
    $scope.getFileBrowsing = function (path) {
        $scope.isLoading = true;
        if (path != null) {
            $http({
                url: "api/FileBrowser?path=" + encodeURIComponent(path),
                method: "GET"
            }).success(function (data) {
                $scope.fileBrowserModel = data;
                $scope.isLoading = false;
            });
        } else {
            $http({
                url: "api/FileBrowser",
                method: "GET"
            }).success(function (data) {
                $scope.fileBrowserModel = data;
                $scope.isLoading = false;
            });
        }
    };
    $scope.getFileBrowsing();
});    

Routes

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{path}",
            defaults: new { path = RouteParameter.Optional }
        );
    }
}
public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Answer 1

EDIT : War10ck's answer is the easy solution.

---

The below is an alternate solution which builds the relative url properly

The problem is, you hardcoded the url value to be "api/FileBrowser". So based on the current page, this value is going to change.If you are on Home page, It will be Home/api/FileBrowser.

What you should be doing is to build the correct relative url. Since you are using an asp.net mvc page, you may take advatage of the Url.Action helper method to build the correct relative url. You can generate the value of your application route in a razor view and pass that to your angular controller/data services and use that.

So in your razor view,

<script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
    var a = angular.module("FileBrowserApp").value("appSettings", myApp);
</script>

and in your angular controllers, you can access this appSettings.

var app = angular.module("FileBrowserApp", []);
var ctrl = function (appSettings) {

    var vm = this;

    vm.baseUrl = appSettings.Urls.baseUrl;
    //build other urls using the base url now
    var fileBrowserUrl= vm.baseUrl + "api/FileBrowser";
    alert(fileBrowserUrl);
    //You can use this variable value for your http call now
    $http({
            url: fileBrowserUrl+ "?path=" + encodeURIComponent(path),
            method: "GET"
        }).success(function (data) {
            $scope.fileBrowserModel = data;
            $scope.isLoading = false;
        });

};
app.controller("fileBrowserController", ctrl)

You can and should access this in your data services and directives etc and use that to build the correct url.

You may also consider moving your http calls to a data service from your angular controller.

Answer 2

If you're absolutely sure that your Web API layer will always exist one layer above the root domain then you can change your urls in your ajax calls to be:

url: "/api/..."

This calls the api relative to the root domain regardless of how the site may be structured.