Why will my images/script not show up on asp.net mvc deployed site?

Question

I have deployed an app to an IIS6 server. For now, I'm using the wildcard mapping. My app works perfectly fine on my development machine, but when I try to access it on the server, some pages work and some don't.

It is the scripts & images that are giving me the biggest problem.

I have a url http://localhost/sdev/home/index and the page comes up fine except the images and scripts don't load. When I view source and look at the url I see:

../../Content/Images/logo.png

If I try to navigate to that url, it tries to go to

http://localhost/content/images/logo.png

instead of

http://localhost/sdev/content/images/logo.png

The strange thing is that some pages work fine, such as:

http://localhost/sdev/ServiceCall/DivisionStep/ALB?type=fsr

Any ideas on what I can do to fix this? Yes, I have read Phil's instructions and thought I followed them correctly but maybe I missed something.

Answer 1

Rather than doing this:

../../Content/Images/logo.png

Do this:

/sdev/Content/Images/logo.png

Even better, generate the first part of that URL (/sdev) in your code behind since it sounds like maybe that part would change (I'm guessing here "sdev" is some kind of development version of the site, and for production there would be no "sdev" in front of the URLs?)

The reason it doesn't work in the first example is that the browser sees it as if you are looking at a file named "index" in the "sdev/home" directory. So going up two directories brings you to the root level.

It works fine though for the "/sdev/ServiceCall/DivisionStep/ALB" Because you are now looking at "ALB" in the "/sdev/ServiceCall/DivisionStep" directory, and going up two levels brings you to "/sdev"

Answer 2

Use

<%= Url.Content("~/Content/Images/logo.png") %>

to generate the urls and you should be ok.

Answer 3

i just wrote some helpers for images you can use.

(1) simply create a public static class called AppHelper with a using System.Web.Mvc; and add it to a folder in your MVC project called 'Helpers'.

(2) copy in these methods:

    public static string Image(this HtmlHelper helper,
        string classText, string sourcePath, string altText, string width, string height)
    {
        return Image(helper, classText, sourcePath, altText, width, height, null);
    }

    public static string Image(this HtmlHelper helper,
        string classText, string sourcePath, string altText, string width, string height, object htmlAttributes)
    {
        StringBuilder sb = new StringBuilder();
        if (htmlAttributes != null)
            foreach (PropertyInfo p in htmlAttributes.GetType().GetProperties())
                sb.AppendFormat(@" {0}=""{1}""", p.Name, p.GetValue(htmlAttributes, null).ToString());

        if (htmlAttributes == null)
            return String.Format(@"<img{0} src=""{1}"" alt=""{2}"" width=""{3}"" height=""{4}"" />",
                String.IsNullOrEmpty(classText) ? String.Empty : String.Format(@" class=""{0}""", classText),
                (new UrlHelper(helper.ViewContext.RequestContext)).Content(sourcePath),
                altText, width, height);
        else
            return String.Format(@"<img{0} src=""{1}"" alt=""{2}"" width=""{3}"" height=""{4}""{5} />",
                String.IsNullOrEmpty(classText) ? String.Empty : String.Format(@" class=""{0}""", classText),
                (new UrlHelper(helper.ViewContext.RequestContext)).Content(sourcePath),
                altText, width, height, sb.ToString());
    }

(3) ..and use like so: <% =Html.Image("small_pic_border","~/Content/Images/Home/office2_137x139.jpg","principal headshot","137","139") %>

This method uses the Url.Content method that liammclennan mentioned. It should also force you into some good habbits: like using alternate text etc.

For scripts use: <script type="text/javascript" src="<% =Url.Content("~/Scripts/mootools.js") %>"></script>