I have a Master Page in the root of my project. I have Content Pages throughout my project and in subfolders referencing this Master Page. What is the correct way to reference my .CSS and .JS files if I always want them to be relative to the root?
Here is how I'm doing it now:
link href="/common/css/global.css" script src="/common/javascript/global.js"
But that breaks the link. I tried without the leading "/" but that didn't work on my pages in the subfolders.
I would use something like
Server.ResolveClientUrl("~/common/css/global.css")
This will get a proper url for you at all times.
Example:
Per the comment this would be full usage.
<link type="text/css" rel="stylesheet"
href='<%= Server.ResolveClientUrl("~/common/css/global.css") %>' />
According to comments, other validated usage, no "error CS1061: 'System.Web.HttpServerUtility' does not contain a definition" error:
<script type="text/javascript"
src="<%= Page.ResolveUrl("~/Scripts/YourScript.js") %>" ></script>
Also is important to always put the closing tag .
You can make the <link> tag to run at server so Asp.Net will resolve the URL for you like this:
<link href="~/common/css/global.css" runat="server" />
(Notice the '~')
I don't know if it can be applied to the <script> tag though, you should try...
EDIT: I discovered recently on a project that you can (and should) use a ScriptManager to hold your scripts (you can only have 1 per page). You can put one in your MasterPage and reference all your scripts. Inside your content page, you then add a ScriptManagerProxy that will 'reference' the scripts on the master page and you can even add other scripts for that content page only.
The solutions I saw so far didn't work in my project (especially not for .css links). The issues were the following:
<link> it didn't resolve the <%=...%> expression<%=...%> So I'd like to offer this solution: In code behind (your master page's C# class), add the the following 3 methods:
public partial class SiteBasic : System.Web.UI.MasterPage
{
public string ResolveURL(string url)
{
var resolvedURL=this.Page.ResolveClientUrl(url);
return resolvedURL;
}
public string cssLink(string cssURL)
{
return string.Format("<link href='{0}' rel='stylesheet' type='text/css'/>",
ResolveURL(cssURL));
}
public string jsLink(string jsURL)
{
return string.Format("<script src='{0}' type='text/javascript'></script>",
ResolveURL(jsURL));
}
}
For stylsheet references, you can then say:
<%=cssLink("~/css/custom-theme/jquery-ui-1.8.20.custom.css")%>
For JavaScript references, it looks like so:
<%=jsLink("~/Scripts/jquery-1.7.2.js")%>
And for other references, you can use:
<a href='<%=ResolveURL("~/Default.htm")%>'>link</a>
<img title='image' src='<%=ResolveURL("~/Images/logo.png")%>'/>
Note: I found it is better to use single quotes outside and double quotes inside the href or src attribute as shown in the example above. Doing it vice versa caused trouble in some cases as I found.
This solution is simple and it worked well in my case, even if the pages referencing the master page reside in different subdirectories. What it basically does is translating the ~ path (which needs to be absolute from the root of your web site) into a relative path (using as many ../ in the path as needed) based on the page you're currently displaying.
Advanced hint:
If you're using AJAX calls to invoke web service methods, then you'll have the same issue referencing them if you have ASPX pages on different directory levels. I recommend you define something like (assuming that your web services reside in the directory ~/AJAX):
<script type="text/javascript">
function getWebServicePath() { return '<%=ResolveURL("~/AJAX/")%>'; }
</script>
inside the <head> ... </head> section of your master page. This will make the entry path of the web service available in your JavaScript. You can use it like
$.ajax({
type: "POST",
url: getWebServicePath()+"myWebService.asmx/myMethod",
data: $.toJSON({ param: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// ... code on success ...
},
error: function (ex) {
// ... code on error ...
}
});
I do it as simple as this: link href="<%=ResolveUrl("~/common/css/global.css")%>"
