MVC2 IIS - Properly resolve URLs in external style sheets and scripts upon deployment?

I changed my Visual Studio MVC2 project to debug on a local IIS server, but I ran into problems with how the URLs are resolved.

Instead of hard-coding the links for say an ajax request, I now have to use the ResolveUrl() method like so:

<%= ResolveUrl("~/Controller/Action")%>

Which is fine when the javascript lives in a view. But I have javascript in external .js files which I can't use the ResolveUrl() function inside of.

This problem also affects links to images within external style sheets.

I feel like I shouldn't need to manually change these links every time I move from the Visual Studio web server to a local IIS web serve开发者_StackOverflow社区r, to an actual deployed web server.

What is the best way to work around this?

So far all I can think of is using a relative path such as ../Content/Images/image.gif

Here are a few tips I can give you. First of all you should not use ResolveUrl for resolving controller actions because you are still hardcoding and not taking advantage of the routes. What if tomorrow you decide to change your route definitions in global.asax? You should use Url helpers like this:

<%= Url.Action("Action", "Controller") %>

and for static resources:

<%= Url.Content("~/scripts/foo.js") %>

Now when you need to define image paths in CSS files you should know that they could be relative to the location of the CSS file. So for example if you include your CSS like this:

<link href="<%= Url.Content("~/styles/foo.css") %>" rel="stylesheet" type="text/css" />

inside foo.css you could use relative image paths:

.foo {
    /** you can safely define relative image paths in relation with the CSS **/
    background-image: url(../images/foo.png);
}

and the last part are javascript files. Inside them you cannot use helpers to define urls. So different techniques exist. Personally I like unobtrusive javascript with progressive enhancement meaning that the url I need is already in the HTML. Think for example AJAXifying a link or a form. Inside your view you would have:

<%= Html.ActionLink("foo bar", "foo") %>

and inside a separate javascript we could AJAXify it:

$('a').click(function() {
    $('result').load(this.href);
    return false;
});

There are case though where you do not have the url in the DOM. So you could use a global variable inside the view:

<script type="text/javascript">
    var myurl = '<%= Url.Action("foo") %>';
</script>

and inside your external javascript use this myurl global variable.

So what I would suggest is in your c# file you have an hidden text field and you write the absolute url path there and you append your path to the external js file after reading from the text file.

But I really dont see any gains out of loading another js file from a js file. Just load all the files at once and us eit conditionally within yoiur js file. I am assuming that you are loading the other js file from the js file itself cos you want to perform some action on loading the js file. you can achieve the same by just calling the function in the next file on window.load of the first file.. is that what your ultimate goal is?

I dont think you understood what I was getting into.

Say you have to do a postback to do a controller Food and action GetMenu then in your aspx page you will have a hidden field with the value set as follows:

<input type="hidden" id="hidden-getmenu-locator" value=<%=Url.Action("GetMenu","Food") %> />

and regarding your css and js you can get them as follows:

<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-ui-1.8.custom.min.js")%>"></script>

or again store in a hidden field and then use it.

Hope that helps