MVC "~" path in javascript

Question

I use JavaScript code to call an MVC web API. It works fine when the current path is:

http://localhost/myApp/Administrator

but it fails when current path is:

http://localhost/myApp/Administrator/

I get the error The resource cannot be found. Below is the code:

$.getJSON("api/UserApi",
    function (data) {
        ...               
    });

I don't want to use an absolute URL in the code, e.g.:

$.getJSON("http://localhost/myApp/api/UserApi",          
    function (data) {
        ...    
    });

The absolute URL does work fine, but lacks flexibility. Is there a way to do the same thing as below?

$.getJSON("~/api/UserApi",          
    function (data) {
        ...
    });

ASP.NET supports the replacement of the "~" character with the current application's root path, e.g.:

http://localhost/myApp

However, the "~" character is not supported in JavaScript files. How do I accomplish the same thing?

The JavaScript is in a standalone file that cannot use ASP.NET statements like Url.Content. Is there a better way to do it?

I've found the following method. Are there any better solutions?:

1) Write the code below in a .cshtml file

<script type="text/javascript"> 
    var currentDomain = '@Url.Content("~")';
</script>

2) Read the currentDomain variable from the .js file:

$.getJSON(currentDomain + "/api/UserApi",          
    function (data) {
        ...        
});

Solution 1

If you're trying to get link to an action, you can define JavaScript variales in your view that will be populated with Url.Action:

<script type="text/javascript">
    var userApiPath = '@(Url.Action("userApi", "api"))';
</script>

And later use this variable in your JS file:

$.getJSON(userApiPath,          
    function (data) {
});

If you want a general path to your app, you can do something like that:

<script type="text/javascript">
    var path = '@(string.Format("{0}://{1}{2}",
                Request.Url.Scheme,
                Request.Url.Host,
                (Request.Url.IsDefaultPort) ? "" : string.Format(":{0}",
                Request.Url.Port)))';
</script>

And later use this variable somewhere in your JS files. Of course you don't have to use string.Format to do this, that's just an example.

EDIT:

You may also consider using RazorJS.

Solution 2

@Url.Action

for the Javascript

@Url.Content

for CSS and JS File Adding.

Solution 3

Have you tried the URL helper? It allows you to generate a fully qualified URL for your controller/action, like such:

@Url.Action("Index", "Home", etc...)

Reference: MSDN

UPDATE
I noticed you were referring to writing dynamic URLs into your .js file. You shouldn't hard-code URLs into your scripts, it will make your code harder to maintain. What if you change domains tomorrow and forget to change URLs in one of the script files? You should pass the URL as a parameter to your JS function from your .cshtml page instead.

Comments

[sam]

The javascript is in a standalone file that cannot use the asp.net statement,it there a better way to do it?

[sam]

Yes,I don't want to hard code domain name to the .js file,so I want to find a way which like the '~' char in CSHTML file that can automated replace the '~' char to current domain,it seems there no way to do it in JS file,so I think I have to get the current domain name from CSHtml file now,then pass it to js file.