Angular JS not calling JsonResult After Hosting on IIS

Question

I am creating a Web App in .NetCore with Angular Js, Its working Fine in testing on localhost . But when I host it in IIS server it failed to call a JsonResult Method

Below is my Code [Angular Js]

         $http({
                url: '/Home/GetDetails',
                method: "GET",
                params: {
                    StaffCode: $scope.StaffCode,
                }
            }).then(function mySuccess(response) 
                {
                }, function myError(response) {
                $window.alert('An Error Occurred , Try Again Later');
            });

it is working fine on localhost , But after hosting on IIS server call to GetDetails Jsonresult is happening in wrong way

For example :

http://10.1.10.10/ApplicationName/Home/Index is the Web address of Application

And Call to GetDetails jsonresult is

http://10.1.10.10/Home/GetDetails [Gives Error 404 : File Not Found]

Instead of http://10.1.10.10/ApplicationName/Home/GetDetails

I tried

url: '~/Home/GetDetails',

And

url: './Home/GetDetails',

But it does not seems to call right address of Jsonresult Method

What is the correct Format of url here ?

Answer 1

The problem here is you have hard-coded the urls which does not work if application is hosted inside some directory but not in root folder, so the solution is to always use Url.Action helper method to generate the correct relative urls like:

url: '@Url.Action("GetDetails","Home")'

This will make sure to generate the correct url regardless of application is hosted how much nested sub-directories.

Hope it helps!