Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Include JavaScript and CSS on your MasterPage

, 16 Jun 2012
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">
    <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 code-behind 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 he root of your site.

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

Cheers!

License

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

Share

About the Author

AlexCode
Architect
Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.
 
Find more at on my blog.

Comments and Discussions

 
Generalnice article PinmemberSachinDakle29-Jun-12 16:00 
GeneralRe: nice article PinmemberAlexCode29-Jun-12 21:25 
Questionwhy databind Pinmemberericpxz16-Jun-12 11:06 
AnswerRe: why databind PinmemberAlexCode17-Jun-12 0:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web04 | 2.8.140926.1 | Last Updated 16 Jun 2012
Article Copyright 2012 by AlexCode
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid