Question

and I can’t get mvc4 to recognize the Image location…

here is the code that I am using…

var $loading = $('<img src="Url.Content("~/Images/ajax-loader.gif")" alt="loading" class="ui-loading-icon">');

Putting in the @ symbol does not help… It only makes thing demonstrable worse. I then call this in a function…

$dialog
    .append($loading)
    .load($url)
    .dialog({
          autoOpen: false
        , title: $title
         , width: 1200
        , modal: true
       , minHeight: 350
         , show: 'fade'
         , hide: 'fade'
     });

In MVC2 I would simply just surround the Url.Content() in <%= %> tags and things would have been cool

this is the entire function…

function loadDialog(tag, event, target) {
            //debugger;
            event.preventDefault();
            var $loading = $('<img src="@(Url.Content("~/Images/ajax-loader.gif"))" alt="loading" class="ui-loading-icon">');
            debugger;
            var $url = $(tag).attr('href');
            var $title = $(tag).attr('title');
            var $dialog = $('<div></div>');
            $dialog.empty();
            $dialog
            .append($loading)
            .load($url)
            .dialog({
                autoOpen: false
                   , title: $title
                   , width: 1200
                   , modal: true
                   , minHeight: 350
                   , show: 'fade'
                   , hide: 'fade'
            });

            $dialog.dialog('open');
        };

Answer 1

The following seems to work with Razor…

var $loading = $('<img src="../../Images/ajax-loader.gif" alt="loading" class="ui-loading-icon">');

I just assumed that this wouldn’t work when moving the site from my developer box to an actual server. Well, I am about to find out.