In this article I will explain how to solve ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files. The problem happens when different levels of virtual paths are created in URL Routing and thus the external StyleSheets (CSS) and JavaScript (JS) files become inaccessible.
Cause
Consider the following website in the Solution Explorer.
![ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files]()
And below is how I have inherited the external StyleSheets (CSS) and JavaScript (JS) files.
<link href="CSS/Css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/Scripts.js" type="text/javascript"></script>
Now the above will work absolutely fine if I access the pages directly without any URL Routing and also if the URL Routing is done at the same level.
For example the following URLs will load the external StyleSheets (CSS) and JavaScript (JS) files correctly.
http://localhost:16878/SampleProject/ViewDetails.aspx
http://localhost:16878/SampleProject/ViewDetails
![ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files]()
But when I add some virtual folders in the URL using URL Routing then the page is unable to load the external StyleSheets (CSS) and JavaScript (JS) files.
For example
http://localhost:16878/SampleProject/Pages/ViewDetails
![ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files]()
The reason is that now the page is looking for the external StyleSheets (CSS) and JavaScript (JS) files inside the Pages folder which actually is virtual and does not exists and hence the external StyleSheets (CSS) and JavaScript (JS) files do not load.
The following screenshot displays incorrect path of the external StyleSheets (CSS) and JavaScript (JS) files in the page source.
![ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files]()
Solution
The solution to this problem is to make ASP.Net handle the external StyleSheets (CSS) and JavaScript (JS) files path.
External StyleSheets (CSS) File
For the external StyleSheets (CSS), there are three solutions.
1. Use runat=“server” attribute for the Link Tag and place it in ASP.Net Head or ASP.Net Form Tag with runat=”server” specified.
<head id="Head1" runat="server">
<title></title>
<link runat = "server" href="~/CSS/Css.css" rel="stylesheet" type="text/css" />
</head>
2. Place the Link Tag in ASP.Net Head with runat=”server” specified.
<head id="Head1" runat="server">
<title></title>
<link href="~/CSS/Css.css" rel="stylesheet" type="text/css" />
</head>
3. If the above two solutions are not working and the Link Tag is a Non ASP.Net Tag then you will need to use the ASP.Net ResolveUrl function.
<link href='<%=ResolveUrl("~/CSS/Css.css")%>' rel="stylesheet" type="text/css" />
External JavaScript (JS) File
For external JavaScript file, the only solution is to use the ASP.Net ResolveUrl function.
<script src='<%=ResolveUrl("~/Scripts/Scripts.js" ) %>' type="text/javascript"></script>
The following screenshot displays corrected path of the external StyleSheets (CSS) and JavaScript (JS) files in the page source.
![ASP.Net URL Routing Problem with external StyleSheets (CSS) and JavaScript (JS) files]()
