Correct way to reference content in MVC

Question

When running my web app on my local machine i can ref css/scripts/images using:

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />

But when I deployed to my Development server, it wasn't able to find any of my content. After researching the issue everyone suggests using the below method:

<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />
<img src="<%=Url.Content("~/Content/3.png")%>" />

At least now all my content is loaded and works when I push to the development server. However now that I have the server script in there, the "Design" view in Visual Studio doesn't load any styling/etc. I'm wondering if there is an alternative or something I'm missing that perhaps would fix this? Or maybe I'm going about it all wrong? Any input is greatly appreciated.

Answer 1

The suggestion you found is a great way to reference content.

As far as Design View goes, don't sacrifice the elegance of your code just to get Design View. Learn to love Code View. Preview in a browser. In my experience, that workflow really has no major downsides (once you get used to it).

(As an aside, I think most of the developers who like ASP.NET MVC do not use "Design View" in Visual Studio. One of the reasons I love MVC is that it allows me to be picky about the markup. Any kind of designer lies outside that kind of thinking.)

Answer 2

You can always cheat the designer with an atrocity similar to this:

<% if (false) { %>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<% } %>
<link href="<%=Url.Content("~/Content/Site.css")%>" rel="stylesheet" type="text/css" />

but hey, quite honestly hitting F5 in the browser will give you faster results than waiting for the designer to load (even if your application is hosted on the other end of the world).

Answer 3

Design view is broken? Thats not a bug in your code, thats just the way it is. This is true for ASP.NET MVC and regular ASP.NET