Click here to Skip to main content
12,300,021 members (50,984 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked

Include JavaScript and CSS on your MasterPage

, 16 Jun 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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 master page 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 the 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 on a convenient way, sometimes in the same folder but most of the times on separated folders. I don't want to be forced to put all pages on the same folder just because of this.

So the idea is to put all the script and CSS references on 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">

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

Now, on the MasterPage code-behind you should include the following code:

protected override void OnLoad(EventArgs e)

Done! Keep in mind that the script and CSS references path you write must always be relative to he root of your site.

This way, everywhere the MasterPage is used the paths to the resources will always be correct.



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


About the Author

Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

You may also be interested in...

Comments and Discussions

Generalnice article Pin
SachinDakle29-Jun-12 16:00
memberSachinDakle29-Jun-12 16:00 
GeneralRe: nice article Pin
AlexCode29-Jun-12 21:25
memberAlexCode29-Jun-12 21:25 
Questionwhy databind Pin
ericpxz16-Jun-12 11:06
memberericpxz16-Jun-12 11:06 
AnswerRe: why databind Pin
AlexCode17-Jun-12 0:10
memberAlexCode17-Jun-12 0:10 
GeneralRe: why databind Pin
adriancs25-Oct-14 17:07
professionaladriancs25-Oct-14 17:07 
AnswerRe: why databind Pin
adriancs25-Oct-14 17:06
professionaladriancs25-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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 16 Jun 2012
Article Copyright 2012 by AlexCode
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid