8

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>

4 Answers 4

10

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.

1
  • Thanks @matt. Excellent idea and works pretty well here. Commented Dec 9, 2014 at 19:21
5

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>
0
2

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.