CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Juan Carlos Oropeza
Juan Carlos Oropeza

Reputation: 48177

What is the picture folder to use in javascript

In my View I can drag and drop from my Content folder and get picture address automatic.

<div style="text-align:center">
    <img src="~/Content/information-button16.png" id="[email protected]_ID" />
    <img src="~/Content/center-icon.png" id="[email protected]_ID" />
</div>

Now Im trying to create a block message and want add a waiting cursor but this doesnt seem to work, because Content isnt a public folder.

$('#tabs').block({
    message: '<h1><img src=' 
                   + localpath  
                   + '@Url.Content("/GTracker/Content/busy.gif")' 
                   + ' /> Just a moment...</h1>',
    css: { border: '2px solid #3399ff' }
});

What should I do?

Upvotes: 0

Views: 71

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

Can't seem to find a quick reference, but ~ can be used on <img src='~/... and in @Url.Content("~. It won't work in a js literal.

If your js is in a razor .cshtml, you can do:

$('#tabs').block({
    message: '<h1><img src=' 
                   + '"'
                   + '@Url.Content("~/GTracker/Content/busy.gif")' 
                   + '"'
                   + ' /> Just a moment...</h1>',
    css: { border: '2px solid #3399ff' }
});

or

$('#tabs').block({
    message: '<h1><img src="@Url.Content("~/GTracker/Content/busy.gif")" /> Just a moment...</h1>',
    css: { border: '2px solid #3399ff' }
});

If, instead, this code is in a .js file, you'll need to pass in the translated root path, I normally do this with something like, in _layout.cshtml:

<head>
    <script>var rootpath = '@Url.Content("~")';</script>

then you can use rootpath in your .js (assuming it's included after the above)

$('#tabs').block({
    message: '<h1><img src=' 
                   + '"'
                   + rootpath + '/Content/busy.gif' 
                   + '"'
                   + ' /> Just a moment...</h1>',
    css: { border: '2px solid #3399ff' }
});

The aleviates hardcoded paths and allows your website to move around as required.

Upvotes: 1

Related Questions