Easy Header Access in ASP.NET 2.0

Friday, March 24, 2006 1:28 PM Filed under:

General

Easy Header Access in ASP.NET 2.0

I am easy to please when it comes to small and simple things that make my life as a developer easier. For example, I came accross something I had not noticed before in ASP.NET while reading a post from Dave Burke. The HtmlHead class exposed by the Page class as Page.Header. I love this. It makes it so easy to get to, and manipulate the header attributes for a page. A simple act of changing the page's title, style, etc before was a pain. Now it's just setting a few properties.

To change a page's title:

this.Header.Title = "This is the new page title.";

To add a style attribute for the page:

Style style = new Style();
style.ForeColor = System.Drawing.Color.Navy;
style.BackColor = System.Drawing.Color.LightGray;

// Add the style to the header for the body of the page
this.Header.StyleSheet.CreateStyleRule(style, null, "body");

To add a stylesheet to :

HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "text/css");
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("href", "~/newstyle.css");
this.Header.Controls.Add(link);

Simple and elegant. I guess I can finally get rid of my helper classes to do all of that and keep things simpler. Sad that I had not noticed that was there in 2.0 earlier.

Comments

Karthik Nataraaj 3/24/2006 8:15 PM

Useful post Ryan.

It would be very handy in various scenarios. What about editing META tags programmatically? I googled about it and confused which way to follow.
darrenb 3/30/2006 4:17 AM

Back in beta1 you could add in a linked stylesheet even easier
<code>
Page.Header.LinkedStyleSheets.Add(stylesheet);
</code>
but that disappeared by beta2 :-(
Anthony 4/27/2006 9:49 PM

Do you have any suggestions for adding style classes to the header that have properties other than those exposed by the Style class?

For example, how would you add this to the page header:
<style>
.test-button {
background-image: url(test.gif);
}
</style>
Boris Yeltsin 7/16/2006 10:18 AM

Dim objMeta As New HtmlMeta
objMeta.Attributes.Add("key", "value")
Page.Header.Controls.Add(objMeta)
Chris May 1/7/2007 1:39 PM

I am in the same boat as Anthony.

This is easy if you need to set forecolor, but what if you need to do something just a little more complex like:

.LH1 {white-space: nowrap;}
BODY {margin:0px}

I don't see any example anywhere on the internet for how this can be done.
minik peri 12/2/2007 2:25 PM

Useful post Ryan.

It would be very handy in various scenarios. What about editing META tags programmatically? I googled about it and confused which way to follow.
Yiuy 2/6/2008 5:30 PM

Thanks!

I want to add that JavaScript blocks can be registered with ClientScriptManager class.
Colin 4/16/2008 12:59 PM

Anthony, Chris, what would basically need to be done is to subclass Style to add properties corresponding to the styles you wanted to add, then override the AddAttributesToRender() method to conditionally add the values you want. I agree, though, that you'd hope that they'd have an easier way to do such a thing!
Demirelli 7/27/2008 9:49 AM

Good afternoon,

I love your site, very well designed. I had a question about the code you posted. I use Visual Web Developer. As to my question - where would I exactly put this code to access the htmlMeta class?

I have a Default.aspx and it's assocated Default.aspx.cs file. Using these file as a starting point, where would I access instances of this class. Thank You in advance.
Ryan Farley 7/27/2008 11:36 AM

Hi Demirelli,

You can place your code to use the HtmlHead class where ever you need to use it, most likely spot would be in the Page_Load event.

-Ryan
Dizi 12/21/2008 8:50 PM

Useful post Ryan.

It would be very handy in various scenarios. What about editing META tags programmatically? I googled about it and confused which way to follow.
1/21/2009 10:40 PM

Modify CSS class. | keyongtech
kumar 6/27/2009 8:06 AM

nice article to access title and meta tags in asp.net 2.0

regards
kumar
http://www.plantsourcecode.in
John 3/3/2010 11:42 AM

To programmatically add a block of css into header, you can do like this:

//Or Page_Load
protected void Button1_Click(object sender, EventArgs e)
{
Literal lStyle = new Literal();
//Or from database
lStyle.Text = File.ReadAllText("c:\\css.txt");
this.Header.Controls.Add(lStyle);
}

The content of the file c:\\css.txt:

<style type="text/css">
#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:15px;
width:928px;
border:1px solid #008181;
background-color:Blue;
position:relative;
}

#content-main-two-column {
width:540px;
float:right;
}

#content-side-two-column {
float:left;
width:160px;
}

</style>

Sample html:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="content-container-two-column">
<p>
You can switch column programmatically
</p>
<div id="content-main-two-column">
Main content
</div>
<div id="content-side-two-column">
Side content
</div>
</div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</form>
</body>
</html>