Five common mistakes for ASP.NET (MVC) accesing resources : css, js, images, ajax
To have once for all the link to show to people, because too much makes the same error again and again.
(From here – you can use ResolveUrl or Url.Content – it’s the same for me. I use ResolveUrl because I used first …)
Case 1 The image does not display
Please check you have the following :
<img src='<%= ResolveUrl("~/Content/images/YOURIMAGE.jpg" )%>' alt="image" style="border:0" />
Case 2 The css does not show
Please check you have the following :
<%= string.Format("<link href='{0}' type='text/css' rel='stylesheet' />", ResolveUrl("~/Content/your.css")) %>
or
<style type="text/css"> @import '<%= ResolveUrl("~/Content/your.css") %>'; </style>
Case 3 The js does not execute (undefined error)
Please check you have the following :
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/yourjs.js")%>'></script>
Case 4 The js does execute in aspx page, but did not execute under js file
Please check you DO NOT have the following
<%
in the js file. The js file is not interpreted by the same engine as aspx, so can not interpret asp.net tags. Instead , add a parameter to your function : the path.
Simple example : Let’s say in aspx you have :
<script type=”text/javascript”> function Generate(){ window.open(‘<% Url.Action(“About”)%>’); } </script>
and you call Generate();
When you put in .js file, please put this :
function Generate(url){ window.open(url); }
and call like this :
Generate('<% Url.Action(“About”)%>');
Case 5 The ajax request gives you a 404 error.
Please ensure that you have
<%= ResolveUrl("~/path”)%>
and not
/path
Bonus 1: T4MVC , http://mvccontrib.codeplex.com/releases
Bonus 2: Edit the project file and put <MvcBuildViews>true</MvcBuildViews>
( short url: http://bit.ly/asp5Mistakes)
Why not use
…is’t more the ASP.NET MVC way.
Thanks for posting this information. I’ve taken to writing extension methods for javascript, images, css and any other resource used. Then, I can call the extension method like this:
<link href="” rel=”stylesheet” type=”text/css” />
Behind the scenes, the CSS method just calls the string.Format and makes the View code less cluttered, but otherwise is the same as your post. Thanks for spreading this around – the path issues can be a real headache.
Sorry, I tried to add a bit of code in the comment, but it was removed when the comment was submitted.
Thank you Will.
Please add without server tags.
I’m impressed, I must say. Really rarely do I encounter a blog that’s both educative and entertaining, and let me tell you, you have hit the nail on the head. Your idea is outstanding; the issue is something that not enough people are speaking intelligently about. I am very happy that I stumbled across this in my search for something relating to this.
Aw, this was a really nice post. In idea I would like to put in writing like this additionally – taking time and actual effort to make a very good article… but what can I say… I procrastinate alot and by no means seem to get something done.
I was very pleased to find this web-site.I wanted to thanks for your time for this wonderful read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you blog post.
thank you
this was a great blog and it helped me