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

Adding Styles Dynamically to ASP.NET Page Header

By , 15 Jan 2013
Rate this:
Please Sign up or sign in to vote.

Introduction

Recently, when I was working on the ASP.NET web site, I wanted to modify the page styles dynamically. I Googled and found that there are various techniques out there for this. In this tip, I wish to share those techniques with you.

Using the Code

Following are some of the techniques out there to accomplish this.

1. By using Page.header.Controls.Add()

Page.Header property gets the document header of the page if the head element is defined with “runat=server” tag in the page declaration.The Header property gets a reference to an HtmlHead object that you can use to set document header information for the page. The HtmlHead allows you to add information such as style sheets, style rules, a title, and metadata to the head element.

You can read more about Page.Header property here.

By using a literal control, you can include the CSS file or even a style set.

Literal cssFile = new Literal()
{
    Text = @"<link href=""" + Page.ResolveUrl(styleFilePath) + 
	@""" type=""text/css"" rel=""stylesheet""/>"
};
Page.Header.Controls.Add(cssFile);  
Page.Header.Controls.Add(
new LiteralControl(
@"<style type='text/css'>
        .myCssClass
        {
background: black;
border: 1px solid;
        }
</style>
    "
)); 

Or HtmlGenericControl can use to add the styles file:

//// Insert css file to header
HtmlGenericControl oCSS = oCSS = newHtmlGenericControl();
oCSS.TagName = "link";
oCSS.Attributes.Add("href", "css/mystyle.css");
oCSS.Attributes.Add("rel", "stylesheet");
oCSS.Attributes.Add("type", "text/css");
this.Page.Header.Controls.Add(oCSS);

2. Page.Header.Stylesheet

A more elegant technique is the use of the Page.Header.Stylesheet. Instead of using the string to defend styles (like above with Literal), you can use the style properties to create this.

//// Create dynamic style rule which applies to the CSS class selector (“.MyCssClass”)
Style dynamicClassStyle = new Style();
dynamicClassStyle.BorderStyle = BorderStyle.Solid;
dynamicClassStyle.BorderColor = System.Drawing.Color.Black;
dynamicClassStyle.BorderWidth = new Unit(1);
dynamicClassStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicClassStyle, null, ".MyCssClass"); 
 //// Create dynamic style rule which applies to type selector ("DIV")
Style dynamicTypeStyle = new Style();
dynamicTypeStyle.BorderStyle = BorderStyle.Solid;
dynamicTypeStyle.BorderColor = System.Drawing.Color.Black;
dynamicTypeStyle.BorderWidth = new Unit(1);
dynamicTypeStyle.BackColor = System.Drawing.Color.White;
Page.Header.StyleSheet.CreateStyleRule(dynamicTypeStyle, null, "DIV"); 

For more information, please refer to this link.

With whatever technique you follow, please remember the following hints as well,

Adding styles programmatically using the methods of the IStyleSheet interface during asynchronous postbacks is not supported. When you add AJAX capabilities to a Web page, asynchronous postbacks update regions of the page without updating the whole page.

License

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

About the Author

Tharaka MTR
Technical Lead Eyepax IT Consulting (Pvt) Ltd.
Sri Lanka Sri Lanka
Having more than 9 year hands-on industry experience in software development
Responsible for designing, implementing and managing complex software systems with stringent up-time requirement.

Visit my blog
Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMember 969271917-Jan-13 7:27 
GeneralRe: My vote of 5 PinmemberTharaka MTR17-Jan-13 7:41 

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
Web01 | 2.8.140415.2 | Last Updated 16 Jan 2013
Article Copyright 2013 by Tharaka MTR
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid