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

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.

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.

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.

Share Improve this question edited Apr 21, 2015 at 11:12 Suhaib Janjua 3,57216 gold badges69 silver badges87 bronze badges asked Jan 22, 2014 at 14:25 wegelagerer 3,72011 gold badges44 silver badges61 bronze badges

"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 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 Commented Jan 27, 2014 at 8:28
@Hrvach where your master page is located ? Inside some folder ? – Afnan Ahmad Commented Jan 27, 2014 at 13:56
@AfnanAhmad Master page is located in the root folder. – wegelagerer Commented Jan 28, 2014 at 7:24

Add a ment |

6 Answers 6

Sorted by: Reset to default 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.

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

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

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" />

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"/>

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.

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

6 Answers 6

与本文相关的文章

评论列表(0)