CODEWITHSUNDEEP
javascriptasp.netcss.net-4.0url-routing
wegelagerer
wegelagerer

Reputation: 3710

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:

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.

Upvotes: 7

Views: 2371

Answers (6)

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

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

Upvotes: 2

Jason Geiger
Jason Geiger

Reputation: 2112

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.

Upvotes: 1

wegelagerer
wegelagerer

Reputation: 3710

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.

Upvotes: 1

Jay Douglass
Jay Douglass

Reputation: 4918

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

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

Upvotes: 2

Biby Augustine
Biby Augustine

Reputation: 425

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

Upvotes: 1

Morpheus
Morpheus

Reputation: 9065

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.

Upvotes: 2

Related Questions