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.
6 answers
solution1
2 2014-01-24 17:00:11
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.
solution2
2 2014-01-29 17:31:08
对于脚本和样式的任何URL，您需要调用ResolveUrl，如下所示：
<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
solution3
2 2014-01-30 06:47:17
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" />
solution4
1 2014-01-28 11:51:32
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"/>
solution5
1 ACCPTED 2014-01-30 10:36:51
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.
solution6
1 2014-01-30 19:14:48
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.