URL helper in JavaScript

Question

I'm using jQuery Lightbox for my image gallery.
The URL for the button image is '../../Content/Lightbox/lightbox-btn-next.gif'
That works fine if my URL is 'localhost/Something1/Somtehing2'
If I use another route like 'localhost/Something1/Something2/Something3' then URL to button images is incorrect.
Can I use Url.Action() inside .js files?
This is how I call .js files:

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.lightbox-0.5.js") %>"></script>

Answer 1

You can't use Url.Action() inside .js files. But you can define global variable and use it in you js file.

<script type="text/javascript">

    var imageUrl = "<%= ... %>";

</script>

Answer 2

I put the following in my master page, which accomplishes much the same thing as @Url.Content('~/path'):

<script type="text/javascript" charset="utf-8">
    function UrlContent(path) {
        return '@Url.Content("~/")' + path.replace(/^\//, ''); 
    }
</script>

When my master page is compiled and served up this translates into a javascript function that applies my site root to the path. Works great. The path.replace regex simply removes a leading slash if there is one since @Url.Content("~/") has a terminating slash.

Answer 3

Just put @Url.Content(@"~/some paths") into single quotes such as this:

'@Url.Content(@"~/some paths")'

Answer 4

I prefer to pull the URLs from a tags 'href's or form 'action's - or some other element that makes sense.

<img class="_click" src="<%= Url.Content("~/my/image.png") %>" alt="Click" />

And in my javascript (double check this on jQuery, I am not sure if it's the exact syntax.):

var url = $('._click').attr('href');
// To pass these to your plugin as options
// see lightbox source for a full list
$('a').lightBox({ imageLoading : url })

Another slightly less preferred option is to add your settings on top of your file:

<script type="text/javascript"><![CDATA[
    $('a').lightBox({ imageLoading : <%= Url.Content("~/my/image.png") %> })
//]]></script>

I said 'less preferred' because this approach mixes markup and code.

Yet another approach (which needs a lot of tidy up) is to serve you js file from a controller:

public ActionResult GetFileContent(string filename)
{
    // important: make sure to control the path for security
    var path = Server.MapPath("~/Scripts/" + filename);
    var content = System.IO.File.ReadAllText(path);

    // Use some kind of template convention
    content = content.Replace("{{IMAGE_PATH}}", Url.Content(@"~/my/image.png"));

    var bytes = new UTF8Encoding().GetBytes(content);
    return new FileContentResult(bytes, "text/javascript");
}