Url helper in java script

Question

I'm using jquery lightbox for image gallery.
Url to the button image is '../../Content/Lightbox/lightbox-btn-next.gif'
That work 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

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");
}

Answer 2

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>