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

Reputation: 48177

How reference MVC content folder in Javascript

In my PartialView 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"/>
</div>

That Path render as <img src="/MyProject/Content/information-button16.png"/>

Now Im trying to create a block message and want add a waiting cursor but this doesnt seem to work, because the same code generate a different Path .

$('#tabs').block({
    message: '<h1><img src="~/Content/busy.gif") /> Just a moment...</h1>'
});

The render URL is http://Myserver/MyProject/~/Content/busy.gif

After ask yesterday about it. I could fix it, 

message: '<h1><img src="/MyProject/Content/busy.gif") /> Just a moment...

But know is a bad idea hard code the project path in case this change.

So what is the correct way to reference the MVC path in javascript?

Upvotes: 0

Views: 283

Answers (2)

CelzioBR
CelzioBR

Reputation: 124

put the '/' in the begin of string. no ~/ or ../

document.getElementById('PhotoPerson').innerHTML = 
  '<img src="/Content/Images/UnknownPerson.png" class="img-center img-responsive img-thumbnail">';

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76547

Resolving the URL

If this isn't contained within an external Javascript file, you could use the Url.Content() helper method within MVC to resolve the appropriate absolute URL :

$('#tabs').block({
    message: '<h1><img src="@Url.Content("~/Content/busy.gif")" /> Just a moment...</h1>'
});

Consider a CSS Approach

Another more applicable approach might be to consider using a CSS class to set your busy animation. This will allow you to reference your image without explicitly calling the entire path of it each time :

.busy {
    /* This URL will need to be relative to the location of the element within your CSS */
    background: url('~/Content/busy.gif');
    height: 16px;
    width: 16px;
    display: block;
}

and then just use the CSS declaration as opposed to an <img>tag :

$('#tabs').block({
    message: '<h1><i class='busy'></i> Just a moment...</h1>'
});

Upvotes: 1

Related Questions