Get a<HEAD> with ASP.NET 2.0

11 December 2006 - 11:43 PM / by Dominic Pettifer. 7 Comments for Get a<HEAD> with ASP.NET 2.0.

Technical Article - New in ASP.NET 2.0 is the ability to add runat="server" to the pages <head> tag. This lets you programmatically modify the head element and other elements inside it such as, Title, adding JavaScript code and style attributes, plus many more. Here I show how this is done.

Introduction

These techniques are useful in the ASP.NET programmer's arsenal because dynamically setting values in the pages head tag is very common. Before, ASP.NET developers had to rely on inline variables inside the page's head tag, or, heaven forbid, insert inline C#/VB code into the html page itself.

Now with ASP.NET 2.0 the runat="server" attribute allows you to programmatically set header values in the aspx pages' code behind, and keep absolutely all code out of the html itself. In the aspx/html page add the runat attribute to the head tag like so...

<head runat="server">
    <title>Page Title Here</title>
</head>

In the code behind you gain access to the header via the Page classes Header property. This Header property exposes a whole number of other properties and methods itself, some we'll learn about here...

Title Element

The most common need for programmatic header manipulation is to set the pages <title> tag dynamically. This is useful for Search Engine Optimisation because the title becomes the clickable link the user sees when your sites pages come up in a search. Also search engines pay special attention in particular to the Title tag when indexing pages.

this.Header.Title = "Page Title Here";

For search engine optimisation purpose it's useful to have a highly descriptive title for your page.

Meta Tags

Meta tags are useful for Meta data about your pages such as a description, keywords and author. They are usually used by search engines to index your page. Often you want these rendered dynamically dependant on content being pulled from a database for instance. Take this page, if you right click and view source you'll see description and keywords related to this particular blog.

Rather than statically create the meta tags and add the content dynamically, we'll dynamically create the meta tags themselves. For this we'll create an HtmlMeta control, set it's name and content, and add it to the Header properties Controls Collection, like so...

HtmlMeta metaDescription = new HtmlMeta();
metaDescription.Name = "description";
metaDescription.Content = "A description of the page here.";

// Add to the header’s controls collection
this.Header.Controls.Add(metaDescription);

This will get rendered in the head as...

<meta name="description" content="A description of the page here." />

We can add keywords in the same way, just set the Name property to 'keywords' and Content accordingly. Don't fret about keywords too much. Some search engines, such as Google, ignore them due to the keywords meta tag frequently being spammed by websites trying to increase their page rank.

Search Engine Optimisation is beyond the scope of this article, but there are plenty of resources on it.

Style Element

Sometimes, though not often, we may want to dynamically add or manipulate a page level style sheet. For instance, if we have a complex custom user control with various CSS style attributes applied, we could instead place the CSS in a style element inside the head, instead of having them inline amongst the HTML. Although for some reason the built in controls (such as the Calendar control) uses inline styles, so maybe I'm missing something here?

In any case, the style element doesn't directly map to any built in ASP control, but we can use an HtmlGenericControl instead, and set the tag name, attributes and content manually, like so...

HtmlGenericControl styles = new HtmlGenericControl("style");
styles.Attributes.Add("type", "text/css");
styles.InnerText = "p { font-weight: bold; }";

this.Header.Controls.Add(styles);

This will result in the following mark-up in your head tag...

<style type="text/css"> p { font-weight: bold; } </style>

Bear in mind it's possible to add multiple style elements to the head tag, if this code was repeated (making sure to create a new object reference), one wouldn't override the other, you'd just have two identical style elements in the head.

An alternative is to add the runat="server" and id attributes to a hand written style element already inside the head tag like so...

<style type=”text/css” runat=”server” id=”pageStyles”>

This then becomes a variable that we can access it from the code behind and add additional styles to if needed, like so...

pageStyles.InnerText += "h1 { font-size: 150%; }";

Although there is no type safety with the CSS styles themselves, we're basically adding and removing text content, so it would be difficult to programmatically remove individual CSS elements, unless we resorted to complex string operations.

Jump to Page...

Title, Meta Tags and Style Elements
Link Tags and JavaScript Code

7 Comments on "Get a<HEAD> with ASP.NET 2.0"

In Reply to comment by "Amber"

Thanks, Dude!

I needed to change content page styles based on user actions in my master page, which process AFTER the content loads. I was able to use your examples and point my content controls to styles in the master page and it worked!!

Comment Details

Your Name:

Website:

Email me when someone replies

Email Address:

Title: *

Comment: * BBCode: [b]bold[/b], [i]italics[/i], [code]code[/code], [li]bullet point[/li], [h]Heading[/h], [url="http://www.example.com"]link[/url], [quote author="John Smith"]quote[/quote]

Anti-spam Test

Get a<HEAD> with ASP.NET 2.0

Introduction

Title Element

Meta Tags

Style Element

7 Comments on "Get a<HEAD> with ASP.NET 2.0"

Re:

Re:

Re:

Yippee!

RE: Get a<HEAD> with ASP.NET 2.0

RE: Get a<HEAD> with ASP.NET 2.0

RE: Get a<HEAD> with ASP.NET 2.0

Leave a Comment

In Reply to comment by "Amber"

Random Image

Quick Poll

Latest Tweets