Ignoring Javascript, CSS and image files routing in ASP.net

Question

I've turned Stack Overflow up and down, but, unfortunately, none of the answers helped me.

I have a web app that works perfectly on my local PC using IIS provided by the Visual Studio, but when I deploy this app to the server only the CSS is displayed properly.

Folder structure for files is as follows:

Root (this folder is named Knowledge Management on the server)
- CSS
- JS
- Media
- Uploads
  - Documents
  - Images
  - Users

My code, at least for Master page head section looks like this:

<head runat="server">
    <link href="CSS/Style.css" rel="stylesheet" />
    <script src="/JS/jQuery203Min.js"></script>
    <script src="/JS/jQueryUI1103Min.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

However, browser generates it like this:

<head>
    <link href="../../CSS/Style.css" rel="stylesheet" />
    <script src="JS/jQuery203Min.js"></script>
    <script src="JS/jQueryUI1103Min.js"></script>    
    <script src="/JS/HomeArticles.js"></script>
</head>

The problem is that besides CSS neither none of the files in JS folder and none of the files in Media or Uploads folders and subfolder doesn't generate properly.

The thing is if I add "slash" in front of the image src attribute the image gets location http://localhost/Media/Discussion.png and if I don't add "slash" then the image location is http://localhost/Uploads/Users/HrvojeFadiga.jpg when it should be http://localhost/Knowledge%20Management/Uploads/Users/HrvojeFadiga.jpg

Here is a sample of code with images:

<div class="profileInfoWrapper">
    <img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
    <span class="postInfo">
        <img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
    </span>
    <span class="postInfo">
        <img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
    </span>
    <span class="postInfo">
        <img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
    </span>
</div>

FYI, Global.asax doesn't contain any rules for ignoring file routes except for .axd files which is added by default.

"The thing is if I add "slash" in front of the image src attribute" - Can you show the code which includes the image element? Also, if you remove the "/" from the script src attribute, do those links still not work? — Ben Smith
– Ben Smith, Commented Jan 26, 2014 at 22:52
@Fresh I've added the code with image element. Removing slash doesn't help. I don't know if there is a problem with Windows Server here or what because in test environment (locally with IIS Express) everything works fine. — wegelagerer
– wegelagerer, Commented Jan 27, 2014 at 8:28
@Hrvach where your master page is located ? Inside some folder ? — Afnan Ahmad
– Afnan Ahmad, Commented Jan 27, 2014 at 13:56

Morpheus · Accepted Answer · 2014-01-24 17:00:11Z

2

I was able to sort this by adding runat=server attribute and using the tilt(~) before defining the source of the file. For example:

<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />

Same applies to javascript files.

answered Jan 24, 2014 at 17:00

Morpheus

9,12613 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

wegelagerer Over a year ago

Unfortunately, adding runat tag to javascript files caused an error.

Morpheus Over a year ago

Have you tried <script src="~/JS/jQuery203Min.js" runat="server"/>? Note /> and no ending </script>

wegelagerer Over a year ago

Yes, I have - still the same.I'm really puzzled. I have even tried to add .js files to the CSS folder as .css files work as they are supposed to but didn't help either.

Morpheus Over a year ago

Really bizarre this one as working fine for me. Consider using bundles instead.

wegelagerer Over a year ago

I believe I've found a workaround (after almost 10 days of tweaking, trying, etc.)! :) It seems that adding scripts to the ScriptManager will do the trick - I have to test it a bit, but will let you know! Thank you for your help!

Jay Douglass · Accepted Answer · 2014-01-29 17:31:08Z

2

For any URLs for scripts and styles you need to call ResolveUrl like this:

<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />

answered Jan 29, 2014 at 17:31

Jay Douglass

4,9382 gold badges31 silver badges20 bronze badges

Comments

Suhaib Janjua · Accepted Answer · 2014-01-31 09:53:02Z

2

+50

Try this. without "~" it can also work but you can add it just to refer the root directory which is always your project solution. So by using Tilde "~" you can properly specify where your css and js files are located.

<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>

Similarly for your images that you have stored in upload folders. You can access it by using

<img src="~/Uploads/Images/youImage.gif" />

edited Jan 31, 2014 at 9:53

answered Jan 30, 2014 at 6:47

Suhaib Janjua

3,57016 gold badges69 silver badges87 bronze badges

Comments

Biby Augustine · Accepted Answer · 2014-01-28 11:51:32Z

1

Just try like below and its worked for me...

<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>

answered Jan 28, 2014 at 11:51

Biby Augustine

4251 gold badge3 silver badges16 bronze badges

1 Comment

wegelagerer Over a year ago

That was the first thing I've tried. Unfortunately it wasn't helpful.

wegelagerer · Accepted Answer · 2014-01-30 10:36:51Z

First of all, thank you all for your replies. After couple of days of playing I've finally figured out what to do to make everything work.

JS problems

I've solved JS problems by adding ScriptManager control to the .aspx page and by adding JS files inside it.

<asp:ScriptManager ID="smScripts" runat="server">
     <Scripts>
          <asp:ScriptReference Path="JS/jQuery203Min.js"/>
     </Scripts>
</asp:ScriptManager>

For some reason CSS files were working "out of the box" so I left them unchanged.

Image problems

I've managed to sort images problems out by avoiding hardcoded links to the images and by adding <%: Page.ResolveUrl("~/Media/Image.png") %> to the src attribute of the <img> tag. I guess I should've done this for everything that I don't want to route. This can be done for CSS files, JS files, everything. However, (even though this should work perfectly) I've experienced some strange problems with JS files and that's the reason for using ScriptManager.

Page links problem

At first I didn't realize that none of my links was working so I figured that the problem were semi-hardcoded links that, for some reason, don't route properly even though I hardcoded route the same way as defined in Global.asax file. I'm still not sure why this isn't working.

The solution for this is to generate links by using <%: Page.GetRouteUrl("RouteName", new { routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value}) %> and everyhting will work fine.

Jason Geiger · Accepted Answer · 2014-01-30 19:14:48Z

1

The directories/virtual-directory setup is the likely culprit.

View your page in Google Chrome then "Inspect Element". Scroll to the top and you include your .JS files. You can click on them to see what URL they are trying to link to. More than likely the path is slightly different on the server than your local copy.

answered Jan 30, 2014 at 19:14

Jason Geiger

2,13922 silver badges35 bronze badges

Collectives™ on Stack Overflow

Ignoring Javascript, CSS and image files routing in ASP.net

6 Answers 6

5 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related