Adding CSS and JavaScript files dynamically to your ASP.NET page

August 15, 2009, 15:54

When starting a new project I always create a Master Page that holds the content that is most used across the site. In my Master Page I have a PlaceHolder for my JavaScript files at the bottom of the page, right before the closing body tag.

<body>
<form id="form1" runat="server">
...
</form>
    <asp:PlaceHolder runat="server" ID="phdBottomScripts" />
</body>

public PlaceHolder BottomScriptsPlaceHolder
{
    get
    {
        return phdBottomScripts;
    }
}

The reason for having it at the bottom instead of the head is performance.

Now I have the ability to add JavaScript files to the bottom and CSS and JavaScript files to the head (through the pages Header property).

Lets add two methods for adding CSS and JavaScript files.

// using System.Web.UI.HtmlControls;
public static HtmlLink CreateCssLink(string cssFilePath, string media)
{
	var link = new HtmlLink();
	link.Attributes.Add("type", "text/css");
	link.Attributes.Add("rel", "stylesheet");
	link.Href = link.ResolveUrl(cssFilePath);
	if (string.IsNullOrEmpty(media))
	{
		media = "all";
	}
 
	link.Attributes.Add("media", media);
	return link;
}
 
public static HtmlGenericControl CreateJavaScriptLink(string scriptFilePath)
{
	var script = new HtmlGenericControl();
	script.TagName = "script";
	script.Attributes.Add("type", "text/javascript");
	script.Attributes.Add("src", script.ResolveUrl(scriptFilePath));
 
	return script;
}

The media attribute is to specify which media types the CSS file should be applied to.

Media types

all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

Example

protected override void OnLoad(EventArgs e)
{
	base.OnLoad(e);
 
	Page.Header.Controls.Add(Helper.CreateJavaScriptLink("~/Scripts/swfobject.js"));
	Page.Header.Controls.Add(Helper.CreateCssLink("~/Styles/styles.css", "screen"));
}

<head>
...
<script type="text/javascript" src="/Scripts/swfobject.js"></script>
<link type="text/css" rel="stylesheet" href="/Styles/styles.css" media="screen" />
</head>

To add JavaScript files to the bottom we need to add MasterType to our .aspx file to make my Master Page strongly typed (and thus able to access the BottomScriptsPlaceHolder property).

<%@ MasterType VirtualPath="~/MasterPages/MasterPage.master" %>

Master.BottomScriptsPlaceHolder.Controls.Add(Helper.CreateJavaScriptLink("~/Scripts/master.js"));

...
<script type="text/javascript" src="/Scripts/master.js"></script>
</body>

Other methods

Response.Write method

<link href="<%= ResolveUrl("~/Styles/Styles.css") %>" rel="stylesheet" type="text/css" />

ClientScriptManager

From MSDN.

The ClientScriptManager class is used to manage client scripts and add them to Web applications

Methods of the ClientScriptManager class.

RegisterClientScriptBlock – adds the JavaScript to the top of the page (in the body)
RegisterStartupScript – adds the JavaScript right before the closing form tag
RegisterClientScriptInclude – same as RegisterClientScriptBlock only with external JavaScript file instead

ResolveUrl and ResolveClientUrl

Simply put, the difference between these two methods is that ResolveUrl will create a path from the sites root (/Styles/Styles.css), while ResolveClientUrl will create a path that is relative from the page the user is on. (../Styles/Styles.css).

Share:

Tags: ASP.NET, C#
Category: ASP.NET, C# | Comment (RSS) | Trackback Adding CSS and JavaScript files dynamically to your ASP.NET page

3 Comments

Twitted by frederikvig says:

August 16, 2009 at 16:20

[...] This post was Twitted by frederikvig [...]
dersi says:

September 10, 2009 at 01:01

CSS ( Cascading Style Sheets ) – Why CSS ? – Introduction – Css Link Properties / Examples – Css List Properties / Examples – Css Layer Properties / Examples – Css TextBox Properties / Examples – Css Font Properties / Examples – Css Text Properties / Examples – Css Cursor Properties / Examples – Css Background Properties / Examples – Css Table Properties / Examples – Css Scroll Bar Properties / Examples – Tools – Units – Parameters – Template Page – Web Design

http://www.css-lessons.ucoz.com/
Part 2: Creating a foundation – Create an EPiServer site from scratch | Frederik Vig - ASP.NET developer says:

December 7, 2009 at 12:25

[...] start with Header.ascx, delete all the meta information. Next use the ResolveUrl method to link to the stylesheets. <%@ Control Language="C#" AutoEventWireup="true" [...]

Frederik Vig – ASP.NET developer

Follow me