css and js files not found(server responded with a status of 404) while browsing application on iis7

Question

I published my solution on vs 2010. Examples of references to style sheets and js files( first method ):

<link href="../../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script> 

These work fine while debugging. But while browsing on iis 7 the resources fail to load. In my other applications I have used( second method ):

<link href="~/Content/CSS/Login.css" rel="stylesheet" type="text/css" />

and this works fine both during debug and browse on iis . The URL of the view page is:

http://localhost/LaunchLogin/

The error on console:

Failed to load http://localhost/Content/css/Login.css resource: the server responded with a status of 404 (Not Found)

It should search for the file in:

http://localhost/LaunchLogin/Content/css/Login.css

Can anyone explain how iis tries to access the resources? Also how can I configure iis or publish in such a way that the first method works on iss browse?

Answer 1

Using ~ base path has no problem and the best(and as you said; work perfectly), but if you still need relative path try with these tags, I remove one directory up path.

<link href="../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>

BTW,

if your URL is http://localhost/LaunchLogin/ and your css file is in http://localhost/LaunchLogin/Content/css/Login.css then your code for linking css should be:

<link href="Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>

---

If you wish to do, then the next best method is to use absolute paths in CSS and JS linking. You can use following trick to do so:

1. Create a public static class with one variable: public String absRoot='http://localhost/LaunchLogin/'; and set it to whatever the root of your website.
2. Now link CSS and JS like following:

---

<link href="<%=StaticClassName.absRoot %>Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="<%=StaticClassName.absRoot %>Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>

3. After that whenever you need you can change absRoot value at one place only.