Click here to Skip to main content
15,881,882 members
Articles / Web Development / CSS

Include JavaScript and CSS on Your MasterPage

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
16 Jun 2012CPOL1 min read 57.3K   7   7
How to include JavaScript and CSS on your MasterPage

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:

HTML
<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:

C#
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!

This article was originally posted at http://www.instanceofanobject.com/feeds/posts/default

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

Comments and Discussions

 
Generalnice article Pin
SachinDakle29-Jun-12 16:00
SachinDakle29-Jun-12 16:00 
GeneralRe: nice article Pin
AlexCode29-Jun-12 21:25
professionalAlexCode29-Jun-12 21:25 
Questionwhy databind Pin
ericpxz16-Jun-12 11:06
ericpxz16-Jun-12 11:06 
AnswerRe: why databind Pin
AlexCode17-Jun-12 0:10
professionalAlexCode17-Jun-12 0:10 
GeneralRe: why databind Pin
adriancs25-Oct-14 17:07
mvaadriancs25-Oct-14 17:07 
AnswerRe: why databind Pin
adriancs25-Oct-14 17:06
mvaadriancs25-Oct-14 17:06 
GeneralRe: why databind Pin
AlexCode27-Oct-14 7:59
professionalAlexCode27-Oct-14 7:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.