How should I create relative paths in javascript using MVC3?

I am having some difficulty aligning my paths without a hardcode in javascript. I am running an asp.net MVC3 web application.

If my path is of the form

var url = 'http://serverNameHardcode/websiteNameHardcode/service/service?param1=' + param;

Then things work fine when I do

 $.get(url,
        {},
        function (data) {alert('callback success');},'json');

I would like to create a relative path. I tried

var url = 'service/service?param1=' + param;

And this works when I run locally and also in Firefox, but not in IE7. When I publish to the server without the hardcode the callback never fires. I know MVC-3 adds some complexity to routing, but I do not know if it applies to this situation开发者_C百科; so, I marked this question as such.

How should I setup my path so I don't need hardcodes?

Just write out the app path as a global js variable from your master view, then compose links as

APPPATH + "path/whatever"

Just had to solve this for one of my jQuery plugins, where it is preferable not to modify anything global (i.e. outside the scope of the plugin use) so I had to disregard the marked answer.

I also found that because I host DEV locally in IIS I could not use a root-relative path (as localhost is not the root).

The solution I came up with extended what I had already started with: a data-controller attribute specifying which controller to use in the element I am applying my plugin to. I find it preferable to data-drive the controller names so the components can be more easily reused.

Previous:

   <div data-controller="Section">

Solution:

   <div data-controller="@Url.Content("~/Section")">

This injects the server root (e.g. /Test.WindowsAzure.Apr2014/ before the controller name so I wind up with /Test.WindowsAzure.Apr2014/Section which is perfect for then appending actions and other parameters as you have. It also avoids having an absolute path in the output (which takes up extra bytes for no good reason).

In your case use something like:

// Assuming $element points to the element your plugin/code is attached to...
var baseUrl = $element.data('controller');
var url = baseUrl + '/service?param1=' + param;

Update:

Another approach we now use, when we do not mind injecting a global value, is Razor-inject a single global JavaScript variable onto window in the layout file with:

<script>
   window.SiteRoot = "@Url.Content("~/")";
</script>

and use it with

var url = window.SiteRoot + '/service?param1=' + param;

One option:

var editLink = '@Url.Action("_EditActivity", "Home")';
$('#activities').load(editLink + "?activityID=" + id);

another example:

var actionURL = '@Url.Action("_DeleteActivity", "Home")';
$('#activities').load(actionURL + "?goalID=" + gID + "&activityID=" + aID);

If you don't need to add to the string:

$('#activities').load('@Url.Action("_Activities", "Home", new { goalID = Model.goalID},null)');

I really need the path to get this to work, maybe its IE7. Who knows. But this worked for me.

Grab the URL and store it somewhere. I chose to implement the data attribute from HTML5.

<div id="websitePath" data-websitePath='@Request.Url.GetLeftPart(System.UriPartial.Authority)@Request.ApplicationPath'></div>

Then when you need to perform some AJAX or otherwise use a URL in javascript you simply refer to the stored value. Also, there are differences in the versions of IIS (not cool if your devbox is IIS5 and your server is IIS7). @Request.ApplicationPath may or may not come back with a '/' appended to the end. So, as a workaround I also trim the last character if it is /. Then include / as part of the url.

var urlprefix = $('#websitePath').data('websitepath');
urlprefix = urlprefix.replace(/\/$/, "");
var url = urlprefix + '/service/service?param1=' + param;

While the accepted answer is correct I would like to add a suggestion (i.e. how I do it).

I am using MVC, and any ajax request goes to a controller. My controllers have services so if a service call is required the controller will take of that.

So what's my point? So if ajax always communicates with a controller, then i would like to let the MVC routing resolve the path for me. So what I write in Javascript for url is something like this:

url: 'controller/action'

This way there is no need for the root path etc...

Also, you can put this in a separate Javascript file and it will also work whereas @Url.Content will need to be called on the view.