MVC MasterPage Design Time Support When Running in a Virtual Directory

Question

What is the preferred method of getting correct design time support for Master Pages when running an MVC application from a virtual directory?

For example, given the following image tag in the master page:

<img src="../../Content/Images/myimage.jpg" alt="image" />

This will provide full design time support in the master pages and all views that use the master page, but when running the app from http://localhost/MyApp/, the image will of course not be found (browser is looking for http://localhost/Content/Images/Banner.png).

Changing the image to:

<img src="<%=Url.Content("~/Content/Images/myimage.jpg")%>" alt="image" />

Will fix the runtime display, but breaks design time support in the master page and views.

A third option is to change the image tag to runat=server as follows:

<img runat="server" src="../../Content/Images/myimage.jpg" alt="image" />

This works for both runtime and design time, but having to specify a runat="server" seems like kind of like a hack.

Is there a better way to handle this?

Edit: The option cagdas is proposing will work at design time, but not at run time:

<img src="/Content/Images/myimage.jpg" alt="image" />

Answer 1

If the Content folder is at the root of the application (and I assume it is, since that's the default). You can just do this :

<img src="/Content/Images/myimage.jpg" alt="image" />

Which will look for the content folder on the root of the application.

Answer 2

i prefer to use your second example:

<img src="<%=Url.Content("~/Content/Images/myimage.jpg")%>" alt="image" />

..but like you said, it wont give you design support. I'd argue that in a MVC environment you should be using the VS designer. I simply keep a dev server running from VS and have my page open in my fav browser next to VS - this is better than the design view - its an actual browser.

Besides you dont want to sacrifice the good design idea of using the Url.Content method just to make some images appear in a designer. Maintaining a consistent approach by using Url.Content everywhere will do you more favours in the long run.

Answer 3

You can combine the two ways if you need design time support with the if false hack. This method is more of a hack than the runat="server" method, but it is useful in a few cases. I use this method for css class intellisense and for the jQuery vsdoc files.

<% // design-time use only %>
<% if (false) { %>
<img src="../../Content/Images/myimage.jpg" alt="image" />
<% } %>
<% // run-time %>
<img src="<%=Url.Content("~/Content/Images/myimage.jpg")%>" alt="image" />