Question

I have a C#.Net MVC3 web app. In a certain js file I am loading a dialog box and assigning the loading: property the below image

loading: $('<img src="../../Content/Images/loading.gif" alt="loading" class="ui-loading-icon">'),

However, in different environments it does not find the image. The code in those instances should be

loading: $('<img src="../../../Content/Images/loading.gif" alt="loading" class="ui-loading-icon">'),

I tried

loading: $('<img src="@Href("~/Content/Images/loading.gif")" alt="loading" class="ui-loading-icon">'),

And also tried

loading: $('<img src="@Url.Content("~/Content/Images/loading.gif")" alt="loading" class="ui-loading-icon">'),

Neither worked….when I’ve used @Url.Content and @Href in the aspx files, it works.

Needless to say, I’m not a javaScript expert, but I figure this must be do-able in the js file.

Any ideas?

Answer 1

The way I usually get around this is by creating a helper function in your master or layout page:

Place this in your layout page below the reference to jquery but above any other file that will use it:

// This adds the helper onto the jQuery object rather than just being global
$.getUrl = function (path) {
     return '@Url.Content("~")' + path;
};

Then use it like this in your js file:

$('<img src="' + $.getUrl('/Content/Images/loading.gif') + '" />')