Adding styles dynamically to ASP.NET page header


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 technique out there for this. In this Article, I wish to share those techniques with.

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 defend 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 HtmlHeadallows you to add information such as style sheets, style rules, a title, and metadata to the head element.

http://msdn.microsoft.com/en-us/library/system.web.ui.page.header.aspx

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

More elegant technique is 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
http://msdn.microsoft.com/en-us/library/system.web.ui.istylesheet.createstylerule.aspx

With whatever the technique you follow please remember the following hints also,

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.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s