CodeProject
This is a quick one.
Around the web, I see a lot of tricks on how to do this, but in fact it's quite easy.
The Problem
When you reference a script or a CSS file on your masterpage, it takes the relative path of that file according to the MasterPage location.
The problem is that the MasterPage isn't the one that it's going to be shown, it will be the actual ASPX page that inherits from it.
This said, if your ASPX files are in other location than the MasterPage, then the references script files path won't be resolved.
There's also the problem when your site can either run on a virtual folder or as a site on IIS.
The Solution
There are a lot of ways to handle this, but most rely on specific ASPX locations.
I like to have my ASPXs well organized in a convenient way, sometimes in the same folder but most of the times in separated folders.
I don't want to be forced to put all pages in the same folder just because of this.
So the idea is to put all the script and CSS references in the MasterPage <Head>, make use of the server-side tilde (~) and write the correct paths on Page_Init.
If you need to reference jquery and jqueryUI, your MasterPage <head> should look similar as the following:
<head runat="server">
<title></title>
<link href="<%# ResolveUrl("~/")
%>css/custom-theme/jquery-ui-1.8.21.custom.css"
rel="stylesheet" type="text/css" />
<script src="<%# ResolveUrl("~/")
%>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="<%# ResolveUrl("~/")
%>Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Now, on the MasterPage CodeBehind, you should include the following code:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
Page.Header.DataBind();
}
DONE!
Keep in mind that the script and CSS references path you write must always be relative to the root of your site.
This way, everywhere the MasterPage is used, the paths to the resources will always be correct.
Cheers!
